在你的 Android App 中支持多主题

Question

我最近一直在忙着整我的黑客资讯 App——Materialistic，今天难得有空，就让我来给大家分享一下我在 Materialistic 里使用的一个有趣的功能吧。

纵观现在的主流阅读类 App，用户最常见的需求就是能够基于自己的阅读习惯选择明亮/灰暗两种风格的主题。为了用户的使用体验，我当然要为 Materialistic 添加这样的功能啦，要不然没人用我会很伤心的！而且很幸运的是，在 Android 里支持多种主题的切换并不麻烦（如果你的代码没有问题的话），实现这个功能蛮顺利的。所以今天我打算通过这篇博客给大家介绍我在 Materialistic 里面为了支持多种主题切换所使用的方法。

准备工作：

1. 你最少要有两个由 Android 基本的 light/dark 主题衍生而来的主题。如果你使用了最新的 appcompat-v7 包，所对应的就是 Theme.AppCompat.Light 或 Theme.AppCompat.Light.DarkActionBar（明亮风格），和 Theme.AppCompat（灰暗风格）主题
2. 你需要为你的主题设置颜色。你可以在 Google design spec 里面看到有关颜色搭配的指导
3. （可选项）为每一个主题的选项菜单图标加上颜色。取决于你的实现方式，染色过程可以是自动的，也可以是手动的，不过自动化的过程不就意味着你可以把一套图标应用于一种主题嘛，其他的调整只要改改颜色就可以了；但就 Materialistic 的实际需求来考虑，我还是为一个主题预留了多套不同的图标来避免麻烦……

我今天就以明亮风格的主题来开始讲解吧：

values/styles.xml

    <style name="AppTheme" parent="Theme.AppCompat.Light">
   		 <item name="colorPrimary">@color/colorPrimary</item>
   		 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   		 <item name="colorAccent">@color/colorAccent</item>
   		 <item name="android:textColorPrimary">@color/textColorPrimary</item>
   		 <item name="android:textColorSecondary">@color/textColorSecondary</item>
    	 <item name="android:textColorPrimaryInverse">@color/textColorPrimaryInverse</item>
  	     <item name="android:textColorSecondaryInverse">@color/textColorSecondaryInverse</item>
   		 <!-- some other theme configurations for actionbar, overflow menu etc. -->
   		 ...
    </style>

values/colors.xml

    <!-- brand color: orange -->
    <color name="colorPrimary">#FF9800</color>
    <color name="colorPrimaryDark">#F57C00</color>
    <color name="colorPrimaryLight">#FFE0B2</color>
    <!-- accent color: red -->
    <color name="colorAccent">#FF5252</color>
    <!-- text color: white -->
    <color name="textColorPrimary">#FFFFFF</color>
    <color name="textColorSecondary">#9E9E9E</color>
    <!-- inverse text color: 87% black -->
    <color name="textColorPrimaryInverse">#DE000000</color>
    <color name="textColorSecondaryInverse">#9E9E9E</color>

AndroidManifest.xml

    <application android:name=".Application" android:theme="@style/AppTheme">
    ...
    </application>

theme 中涉及的各种属性的含义可以在 Android Developers blog 里面找到解释

贴心小提示

虽然 Android 里面 style 的属性/值非常全面，我们想要实现的效果 style 基本上都包含了有，但是 Android 文档有关这些主题属性的解释特别少，尤其是对 appcompat 的解释。所以我们还是建议你写一个小 Demo 去测试 style 里面的属性/值应该怎么使用、能实现什么样的效果，然后再根据我们的需求去考虑使用哪些属性/值来实现我们想要的效果。

根据 Android 的 Material Design 规范，选项菜单图标的颜色应该和 action bar 上面的文字颜色保持一致，在我这是通过 android:textColorPrimary 来实现的，也就是使用#FFFFFF，基于这样的规范，我们需要为 action bar 提供一套白色的选项菜单图标。

贴心小提示

Google 有在 material-design-icons - Github 上提供一些开源的 Material Design 图标哦。

menu/my_menu.xml

    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    	<item android:id="@id/menu_comment"
    android:icon="@drawable/ic_mode_comment_white_24dp" />
    	<item android:id="@id/menu_story"
    android:icon="@drawable/ic_subject_white_24dp" />
    	<item android:id="@id/menu_share"
    app:actionProviderClass="android.support.v7.widget.ShareActionProvider" />
    </menu>

为了使颜色一致，并且能让我们的 Views 和 Texts 能够在多个主题下被使用，最好的解决办法就是把颜色变成资源的引用，例如： android:textColor="@color/textColorPrimary ​又或者是通过设置 style 来改变，例如：在 textEmptyStyle.xml ​ 文件下，我们只使用被选中的颜色

values/styles.xml

    <style name="textEmptyStyle">
   		 <item name="android:textColor">@color/textColorSecondary</item>
   		 <item name="android:textSize">@dimen/abc_text_size_headline_material</item>
    ...
    </style>

我相信通过今天在上面所介绍的这些内容已经足够让我们实现一个符合 Material Design 的明亮风格的主题了，下一篇博文我将会给大家介绍如何实现一个符合 Material Design 的灰暗风格的主题，以及如何在运行 App 的过程中切换主题。