วิธีใส่ธีมสีเข้มในแอพ Android ของคุณ

สำหรับนักพัฒนา การสร้างแอพ Android เป็นกระบวนการที่ง่าย การออกแบบ UI ที่น่าดึงดูดนั้นยากจริงๆ นั่นเป็นเหตุผลที่เราเขียนคู่มือ "วิธีออกแบบ UI ของแอป Android ที่ไม่ห่วย" สำหรับนักพัฒนาที่ต้องการแรงบันดาลใจในการสร้าง UI ที่เรียบง่ายแต่น่าดึงดูด ในคู่มือนั้น เราได้กล่าวถึงการเพิ่มธีมโหมดมืด / กลางคืนให้กับแอปของคุณ และในคู่มือนี้ เราจะแนะนำคุณเกี่ยวกับเรื่องนี้

การเพิ่มธีมโหมดมืด / กลางคืนให้กับแอพของคุณอาจเป็นตัวเลือกที่ยอดเยี่ยมสำหรับผู้ใช้ของคุณ – ช่วยประหยัดแบตเตอรี่และถนอมสายตาในตอนกลางคืนได้ง่ายกว่ามาก พื้นหลังสีขาวบนข้อความสีดำหรือการผสมสี 'สว่าง' ใน UI ของคุณนั้นสร้างความเครียดให้กับดวงตาโดยเฉพาะในตอนกลางคืน ดังนั้นพื้นหลังสีเข้มที่มีข้อความสีจางจึงทำให้เครียดน้อยลงและเป็นอันตรายต่อดวงตา ซึ่งเป็นสาเหตุที่ทำให้แอปยอดนิยมจำนวนมากได้เริ่มใช้ธีมสีเข้ม เช่น YouTube และ Reddit เมื่อเร็วๆ นี้ แม้ว่า Facebook จะยังไม่เผยแพร่หลังจากที่ได้ให้คำมั่นสัญญากลับมา พฤษภาคม.

หากคุณต้องการเพิ่มโหมดมืดแบบสลับได้ลงในแอป Android ของคุณ ให้ทำตามคู่มือ Appuals และแสดงความคิดเห็นหากคุณพบปัญหาใดๆ!

การสร้างแอตทริบิวต์ XML

ขั้นแรก คุณต้องสร้างไฟล์แอตทริบิวต์ XML ที่จะจัดการกับชุดรูปแบบ สิ่งนี้ดีกว่าการรวมทรัพยากรสองชุดใน APK ของคุณสำหรับสองธีมที่แตกต่างกัน และทำให้ขนาด APK ของคุณใหญ่โต เนื่องจาก Android สามารถเปลี่ยนสีในแอตทริบิวต์ได้เองผ่าน XML นี้

ดังนั้นในโฟลเดอร์ "ทรัพยากร" ของแอป ให้สร้างไฟล์ชื่อ attrs.xml และเพิ่มบรรทัดเหล่านี้ (เป็นแอตทริบิวต์ที่จัดรูปแบบได้):

<declare-styleable name="CTAppTheme">
      <attr name=”primaryTextColor” format=”color”/> 
      <attr name=”secondaryTextColor” format=”color”/> 
      <attr name=”dividerColor” format=”color”/>
      <attr name=”backgroundCardColor” format=”color”/> 
      <attr name=”iconPlaceholder” format=”integer”/>
</declare-styleable>

ก่อนหน้า Lollipop เราไม่สามารถระบุแอตทริบิวต์สำหรับ drawables ได้ ดังนั้นเราจึงต้องระบุรหัสทรัพยากรสำหรับ drawables – อย่างไรก็ตาม จะไม่เป็นเช่นนั้นอีกต่อไป

การเพิ่มสไตล์

ในการทำงานนี้ เราจำเป็นต้องสร้างรูปแบบที่แยกจากกันสองรูปแบบซึ่งจะแชร์ฐานเดียวกัน อันแรกจะเป็นธีม 'สว่าง' หลักของคุณ และอันที่สองจะเป็นธีม 'มืด' ของคุณ

<!-- Light base activity theme -->
<style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#F4F4F6</item>
    <item name="secondaryTextColor">#96F4F4F6</item>
    <item name="backgroundCardColor">#FFFF</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_light_plholder</item>
</style>

<!-- Dark base activity theme -->
<style name="ActivityTheme.Primary.Base.Dark"    parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#33343B/item>
    <item name="secondaryTextColor">#8033343B</item>
    <item name="backgroundCardColor">#28292e</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_dark_pholder</item>
