在Android5.0(API 21)之后，Toolbar被Google推廣，逐漸走入大家視野。具體關(guān)于Actionbar和Toolbar的對比就不多啰嗦了，跟著潮流走是沒錯的。下面先上張簡單的效果圖，這是我近期在構(gòu)思的一個app，幫助我們搜集宣講會、實(shí)習(xí)、工作信息。

Android Toolbar效果圖

1. 初識Material Theme

Material Theme

為了使用Material Design相關(guān)資源，新建工程時需要注意Min SDK需要大于等于API21。我們先來了解一下Material Theme。如上圖所示，可以進(jìn)行設(shè)置的部分有：

• colorPrimary：Toolbar的主體顏色
• colorPrimaryDark：Toolbar上方的背景顏色，一般為深色，會是的app看起來更有層次感
• textColorPrimary：Toolbar的title文字顏色

剩下的參數(shù)也很明了了。這里所有的屬性后面都跟了一個"Primary"是因?yàn)椋琓oolbar不僅可以在xml中出現(xiàn)，還能夠在view中進(jìn)行任意的設(shè)置，而且還可以將其當(dāng)做一個Actionbar來使用~

2. 自定義Theme

在/res/values/文件夾下我們需要新建3個xml文件

• my_theme.xml：用于自定義主題，配置主題中我們所需要的顏色
• default_colors_setting.xml：將顏色建立別名，方便引用和修改
• android_material_design_colors.xml：調(diào)色板，用于存儲一些色彩

關(guān)于android_material_design_colors.xml，我直接下載了google給出的色彩調(diào)色方案，添加到工程中，可以直接引用其中的顏色。下載地址：https://gist.github.com/daniellevass/b0b8cfa773488e138037。另外有一個比較不錯的網(wǎng)站， Material Palette 可以在線預(yù)覽我們的顏色搭配，小伙伴們不妨都去試試，能給設(shè)計(jì)省下不少時間~

/res/values/default_colors_setting.mxl
<?xml version="1.0" encoding="utf-8"?>
<!-- 主要目的是給常用顏色設(shè)置別名，方便引用和更改 -->
<resources>
    <color name="color_primary">@color/md_light_blue_400</color>
    <color name="color_primary_dark">@color/md_light_blue_700</color>
    <color name="color_primary_text">@android:color/white</color>
</resources>

/res/values/my_theme.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat">
        <!-- 移除Actionbar，以下兩句缺一不可 -->
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <!-- Toolbar主體顏色 -->
        <item name="android:colorPrimary">@color/color_primary</item>
        <!-- Toolbar上方的背景顏色,一般比主體顏色深 -->
        <item name="android:colorPrimaryDark">@color/color_primary_dark</item>
        <!-- 其他可以使用的屬性參數(shù):colorAccent, colorControlNormal,
        colorControlActivated, colorControlHighlight, colorSwitchThumbNormal -->
    </style>
</resources>

完成了我們自己的Theme，接下來我們要在app中使用我們的Theme，修改/res/AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
......

此時運(yùn)行程序，便可以看到我們自定義的主題已經(jīng)生效，但此時app的上方還是空空如也，應(yīng)為我們還沒有為其添加Toolbar。

3. 添加Toolbar

首先我們要給Toolbal新建一個布局文件，/res/layout/toolbar.xml。這里使用v7包中的Toolbar。使用gradle的同學(xué)記得添加依賴。compile 'com.android.support:appcompat-v7:23.1.1'

<?xml version="1.0" encoding="utf-8"?>
<android:android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/color_primary"
/>

然后我們在主布局文件中引入toolbar，/res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                tools:context=".MainActivity">
    <include
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        layout="@layout/toolbar"/>

    <TextView
            android:text="@string/hello_world"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
    />
</LinearLayout>

最后，我們在onCreate()中進(jìn)行設(shè)置。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        private Toolbar mToolbar;
        private ActionBar mActionbar;

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        mActionbar = getSupportActionBar();  // 轉(zhuǎn)換為Actionbar操作
        mActionbar.setTitle("愛實(shí)習(xí)  愛工作");  // 設(shè)置toolbar標(biāo)題
        // 設(shè)置toolbar左側(cè)icon，也成為Navigation Icon
        mToolbar.setNavigationIcon(R.mipmap.ic_menu_white_36dp); 
    }

完成以上步驟就可以得到最終的效果圖啦。

這里還想推薦給小伙伴的是github上的一個開源項(xiàng)目：mikepenz/Android-Iconics。這里有許許多多基于Material Design的icon，貌似這是個大神~他的SlideMenu的插件也很好用。希望能給小伙伴省下一些尋找資源的時間，開發(fā)更加順利。

By tjt