前言
從 Android 3.0 開(kāi)始浴滴，推出了 ActionBar。但是岁钓，隨著版本的升級(jí)升略，ActionBar 的行為也發(fā)生了變化。從 5.0 開(kāi)始屡限，ActionBar 提供了 Material Design 的體驗(yàn)品嚣。但是想要 5.0 之前的系統(tǒng)也支持 Material Design 怎么辦呢？那么就用 Toolbar 吧钧大！Toolbar 在 Support Library 中翰撑，所有對(duì)應(yīng)的系統(tǒng)版本都能有 Material Design 的體驗(yàn)。
Toolbar 的簡(jiǎn)單使用
首先添加 v7 appcompat 庫(kù)
compile 'com.android.support:appcompat-v7:25.4.0'
為了能夠用 Toolbar啊央，我們需要隱藏原來(lái)的 ActionBar眶诈。
通過(guò)設(shè)置主題來(lái)隱藏
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
或者也可以添加屬性來(lái)隱藏
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
下面介紹 Toolbar 的幾個(gè)屬性
先來(lái)看看布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:logo="@drawable/ic_android_white"
app:navigationIcon="@drawable/ic_menu_white"
app:subtitle="subtitle"
app:subtitleTextAppearance="@style/MySubTitleStyle"
app:subtitleTextColor="@android:color/white"
app:title="Toolbar"
app:titleMarginStart="30dp"
app:titleTextAppearance="@style/MyTitleStyle"
app:titleTextColor="@android:color/white" />
</LinearLayout>
app:navigationIcon：設(shè)置 NavigationIcon，位于 Toolbar 的最左邊
app:logo：設(shè)置 Logo瓜饥，位于 NavigationIcon 的右邊逝撬，Title 的左邊
app:title：設(shè)置標(biāo)題
app:titleTextColor：設(shè)置標(biāo)題顏色
app:titleTextAppearance：設(shè)置標(biāo)題樣式（字體大小，字體顏色乓土，等等）
app:titleMarginStart：設(shè)置標(biāo)題左邊的 Margin宪潮，類(lèi)似的還有
app:titleMargin溯警、app:titleMarginTop、app:titleMarginBottom狡相、app:titleMarginEnd
app:subtitle：設(shè)置副標(biāo)題
app:subtitleTextColor：設(shè)置副標(biāo)題顏色
app:subtitleTextAppearance：設(shè)置副標(biāo)題樣式（字體大小梯轻，字體顏色，等等）
MyTitleStyle 和 MySubTitleStyle 如下
<style name="MyTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>
<style name="MySubTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">10sp</item>
</style>
Activity 中的代碼如下
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
}
}
運(yùn)行效果如下
添加 Navigation Icon 的點(diǎn)擊事件
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Navigation Icon Clicked!", Toast.LENGTH_SHORT).show();
}
});
Toolbar 添加 Action Menu
Toolbar 和 ActionBar 一樣尽棕，也可以添加 Action Menu喳挑。
覆寫(xiě) onCreateOptionsMenu 添加 Menu，覆寫(xiě) onOptionsItemSelected 添加點(diǎn)擊事件滔悉。
代碼如下
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
return super.onOptionsItemSelected(item);
}
my_menu.xml 如下伊诵，定義在 res/menu 下
<?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/menu_item1"
android:icon="@drawable/ic_add"
android:title="添加"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item2"
android:icon="@drawable/ic_edit"
android:title="編輯"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item3"
android:icon="@drawable/ic_delete"
android:title="刪除"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item4"
android:icon="@drawable/ic_setting"
android:title="設(shè)置"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item5"
android:icon="@drawable/ic_zoom_in"
android:title="放大"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item6"
android:icon="@drawable/ic_zoom_out"
android:title="縮小"
app:showAsAction="ifRoom" />
</menu>
app:showAsAction="ifRoom" 表示如果空間足夠，就顯示在 Toolbar 上氧敢，如果空間不夠日戈，Toolbar 最右邊就會(huì)顯示三個(gè)點(diǎn)的圖標(biāo)询张，這個(gè)三個(gè)點(diǎn)的圖標(biāo)叫做 Overflow Icon孙乖，溢出按鈕，然后點(diǎn)擊該圖標(biāo)會(huì)出來(lái)一個(gè) Overflow Menu份氧，溢出菜單唯袄，顯示不下的 Item 都會(huì)顯示到這個(gè) Overflow Menu 中。
空間足夠的顯示 Icon 在 Toolbar 上蜗帜×悼剑空間不夠的顯示文字在 Overflow Menu 中。
長(zhǎng)按 Icon 會(huì)以 Toast 的方式把 Title 顯示出來(lái)厅缺，這個(gè) Toast 會(huì)直接顯示在對(duì)應(yīng) Icon 的下方蔬顾。
顯示效果如下
點(diǎn)擊 Overflow Icon 之后顯示的 Overflow Menu 的效果如下
長(zhǎng)按之后顯示的 Toast 如下
Overflow Icon 的顏色可以修改，下面把它修改為白色
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColorSecondary">#ffffff</item>
</style>
Overflow Menu 的樣式也可以修改
<style name="MyPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">12sp</item>
<item name="android:colorBackground">@android:color/black</item>
<item name="overlapAnchor">false</item>
</style>
app:popupTheme="@style/MyPopupTheme"
overlapAnchor 的作用是讓彈出來(lái)的 Overflow Menu 不蓋住 Toolbar湘捎。
效果如下
Overflow Icon 的圖標(biāo)也可以修改
toolbar.setOverflowIcon();
Toolbar 添加 Custom View
Toolbar 其實(shí)是一個(gè) ViewGroup诀豁，也可以自己添加 View 來(lái)達(dá)到想要的效果。
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom View"
android:textColor="@android:color/white" />
</android.support.v7.widget.Toolbar>
運(yùn)行效果如下
發(fā)現(xiàn)有默認(rèn)的 Title 顯示出來(lái)了窥妇，設(shè)置不顯示即可
getSupportActionBar().setDisplayShowTitleEnabled(false);
效果如下
