Material Design系列之配色设置

我们先来看一张图，我从Using Material Theme上面download下来的：

  一目了然，每个属性什么意思应该不用我再多加解释了吧。下面我来看看怎么配置这些属性，工程的配置以及ToolBar的配置跟上一篇博客一样，不清楚的可以参考ToolBar即将取代ActionBar，第一步你需要在res目录下新建values-v21文件夹，因为某些属性在Lollipop上要单独适配，具体配置如下：

values/themes.xml

 1 <resources> 2   <!-- Base application theme. --> 3   <style name="AppTheme.Base" parent="Theme.AppCompat"> 4     <!-- Customize your theme here. --> 5     <item name="windowActionBar">false</item> 6     <item name="android:windowNoTitle">true</item> 7     <!-- Material Design setup--> 8     <item name="colorPrimary">@color/theme_color_primary</item> 9     <item name="colorPrimaryDark">@color/theme_color_primary_dark</item>10     <item name="android:textColorPrimary">@color/theme_text_color_primary</item>11     <item name="android:windowBackground">@color/white</item>12   </style>13 14   <style name="AppTheme" parent="AppTheme.Base">15   </style>16 </resources>

values-v21/themes.xml

1 <resources>2   <style name="AppTheme" parent="AppTheme.Base">3     <item name="android:navigationBarColor">@color/theme_color_primary</item>4   </style>5 </resources>

  细心的朋友应该能发现，为什么有的属性有android前缀，有的没有，那是因为colorPrimary和colorPrimaryDark是Material Design才添加的属性，为了适配较低版本的系统只能在AppCompat下这样使用。虽然colorPrimaryDark可以在默认themes中配置，但是即使设置了也没有效果，另外navigationBarColor只能在Lollipop上才能修改，低版本没有这样的权限。为了看到效果的对比，我准备了两个模拟器，下面的贴图从上往下顺序均为Nexus4 4.1.1和Nexus4 5.1.0：

  从上图效果对比来看，Lollipop的整体效果要好很多，这里顺便给大家推荐一个Material Design的调色盘网站，大家在写Demo练习的时候可以在上面找颜色参考一下，再也不用为了选一个颜色纠结了。

  下面我们继续介绍一些View控件的配色，以Button，EditText，CheckBox和SwitchCompat(PS:虽说现在项目的minSdkVersion都是14+了，完全可以直接用系统的Switch控件，但是想要在4.x版本使用Material Design风格的Switch控件还得靠AppCompat-V7中的SwitchCompat)为例，我们先看一下效果图，系统顺序不变：

  layout的配置我就不贴了，只是单纯的id，width和height之类的最基本的配置，下面我们来看看theme的配置：

 1 <resources> 2   <!-- Base application theme. --> 3   <style name="AppTheme.Base" parent="Theme.AppCompat"> 4     <!-- Other setup ...... --> 5     <!-- Color control setup--> 6     <item name="colorControlNormal">@color/theme_color_control_normal</item> 7     <item name="colorControlHighlight">@color/theme_color_control_highlight</item> 8     <!--<item name="colorControlActivated">@color/theme_color_control_activated</item>--> 9     <item name="colorAccent">@color/theme_color_accent</item>10     <item name="colorSwitchThumbNormal">@color/theme_color_control_normal</item>11   </style>12 13   <style name="AppTheme" parent="AppTheme.Base">14     <item name="colorButtonNormal">@color/theme_color_accent</item>15   </style>16 </resources>

values-v21/themes.xml

1 <resources>2   <style name="AppTheme" parent="AppTheme.Base">3     <!-- navigationBar setup ...... -->4     <item name="android:colorButtonNormal">@color/theme_color_accent</item>5   </style>6 </resources>

  这回添加的参数就没那么好理解了，下面来一个个解释：

1. colorButtonNormal：normal状态下Button的背景色

2. colorSwitchThumbNormal：normal状态或者是close状态下的Switch thumb的配色

3. colorControlNormal：control类控件normal状态下的配色，此类控件包括CheckBox，RadioButton，EditText等。注意：ToolBar上默认icon的颜色也受此属性影响（HomeAsUpIndicator，隐藏menu的icon），不信请仔细观察上述效果图

4. colorControlHighlight：control类控件hightlight状态下的配色，相当于pressed状态

5. colorControlActivated：control类控件checked或者selected等选中状态下的配色

6. colorAccent：colorControlActivated的默认值，没有配置colorControlActivated情况下生效

  可能有朋友会有疑问，为什么在values-v21下还要配一次android:colorButtonNormal，在默认values下不是已经配过colorButtonNormal了嘛？我也不知道为什么，调试的时候发现，如果values-v21下不配置的话，就是没有效果，所以还得加上。

  最后还要给大家介绍一下drwodown menu的配色定制，也就是menu文件中showAsAction为never的items的呈现。为了满足这一需求，需要自定义popuptheme：

1 <style name="MyPopupTheme" parent="Base.ThemeOverlay.AppCompat.Light">2   <item name="android:textColor">@color/white</item>3   <item name="android:colorBackground">@color/theme_color_primary</item>4 </style>

然后在layout文件中给ToolBar配上即可：

1 <android.support.v7.widget.Toolbar2   android:id="@+id/toolbar"3   android:layout_width="match_parent"4   android:layout_height="wrap_content"5   android:minHeight="?attr/actionBarSize"6   android:background="?attr/colorPrimary"7   app:popupTheme="@style/MyPopupTheme"/>

属性都比较简单就不再啰嗦了，再来一张Lollipop的效果图吧：