Computer >> Máy Tính >  >> Xử lý sự cố >> Android

Cách đưa chủ đề tối vào ứng dụng Android của bạn

Đối với các nhà phát triển, việc tạo ứng dụng Android là một quá trình dễ dàng - thiết kế một giao diện người dùng hấp dẫn mới là điều thực sự khó khăn. Đó là lý do tại sao chúng tôi đã viết hướng dẫn “Cách thiết kế giao diện người dùng ứng dụng Android không gây khó chịu”, dành cho các nhà phát triển cần một số cảm hứng trong việc tạo giao diện người dùng đơn giản nhưng hấp dẫn. Trong hướng dẫn đó, chúng tôi đã đề cập ngắn gọn đến việc thêm chủ đề chế độ tối / đêm vào ứng dụng của bạn và trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách thực hiện.

Thêm chủ đề chế độ tối / đêm vào ứng dụng của bạn có thể là một lựa chọn tuyệt vời cho người dùng của bạn - nó tiết kiệm pin và dễ nhìn hơn nhiều vào ban đêm. Nền trắng trên văn bản màu đen hoặc bất kỳ sự kết hợp nào của các màu "sáng" trong giao diện người dùng của bạn, thực sự gây căng thẳng cho mắt, đặc biệt là vào ban đêm. Do đó, nền tối với văn bản sáng hơn sẽ ít gây căng thẳng và có hại cho mắt hơn nhiều, đó là lý do tại sao nhiều ứng dụng phổ biến đã bắt đầu bao gồm chủ đề tối - gần đây nhất là YouTube và Reddit, mặc dù Facebook vẫn chưa công bố chủ đề của họ sau khi hứa hẹn sẽ trở lại Tháng 5.

Nếu bạn muốn dễ dàng thêm chế độ tối có thể chuyển đổi vào ứng dụng Android của mình, hãy làm theo hướng dẫn Ứng dụng này và nhận xét nếu bạn gặp bất kỳ sự cố nào!

Tạo thuộc tính XML

Trước tiên, bạn cần tạo một tệp thuộc tính XML để xử lý các chủ đề này. Điều này tốt hơn nhiều so với việc bao gồm hai bộ tài nguyên trong APK của bạn cho hai chủ đề khác nhau và do đó làm tăng kích thước APK của bạn, vì Android có thể tự nhiên thay đổi màu sắc trên các thuộc tính thông qua XML này.

Vì vậy, trong thư mục 'tài nguyên' của ứng dụng, hãy tạo một tệp có tên là attrs.xml và thêm các dòng này ( đây là các thuộc tính có thể định kiểu): 

<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>

Trước Lollipop, chúng tôi không thể chỉ định các thuộc tính cho các tệp có thể kéo được, vì vậy chúng tôi phải chỉ định ID tài nguyên cho các tệp có thể kéo - tuy nhiên, trường hợp này không còn xảy ra nữa.

Thêm kiểu

Để thực hiện công việc này, chúng ta cần tạo hai kiểu riêng biệt sẽ chia sẻ cùng một cơ sở. Đầu tiên rõ ràng sẽ là chủ đề "sáng" chính của bạn và chủ đề thứ hai sẽ là chủ đề "tối" của bạn. 

<!-- 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>

Dưới đây là các kiểu thực tế cho một hoạt động nhất định:

<!-- 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>

Bạn cần chỉ định một trong những chủ đề này vào Tệp kê khai cho hoạt động của ứng dụng, trong trường hợp này là FeedActivity.

Tạo kiểu cho Chế độ xem

Dưới đây là một ví dụ về cách tạo kiểu cho chế độ xem của bạn - trong ví dụ này là ví dụ về lỗi chuyển hướng “Không tìm thấy trang”. 

<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" />

Cách bật tính năng chuyển đổi chủ đề động

Cách tốt nhất và hiệu quả nhất để bật chuyển đổi chủ đề động là tải SharedPreference có giá trị được sử dụng để lưu cài đặt vào phiên bản Ứng dụng bằng cách sử dụng mẫu Singleton, có nghĩa là chúng tôi sẽ không phải thực hiện điều đó khi bắt đầu mỗi Hoạt động. 

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;
 }
}

Vì phiên bản này đang được khởi chạy trước bất kỳ thứ gì khác, nó cho phép bạn gọi isNightModeEnabled () Boolean bất cứ khi nào bạn muốn, trong bất kỳ hoạt động nào thuộc về ứng dụng sau khi nó đã được mở. 

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);
 }
}

Tuy nhiên, nếu bạn muốn áp dụng chủ đề khác với chủ đề được chỉ định trong tệp kê khai, thì phải được thực hiện trước gọi phương thức onCreate () cha.

Đặt trạng thái bằng AppCompat

AppCompat thực sự hữu ích cho nhiều thứ và trong trường hợp này, chúng tôi sẽ sử dụng nó để đặt trạng thái chế độ. Điều này có nghĩa là bạn không còn cần phải sử dụng phiên bản ứng dụng để tạo trạng thái được lưu trong bộ nhớ cache, do đó giảm bớt khối lượng bộ nhớ cache của ứng dụng ( mặc dù chỉ bằng một biên rất nhỏ ). 

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

Tại đây, bạn có thể sử dụng:

  • AppCompatDelegate.MODE_NIGHT_YES
    AppCompatDelegate.MODE_NIGHT_NO
    AppCompatDelegate.MODE_NIGHT_AUTO

Truy xuất trạng thái 

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);
 }
}

Đó là điều nên làm - bạn có thể tiếp tục tùy chỉnh và điều chỉnh các giá trị theo ý thích của mình, nhưng hướng dẫn này là một phần giới thiệu tuyệt vời để giúp bạn bắt đầu với việc bao gồm một bản địa chủ đề tối trong ứng dụng Android của bạn.