Android開發之Toolbar簡單例子

不像actionbar那麼固定，Toolbar更像是一般的View元素，可以被放置在view樹體系的任意位置，可以應用動畫，可以跟著scrollView滾動，可以與布局中的其他view互動。當然，你還可以用Toolbar替換掉actionbar，只需調用 Activity.setActionBar()。

雖然toolbar已經出來很長時間，但還是有些必要再進行簡單介紹，

先上布局

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
 
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/AppTheme.AppBarOverlay"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"
            android:layout_marginLeft="15dp"
            android:background="@mipmap/icon_index_search" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="搜尋"
            android:textColor="#956C28"
            android:textSize="16sp" />
 
 
 
        </android.support.v7.widget.Toolbar>
 
</android.support.design.widget.AppBarLayout>
螢幕快照 2016-04-22 16.38.12

上面的布局呈現的是這種效果，可以在裡面進行自訂，也可以通過menu進行控制項的編寫，如果需要在滑動的時候隱藏toolbar就需要在外麵包裹一層APPBarLayout

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_location"
        android:orderInCategory="0"
        android:title="定位"
        android:icon="@mipmap/icon_index_location"
        app:showAsAction="ifRoom" />
 
 
</menu>
在這裡可以指定toolbar顯示哪些控制項，app:showAsAction的屬性可以指定該表徵圖是顯示在toolbar上還是顯示在菜單裡，大家可以自行測試，

下面進入核心代碼部分，

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.mipmap.icon_index_menu);
setSupportActionBar(toolbar);

可以通過toolbar對象來設定我們需要的結果，例如icon，標題，副標題等等，

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
 
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_location) {
 
        return true;
    }
 
    return super.onOptionsItemSelected(item);
}
重寫上述兩個方法進行toolbar上的功能表按鈕載入，然後設定監聽，到此就結束了。下面說一下需要注意的地方，在布局檔案中也可以設定icon、title等,但是需要加入自訂屬性的命名空間

<pre class="hljs xml"><code class="xml">xmlns:toolbar="http://schemas.android.com/apk/res-auto"</code>

然後通過toolbar:title=””來設定各種屬性。