android5.0+(Toolbar)

Toolbar

Toolbar是什麼？大概說一下它的官方介紹。Toolbar是應用的內容的標準工具欄，能夠說是Actionbar的升級版，二者不是獨立關係，要使用Toolbar仍是得跟ActionBar扯上關係的。相比Actionbar Toolbar最明顯的一點就是變得很自由，可隨處放置，由於它是做爲一個ViewGroup來定義使用的，因此單純使用ActionBar已經稍顯過期了，它的一些方法已被標註過期。

那麼它怎麼使用呢，首先咱們同樣要用到v7的支持包，而後定義程序的主題樣式，在style裏得先把Actionbar去掉，有點像欲想練功，必先自宮的感受啊。以下：

/res/values/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- toolbar（actionbar）顏色 -->
        <item name="colorPrimary">#4876FF</item>
        <!-- 狀態欄顏色 -->
        <item name="colorPrimaryDark">#3A5FCD</item>
        <!-- 窗口的背景顏色 -->
        <item name="android:windowBackground">@android:color/white</item>
        <!-- SearchView -->
        <item name="searchViewStyle">@style/MySearchViewStyle</item>
    </style>
    <style name="AppTheme" parent="@style/AppBaseTheme"></style>
    <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
        <!--
    Background for the search query section (e.g. EditText)
    <item name="queryBackground">...</item>
    Background for the actions section (e.g. voice, submit)
    <item name="submitBackground">...</item>
    Close button icon
    <item name="closeIcon">...</item>
    Search button icon
    <item name="searchIcon">...</item>
    Go/commit button icon
    <item name="goIcon">...</item>
    Voice search button icon
    <item name="voiceIcon">...</item>
    Commit icon shown in the query suggestion row
    <item name="commitIcon">...</item>
    Layout for query suggestion rows
    <item name="suggestionRowLayout">...</item>
        -->
    </style>
</resources>

去除Actionbar最簡單的方法就是直接繼承NoActionBar的主題了。顏色的屬性說明，仍是下面這張圖最清楚了：

另外，SearchView在AppCompat中提供了更強的可定製性和更多的樣式可供設置，不過通常咱們用默認的就行。

還有咱們能夠在values-v21給API21的系統版本設置默認的底部導航欄默認的顏色：

/res/values-v21/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="AppTheme" parent="@style/AppBaseTheme">
        <!-- 底部導航欄顏色 -->
        <item name="android:navigationBarColor">#4876FF</item>
    </style>
</resources>

設置好主題的下一步工做：
在xml的layout中定義一個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/com.example.toolbar"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >
</android.support.v7.widget.Toolbar>

咱們把toolbar做爲一個獨立的佈局xml，方便在其餘佈局裏include進去。能夠看到咱們在這裏是能夠設置Toolbar的屬性的，初上面的外還有如下的屬性，都是見名知意的就不一一說明了。

而後在activity的佈局裏把它include進去就好了，固然通常把它放到最上面了，有須要你是能夠把它放到中間、底部或其它位置的，可見它的自由度是很高的。在下一步呢就到代碼了，在onCreate中：

mToolbar = (Toolbar) findViewById(R.id.toolbar);
// toolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setTitle("Rocko");// 標題的文字需在setSupportActionBar以前，否則會無效
// toolbar.setSubtitle("副標題");
setSupportActionBar(mToolbar);
/* 這些經過ActionBar來設置也是同樣的，注意要在setSupportActionBar(toolbar);以後，否則就報錯了 */
// getSupportActionBar().setTitle("標題");
// getSupportActionBar().setSubtitle("副標題");
// getSupportActionBar().setLogo(R.drawable.ic_launcher);
/* 菜單的監聽能夠在toolbar裏設置，也能夠像ActionBar那樣，經過Activity的onOptionsItemSelected回調方法來處理 */
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(MainActivity.this, "action_settings", 0).show();
break;
case R.id.action_share:
Toast.makeText(MainActivity.this, "action_share", 0).show();
break;
default:
break;
}
return true;
}
});

上面關鍵的一點就是setSupportActionBar(mToolbar);把Toolbar當作ActionBar給設置了。menu仍是能夠像ActionBar同樣用和處理的：

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>

這一步時候程序的樣子：
   PS.  Genymotion能夠用5.0的模擬器了

能夠感受到這樣是否是和ActionBar沒什麼區別呢。誒，左邊的菜單圖標怎麼出來的呢，其實上面還沒處理到，他就是Navigation drawer了，使用新版本的v四、v7庫的drawer明顯的一點是它帶了一個酷酷的交互動畫（請看最後的gif圖）。那麼使用Toolbar以後又怎麼去在Toolbar中使用drawer呢。下面固然也是跟着代碼來.

/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="com.example.toolbar.MainActivity" >
    <include layout="@layout/toolbar" />
    <android.support.v4.widget.DrawerLayout
        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:orientation="vertical" >
            <com.example.toolbar.widget.PagerSlidingTabStrip
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dip" >
            </com.example.toolbar.widget.PagerSlidingTabStrip>
            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </android.support.v4.view.ViewPager>
        </LinearLayout>
        <!-- 側滑菜單內容 -->
        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@drawable/drawer"
            android:orientation="vertical"
            android:padding="8dp" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Pager的東西能夠先忽略，後面會說到。側滑菜單的內容爲簡單起見直接先用圖片來演示了。能夠看到佈局的設置大同小異，不一樣點在代碼中：

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);

先把圖標設置顯示出來，而後把ActionBarDrawerToggle做爲DrawerLayout的監聽器設置進去，仍是比較簡單的，效果：

要是須要把drawer覆蓋toolbar怎麼辦呢？須要稍微調整一下界面的佈局位置就好了，效果就不貼上來了(腦補，或者改下源碼的setContentView運行)：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.toolbar.MainActivity" >
        <include layout="@layout/toolbar" />
        <!-- 內容界面 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/content"
            android:orientation="vertical" >
            <com.example.toolbar.widget.PagerSlidingTabStrip
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:visibility="invisible" >
            </com.example.toolbar.widget.PagerSlidingTabStrip>
            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="invisible" >
            </android.support.v4.view.ViewPager>
        </LinearLayout>
    </LinearLayout>
    <!-- 側滑菜單內容 -->
    <LinearLayout
        android:id="@+id/drawer_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/drawer"
        android:orientation="vertical"
        android:clickable="true"
        android:padding="8dp" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

Demo源碼下載地址：http://download.csdn.net/detail/bbld_/8191251

依賴庫android-support-v7-appcompat.rar with Palette ： http://download.csdn.net/detail/bbld_/8382913