Android5.0之Toobar的使用

標籤：

總體上來說，Toolbar的使用可以分為兩個方面，一方面是將ToolBar當作ActionBar來用，另一方面就是將Toolbar當成一個單獨的控制項來用，不過到目前為止我見到的大部分情況都是把Toolbar當作ActionBar來用，下面我們分別就這兩種使用方式來進行說明。

1.Toolbar作為ActionBar使用

將Toolbar當作ActionBar使用首先要隱藏系統預設的ActionBar，隱藏方式其實很簡單，只需要簡單設定一下style就可以了，如下了：

    <style name="AppTheme.NoActionBar">        <item name="android:windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>

Android手機在3.0之前標題列叫做titlebar，3.0之後又推出了ActionBar來代替titlebar，所以我們在使用的Toolbar的時候為了相容早期的手機也要把titlebar隱藏掉。這兩個東東都隱藏之後，在資訊清單檔中給Activity或者App設定一下主題就可以了，我這裡給Activity設定主題，如下：

        <activity android:name=".MainActivity" android:theme="@style/AppTheme.NoActionBar">            <intent-filter>                <action android:name="android.intent.action.MAIN"/>                <category android:name="android.intent.category.LAUNCHER"/>            </intent-filter>        </activity>

如此，我的MainActivity就成功的隱藏掉了ActionBar了，接下來就是怎麼添加Toolbar了，我們知道在企業開發中ActionBar使用並不多，一個重要的原因就是這個東西太死板了，而且太醜了，那麼Google推出Toolbar必然就要避免這些問題，so，Toolbar除了好看另一個最大的優點就是靈活，你完全可以把它當作一個普普通通的控制項來使用，普通控制項怎麼使用呢？先在布局檔案中寫唄，同時，我們為了相容Android5.0之前的手機，在使用Toolbar的時候都是使用v7包裡的Toolbar，布局檔案如下：

<?xml version="1.0" encoding="utf-8"?><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"    tools:context="org.mobiletrain.toolbar2.MainActivity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="@color/colorPrimary"        android:popupTheme="@style/AppTheme.PopupOverlay">    </android.support.v7.widget.Toolbar></LinearLayout>

OK，是不是很簡單呢？一個簡單的布局檔案就搞定了，那麼這裡有三個地方需要給大家解釋一下，首先是toolbar的高，你可以給一個固定值，也可以參考之前ActionBar的高度，參考ActionBar高度的好處是系統會在不同的裝置上自動為你調整Toolbar的高度。第二點就是background屬性，使用toolbar時我們可以給toolbar設定一個背景顏色。第三就是popupTheme屬性，就是彈出框的顯示，這裡我們一般按如下的方式來設定：

<style name="AppTheme.PopupOverlay" parent="Theme.AppCompat.Light">

OK，布局檔案搞定之後，下來我們就來看看在MainActivity中該怎麼處理：

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.setTitle("主標題");        toolbar.setSubtitle("二級標題");        //設定應用Logo        toolbar.setLogo(R.drawable.a5k);        //設定互動中心圖示        toolbar.setNavigationIcon(R.drawable.ic_menu_back);        //用ToolBar代替ActionBar        setSupportActionBar(toolbar);

在布局檔案中我們還是像處理普通控制項一樣，先是獲得到這個Toolbar，然後給toolbar設定各種屬性，至於這些屬性具體指什麼大家看下面一張圖就明白了（a5k是中的圖片，ic_menu_back是一個向前的箭頭）：

可是這個導航箭頭太醜了，其實這裡我們用系統預設的箭頭就可以了，設定方式如下：

        //設定互動中心圖示//        toolbar.setNavigationIcon(R.drawable.ic_menu_back);        //用ToolBar代替ActionBar        setSupportActionBar(toolbar);        //顯示導覽按鈕並使之處於可點擊狀態        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

大家注意這裡要注釋掉之前設定互動中心圖示的代碼，同時getSupportActionBar().setDisplayHomeAsUpEnabled(true);要放在setSupportActionBar(toolbar);這個之後執行，因為真正的ActionBar已經被我們隱藏了，在用toolbar代替actionbar之前如果調用getSupportActionBar()會無法擷取ActionBar。這樣做之後，顯示效果如下：

這個預設的後退按鈕比起ActionBar中的後退按鈕漂亮多了吧。如果你用過ActionBar裡邊的後退按鈕你就會知道它有多醜。

OK，接下來，如果我想要在Toolbar上顯示功能表項目該怎麼辦呢？以前ActionBar的時候你怎麼辦現在還怎麼辦！

先寫菜單檔案，如下：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/setting"        android:icon="@drawable/a5k"        android:orderInCategory="99"        android:title="setting"        app:showAsAction="never"/>    <item        android:id="@+id/search"        android:title="search"        app:actionViewClass="android.support.v7.widget.SearchView"        app:showAsAction="always"/>    <item        android:id="@+id/share"        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"        app:showAsAction="never"        android:title="share"></item></menu>

大家注意這裡有兩個地方和以前不一樣，一個就是showAsAction的命名空間變為了自訂的app，還有就是actionViewClass和actionProviderClass的命名空間也變為app。OK，菜單檔案寫完之後，在Activity中建立菜單即可，如下：

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

和以前建立菜單的方式一模一樣，我們再來看看顯示效果：

貌似沒有什麼難度，然後菜單事件的處理依然在onOptionsItemSelected方法中，如下：

    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                Log.d("lenve", "onOptionsItemSelected() returned: " + 456);                break;        }        return super.onOptionsItemSelected(item);    }

2.單獨使用Toolbar

你既可以把Toolbar當作ActionBar來用，也可以當作普通控制項來用，雖然這種用法比較少見。當作普通控制項來用的話，那我就沒有必要隱藏ActionBar了（不給新的Activity在資訊清單檔中設定我們在文章開頭建立的AppTheme.NoActionBar主題即可）。那我依然是先在布局檔案中來寫一個Toolbar，不同的是，這次我把它放在螢幕的正中央，代碼如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    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"    tools:context="org.mobiletrain.toolbar2.Main2Activity">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:layout_centerInParent="true"        android:background="@color/colorPrimary"        android:popupTheme="@style/AppTheme.PopupOverlay">    </android.support.v7.widget.Toolbar></RelativeLayout>

顯示效果如下：

OK，Toolbar已經顯示在螢幕正中央了，但是既然把它當作一個普通控制項來使用，我們在怎麼向Toolbar中添加功能表項目呢？如下，需要Toolbar自己載入：

    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main2);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.inflateMenu(R.menu.main);    }

顯示效果如下：

OK，接下來一個問題是怎麼給這些控制項設定點擊事件呢，如下：

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                switch (item.getItemId()) {                    case R.id.search:                        Log.d("lenve", "onMenuItemClick() returned: search");                        break;                    case R.id.setting:                        Log.d("lenve", "onMenuItemClick() returned: setting");                        break;                    case R.id.share:                        Log.d("lenve", "onMenuItemClick() returned: share");                        break;                }                return true;            }        });

OK，基本Toolbar的使用就是這樣的。

Android5.0之Toobar的使用