Toolbar
Toolbar 是在 Android 5.0 開始推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件欧穴。由于他的可定制度高警医，所以已經(jīng)逐步替代掉了ActionBar诡必≡裢可以自定義以下幾種元素，實(shí)現(xiàn)不同風(fēng)格呃Toolbar:
- 設(shè)置導(dǎo)航欄圖標(biāo)
- 設(shè)置App的logo
- 支持設(shè)置標(biāo)題和子標(biāo)題
- 支持添加一個(gè)或多個(gè)的自定義控件
- 支持Action Menu
Toolbar基礎(chǔ)使用
Toolbar是Android 5.0推出的寸齐，所以為了實(shí)現(xiàn)向下兼容等浊，可以使用兼容包appcompat-v7里的Toolbar。
首先編寫activity_main布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/Theme.Toolbar.base.MenuItem">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clock"/>
</android.support.v7.widget.Toolbar>
</FrameLayout>
編寫Toolbar的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_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/menu_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notification"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/menu_close"
android:title="@string/menu_item1"
app:showAsAction="never"/>
<item
android:id="@+id/menu_about"
android:title="@string/menu_item2"
app:showAsAction="never"/>
</menu>
創(chuàng)建Activity
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//去掉自帶的ActionBar
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvents();
}
private void initEvents() {
//設(shè)置menu監(jiān)聽器
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
int menuItemId = item.getItemId();
switch (menuItemId) {
case R.id.menu_close:
Toast.makeText(MainActivity.this, R.string.menu_item1, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Toast.makeText(MainActivity.this, R.string.menu_item2, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_search:
Toast.makeText(MainActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
break;
case R.id.menu_notification:
Toast.makeText(MainActivity.this, R.string.menu_notification, Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
private void initView() {
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
//設(shè)置導(dǎo)航欄圖標(biāo)
mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
//設(shè)置app logo
mToolbar.setLogo(R.mipmap.ic_launcher);
//設(shè)置主標(biāo)題
mToolbar.setTitle("Title");
//設(shè)置主標(biāo)題文本的字體摹蘑，大小筹燕，顏色等主題屬性
mToolbar.setTitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Title);
//設(shè)置子標(biāo)題
mToolbar.setSubtitle("Subtitle");
//設(shè)置子標(biāo)題文本的字體，大小衅鹿，顏色等主題屬性
mToolbar.setSubtitleTextAppearance(getApplicationContext(), R.style.Theme_Toolbar_Base_Subtitle);
//加載menu布局文件
mToolbar.inflateMenu(R.menu.tool_bar_menu);
}
}
注意:
- 在使用Toolbar之前一定要去掉系統(tǒng)自帶的ActionBar撒踪，可以給Activity使用NoActionBar主題，或者在setContentView()之前調(diào)用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)(或者是requestWindowFeature(Window.FEATURE_NO_TITLE))大渤。
- setTitleTextColor制妄、setTitleTextAppearance、setSubtitleTextColor泵三、setSubtitleTextAppearance可以在代碼中修改相應(yīng)的文本字體大小和顏色耕捞。
注意點(diǎn)
XML屬性
使用appcompat-v7兼容包內(nèi)的Toolbar時(shí)，自身定義的屬性必須使用xmlns:app="http://schemas.android.com/apk/res-auto"該語句指定空間命名來調(diào)用烫幕，例如popupTheme屬性...否則運(yùn)行起來沒有效果俺抽。
設(shè)置Toolbar Menu item文本的字體，顏色和大小
之前改變了主標(biāo)題和子標(biāo)題文本的字體较曼，大小磷斧，顏色樣式。那么怎么修改menu item的呢捷犹。這里就需要Toolbar自定義的屬性:popupTheme來實(shí)現(xiàn)弛饭。通過該屬性可以為彈出的現(xiàn)實(shí)窗口設(shè)置主題。例如在values/styles萍歉，自定義menu item樣式侣颂，
<style name="Theme.Toolbar.base.MenuItem" parent="AppTheme">
<item name="android:textColor">@android:color/black</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">italic</item>
</style>
由于Toolbar繼承自View，所以還有一個(gè)屬性android:theme可以指定整個(gè)View的風(fēng)格枪孩。通常我們通過該屬性來修改默認(rèn)的menu icon横蜒。
<style name="Theme.Toolbar.ZhuHu" parent="AppTheme">
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhuHu</item>
</style>
<style name="ActionButton.Overflow.ZhuHu" parent="Widget.AppCompat.Light.ActionButton">
<item name="android:src">@mipmap/ic_menu_more_overflow</item>
</style>
Menu Resources
在編寫Menu Resources時(shí)，有一個(gè)屬性需要注意下:orderInCategory销凑。該屬性決定menu item排列順序丛晌，值的類型是integer，值越大斗幼，順序越靠后澎蛛。
<item
android:title="@string/menu_item1"
android:id="@+id/id_item_close"
android:orderInCategory="100"
app:showAsAction="never"/>
<item
android:title="@string/menu_item2"
android:id="@+id/id_item_about"
app:showAsAction="never"
android:orderInCategory="99"/>
在彈窗中顯示的順序就是About在Close之前。
參考官方文檔Menu Resource
Material Design
在官方培訓(xùn)文檔有一句話:
The Material Design specification recommends that app bars have an elevation of 4 dp.大致意思是Toolbar應(yīng)該懸浮4dp的高度蜕窿。這個(gè)高度通過android:elevation="4dp"屬性設(shè)置
實(shí)踐效果
Toolbar.png
Menu Item Theme.png
