📜  如何在 Android 应用中实现暗(夜间)模式

📅  最后修改于: 2022-05-13 01:54:32.303000             🧑  作者: Mango

如何在 Android 应用中实现暗(夜间)模式

Light-on-dark 配色方案,也称为深色模式,是一种补充模式,它使用一种配色方案,其中网页的内容显示在深色背景上。这种配色方案减少了屏幕发出的光并增强了可读性。切换到深色模式可以让网站用户随时切换到对眼睛友好且节省资源的设计。

暗模式或夜间模式最近引起了很多关注,因为谷歌已将其包含在其最新的 Android 版本中,即Android Q(API 级别 29)中,并且随着越来越多的应用程序开始原生支持暗模式,因为它有很多好处:

  • 减少电池/电源使用。
  • 提高低视力用户和对强光敏感的用户的能见度。
  • 使在光线不足的情况下更容易使用设备。

    如何将暗模式添加到您的 Android 应用程序?

    1. 创建一个新的 Android 项目
    2. 创建布局并添加按钮或开关以切换开/关暗模式
    3. 现在右键单击值并选择在资源管理器选项中显示
    4. 现在复制 values 文件夹并将其粘贴到同一目录中并将其重命名为“values-night”
    5. 现在您将看到 2 个colors.xml 文件,一个是正常的,一个是写有(夜间)的
    6. 现在将这些颜色添加到正常/浅色模式的 colors.xml
    7. 并将这些颜色添加到 colors.xml(night)
    8. 将 backgroundColor 添加到您的主布局
    9. 将 textColor 添加到您的 TextView 的
    10. 现在只需使用AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
      如下所示
      public class MainActivity
          extends AppCompatActivity {
        
          private Button btnToggleDark;
        
          @Override
          protected void onCreate(
              Bundle savedInstanceState)
          {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
        
              btnToggleDark
                  = findViewById(R.id.btnToggleDark);
        
              btnToggleDark.setOnClickListener(
                  new View.OnClickListener() {
                      @Override
                      public void onClick(View view)
                      {
                          AppCompatDelegate
                              .setDefaultNightMode(
                                  AppCompatDelegate
                                      .MODE_NIGHT_YES);
                      }
                  });
          }
      }
      
    11. 保存应用程序的状态,以便当用户在应用暗/亮模式后重新打开应用程序时,该模式会保留。我们将使用 SharedPreferences 来保存应用程序的状态
      public class MainActivity
          extends AppCompatActivity {
        
          private Button btnToggleDark;
        
          @SuppressLint("SetTextI18n")
          @Override
          protected void onCreate(
              Bundle savedInstanceState)
          {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              btnToggleDark
                  = findViewById(R.id.btnToggleDark);
        
              // Saving state of our app
              // using SharedPreferences
              SharedPreferences sharedPreferences
                  = getSharedPreferences(
                      "sharedPrefs", MODE_PRIVATE);
              final SharedPreferences.Editor editor
                  = sharedPreferences.edit();
              final boolean isDarkModeOn
                  = sharedPreferences
                        .getBoolean(
                            "isDarkModeOn", false);
        
              // When user reopens the app
              // after applying dark/light mode
              if (isDarkModeOn) {
                  AppCompatDelegate
                      .setDefaultNightMode(
                          AppCompatDelegate
                              .MODE_NIGHT_YES);
                  btnToggleDark.setText(
                      "Disable Dark Mode");
              }
              else {
                  AppCompatDelegate
                      .setDefaultNightMode(
                          AppCompatDelegate
                              .MODE_NIGHT_NO);
                  btnToggleDark
                      .setText(
                          "Enable Dark Mode");
              }
        
              btnToggleDark.setOnClickListener(
                  new View.OnClickListener() {
        
                      @Override
                      public void onClick(View view)
                      {
                          // When user taps the enable/disable
                          // dark mode button
                          if (isDarkModeOn) {
        
                              // if dark mode is on it
                              // will turn it off
                              AppCompatDelegate
                                  .setDefaultNightMode(
                                      AppCompatDelegate
                                          .MODE_NIGHT_NO);
                              // it will set isDarkModeOn
                              // boolean to false
                              editor.putBoolean(
                                  "isDarkModeOn", false);
                              editor.apply();
        
                              // change text of Button
                              btnToggleDark.setText(
                                  "Enable Dark Mode");
                          }
                          else {
        
                              // if dark mode is off
                              // it will turn it on
                              AppCompatDelegate
                                  .setDefaultNightMode(
                                      AppCompatDelegate
                                          .MODE_NIGHT_YES);
        
                              // it will set isDarkModeOn
                              // boolean to true
                              editor.putBoolean(
                                  "isDarkModeOn", true);
                              editor.apply();
        
                              // change text of Button
                              btnToggleDark.setText(
                                  "Disable Dark Mode");
                          }
                      }
                  });
          }
      }
      

    输出: