Android 5.x Theme 与 ToolBar 实战

684 查看

1、概述

随着Material Design的逐渐的普及，业内也有很多具有分享精神的伙伴翻译了material design specification ，中文翻译地址：Material Design 中文版。So，我们也开始Android 5.x相关的blog，那么首先了解的当然是其主题的风格以及app bar。

当然，5.x普及可能还需要一段时间，所以我们还是尽可能的去使用兼容包支持低版本的设备。

ps:本博客使用：

compileSdkVersion 22

buildToolsVersion “22.0.1”

compile ‘com.android.support:appcompat-v7:22.1.1’

忽然发现ActionBarActivity被弃用了，推荐使用AppCompatActivity，相关blog地址：Android Support Library 22.1

2、Material Design的Theme

md的主题有：

@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar

与之对应的Compat Theme:

Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar

（1）个性化 Color Palette

我们可以根据我们的app的风格，去定制Color Palette(调色板)，重点有以下几个属性：

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

</resources>

colorPrimary 对应ActionBar的颜色。
colorPrimaryDark对应状态栏的颜色
colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

与之对应的图：

metarial design的theme允许我们去设置status bar的颜色，如果你项目的最小支持版本为5.0，那么你可以使用android:Theme.Material，设置android:statusBarColor。当然了这种情况目前来说比较少，所以我们多数使用的是Theme.AppCompat，通过设置android:colorPrimaryDark.来设置status bar颜色。（ps：默认情况下，android:statusBarColor的值继承自android:colorPrimaryDark）.

对于5.0以下的设备，目前colorPrimaryDark无法去个性化状态栏的颜色；底部的navagationBar可能也不一样，更别说设置颜色了。

下面写个简单的Demo去测试下。

（2）测试效果

values/styles.xml

</style>

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

</resources>

values-v21/styles.xml

<item name="android:statusBarColor">@color/material_blue_700</item>

</style>

</resources>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>

</resources>

可以看到：colorAccent也就是图中的粉色，EditText正在输入时，RadioButton选中时的颜色。ps:5.0以下设备，状态栏颜色不会变化。

3、ToolBar的使用

众所周知，在使用ActionBar的时候，一堆的问题：这个文字能不能定制，位置能不能改变，图标的间距怎么控制神马的，由此暴露出了ActionBar设计的不灵活。为此官方提供了ToolBar，并且提供了supprot library用于向下兼容。Toolbar之所以灵活，是因为它其实就是一个ViewGroup，我们在使用的时候和普通的组件一样，在布局文件中声明。

（1）ToolBar的引入

既然准备用ToolBar，首先看看如何将其引入到app中。

1）隐藏原本的ActionBar

隐藏可以通过修改我们继承的主题为：Theme.AppCompat.Light.NoActionBar，当然也可以通过设置以下属性完成：

1 2	<item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item>

我们这里选择前者：

<item name="colorPrimary">@color/material_blue_500</item>

<item name="colorPrimaryDark">@color/material_blue_700</item>

<item name="colorAccent">@color/material_green_A200</item>

</style>

2）在布局文件中声明

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

android:layout_height="wrap_content"

android:layout_width="match_parent" />

<android.support.v7.widget.GridLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

app:useDefaultMargins="true"

app:columnCount="3">

<TextView

android:text="First Name:"

app:layout_gravity="right" />

<EditText

android:ems="10"

app:layout_columnSpan="2" />

<TextView

android:text="Last Name:"

app:layout_column="0"

app:layout_gravity="right" />

<EditText

android:ems="10"

app:layout_columnSpan="2" />

<TextView

android:text="Visit Type:"

app:layout_column="0"

app:layout_gravity="right" />

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Business" />

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Social" />

</RadioGroup>

<Button

android:text="Ok"

app:layout_column="1" />

<Button

android:text="Cancel"

app:layout_column="2" />

</android.support.v7.widget.GridLayout>

</LinearLayout>

ok，这里我们也贴出来上面图片的效果的xml，使用GridLayout实现的，有兴趣的可以研究下。可以看到我们在布局文件中定义了ToolBar。