Material Design學習筆記之Toolbar+DrawerLayout

1.概述

Android 3.0 Android 推了 ActionBar 這個控件。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 裏的 AppCompat。而ActionBar 已經在 Android 5.x(API Level 21) 之後被改爲由 Toolbar 來取代1。

2.實現

2.1 平臺配置

• Android Studio 1.4
• compileSdkVersion 23
• buildToolsVersion “23.0.1”
• build:gradle:1.3.0

首先需要添加appcompat-v7支持。如果是在Android Studio 1.0 以上創建的項目，默認已經添加了appcompat-v7支持了，如果不是最新版AS則需要在build.gradle中添加如下代碼：

dependencies {

    ...//其他代碼

    compile 'com.android.support:appcompat-v7:21.0.2'

}

2.2 風格(style)

res/values/styles.xml

<resources>

    <!-- Activity themes -->

    <style name="AppTheme" parent="Theme.Base" />

    <style name="Theme.Base" parent="Theme.AppCompat.Light.NoActionBar" >
        <item name="android:colorPrimary">@color/color_primary</item>
        <item name="android:colorPrimaryDark">@color/color_primaryDark</item>
        <item name="android:colorAccent">@color/color_accent</item>
        <item name="android:navigationBarColor">@color/color_primary</item>
    </style>


</resources>

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFFFFF</color>
    <color name="color_primary">#F44336</color>
    <color name="color_primaryDark">#D32F2F</color>
    <color name="color_accent">#2196F3</color>
</resources>

res/menu/main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >

    <item
        android:id="@+id/ab_search"
        android:orderInCategory="80"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="action_settings"
        app:showAsAction="never"/>

</menu>

2.3 佈局(Layout)

2.3.1 toolbar.xml

由於Toolbar是繼承自View，所以可以像其他標準控件一樣直接主佈局文件添加Toolbar。爲了提高Toolbar的重用效率，可以在layout創建一個toolbar.xml代碼如下：

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

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

2.4 程序(Java)

MainActivity.java

public class MainActivity extends ActionBarActivity {

    private Toolbar mToolbar;

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

    private void initViews() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setNavigationIcon(R.drawable.a1);
        mToolbar.setLogo(R.drawable.logo);
        mToolbar.setTitle("My Title");// 標題的文字需在setSupportActionBar之前，不然會無效
        mToolbar.setSubtitle("Sub Title");
        mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
        setSupportActionBar(mToolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
}

3. 效果

這樣，一個最簡單的Toolbar便完成了，如下圖。但Toolbar的功能遠不止於此，它具有豐富的可定製性。

---

4. Toolbar配合DrawerLayout使用

4.1 添加drawerlayout.xml

和Toolbar類似，爲了提高代碼利用率，可以在res/layout中創建一個drawerlayout.xml代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!--內容界面-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/content"
            android:orientation="vertical" >
        </LinearLayout>

        <!--側滑菜單內容-->

        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/darker_gray"
            android:orientation="vertical"
            android:padding="8dp" >

        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>

修改activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar"></include>

    <include layout="@layout/drawerlayout"></include>
</LinearLayout>

修改MainActivity.java

public class MainActivity extends ActionBarActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar mToolbar;

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

    private void initViews() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setNavigationIcon(R.drawable.a1);
        mToolbar.setLogo(R.drawable.logo);
        mToolbar.setTitle("My Title");// 標題的文字需在setSupportActionBar之前，不然會無效
        mToolbar.setSubtitle("Sub Title");
        mToolbar.setTitleTextColor(getResources().getColor(R.color.white));
        setSupportActionBar(mToolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
                R.string.drawer_close);
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
}

源碼下載

---

1. ToolBar詳解（手把手教程）。 ↩