</style>

นี่คือรูปแบบที่แท้จริงสำหรับกิจกรรมที่กำหนด:

<!-- Specific Feed activity theme -->
<style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light">
    <item name="android:windowBackground">#F4F4F6</item>
</style>

<style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark">
    <item name="android:windowBackground">#33343B</item>
</style>

คุณต้องระบุหนึ่งในธีมเหล่านี้ในไฟล์ Manifest สำหรับกิจกรรมของแอป ซึ่งในกรณีนี้คือ FeedActivity

จัดรูปแบบมุมมอง

นี่คือตัวอย่างการจัดรูปแบบมุมมองของคุณ ในตัวอย่างนี้ สำหรับข้อผิดพลาดในการเปลี่ยนเส้นทาง "ไม่พบหน้า"

<ImageView
           android:id="@+id/placeHolderAssetImageView"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:src="?attr/iconPlaceholder"
           android:layout_marginBottom="8dp" />

       <TextView
           android:id="@+id/placeHolderTitleTextView"
           android:text="Page not found."
           android:textSize="16dp"
           android:textColor="?attr/primaryTextColor"
           android:layout_margin="16dp" />

วิธีเปิดใช้งานการสลับธีมแบบไดนามิก

วิธีที่ดีที่สุดและมีประสิทธิภาพที่สุดในการเปิดใช้งานการสลับธีมแบบไดนามิกคือการโหลดค่า SharedPreference ซึ่งใช้ในการจัดเก็บการตั้งค่าลงในอินสแตนซ์ของแอปพลิเคชันโดยใช้รูปแบบ Singleton ซึ่งหมายความว่าเราจะไม่ต้องทำในตอนเริ่มต้นของแต่ละกิจกรรม

public class App extends Application {
 public static final String TAG = "App";

private boolean isNightModeEnabled = false;

@Override
 public void onCreate() {
 super.onCreate();

// We load the Night Mode state here
 SharedPreferences mPrefs =  PreferenceManager.getDefaultSharedPreferences(this);
 this.isNightModeEnabled = mPrefs.getBoolean(“NIGHT_MODE”, false);
 }

public boolean isNightModeEnabled() {
 return isNightModeEnabled;
 }

public void setIsNightModeEnabled(boolean isNightModeEnabled) {
 this.isNightModeEnabled = isNightModeEnabled;
 }
}

เนื่องจากอินสแตนซ์นี้มีการเปิดตัวก่อนสิ่งอื่นใด คุณจึงสามารถเรียก isNightModeEnabled() บูลีนเมื่อใดก็ตามที่คุณต้องการ ในทุกกิจกรรมที่เป็นของแอปเมื่อเปิดแล้ว

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (MyApplication.getInstance().isNightModeEnabled()) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

อย่างไรก็ตาม หากคุณต้องการใช้ธีมที่แตกต่างจากที่ระบุไว้ในไฟล์ Manifest จะต้องทำก่อน เรียกเมธอด onCreate() ระดับบนสุด

การตั้งค่าสถานะโดยใช้ AppCompat

AppCompat มีประโยชน์จริง ๆ สำหรับสิ่งต่าง ๆ มากมาย และในกรณีนี้ เราจะใช้มันเพื่อตั้งค่าสถานะของโหมด ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้อินสแตนซ์ของแอปเพื่อสร้างสถานะแคชอีกต่อไป ดังนั้นจึงลดการขยายแคชของแอป (แม้ว่าจะมีระยะขอบเพียงเล็กน้อย )

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

คุณสามารถใช้:

• AppCompatDelegate.MODE_NIGHT_YES
  AppCompatDelegate.MODE_NIGHT_NO
  AppCompatDelegate.MODE_NIGHT_AUTO

ดึงข้อมูลสถานะ

AppCompatDelegate.getDefaultNightMode();

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (AppCompatDelegate.getDefaultNightMode()
    ==AppCompatDelegate.MODE_NIGHT_YES) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

ที่ควรจะเป็น – คุณสามารถปรับแต่งและปรับแต่งค่าต่างๆ ได้ตามใจชอบต่อไป แต่คู่มือนี้เป็นบทแนะนำที่ดีในการเริ่มต้นใช้งาน ซึ่งรวมถึง เนทีฟ  ธีมสีเข้มในแอป Android ของคุณ