1.簡介
-
簡單點可以理解為替代原來的ActionBar就行了
Paste_Image.png
一個Toolbar從左到右包括了一個navigation button、一個logo、一個title和subtitle、一個或多個自定義的View和一個action menu這五部分。只有設(shè)置相應(yīng)的內(nèi)容才行,否則不會顯示。
Paste_Image.png
2.Toolbar的使用
注意:開頭是自定義命名空間xmlns:toolbar="http://schemas.android.com/apk/res-auto
- toolbar:navigationIcon 設(shè)置navigation button的圖標(biāo)
- toolbar:logo 設(shè)置logo
- toolbar:title 設(shè)置標(biāo)題
- toolbar:titleTextColor 設(shè)置標(biāo)題文字顏色
- toolbar:subtitle 設(shè)置副標(biāo)題
- toolbar subtitleTextColor 設(shè)置副標(biāo)題文字顏色
- toolbar:popupTheme 應(yīng)用一個主題用來控制toolbar的ui彈窗
- toolbar:title TextAppearance 設(shè)置title text 相關(guān)屬性,如:字體,顏色,大小等等
- toolbar:subtitle TextAppearance
- toolbar:logoDescription logo描述
- anderoid:background toolbar背景
- android:theme 主題
//設(shè)置NavigationIcon
toolbar.setNavigationIcon(R.drawable.ic_book_list);
// 設(shè)置navigation button 點擊事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
// 設(shè)置 toolbar 背景色
toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
// 設(shè)置 Title
toolbar.setTitle(R.string.toolbar_title);
// 設(shè)置Toolbar title文字顏色
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
// 設(shè)置Toolbar subTitle
toolbar.setSubtitle(R.string.sub_title);
toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
// 設(shè)置logo
toolbar.setLogo(R.mipmap.ic_launcher);
// 設(shè)置 NavigationIcon 點擊事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//設(shè)置 Toolbar menu
toolbar.inflateMenu(R.menu.setting_menu);
// 設(shè)置溢出菜單的圖標(biāo)
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
// 設(shè)置menu item 點擊事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//點擊設(shè)置
break;
}
return false;
}
});
如何為一個Activity添加一個ToolBar
1.gradle中添加V7 appCompat
2.確保Activity集成AppCompatActivity
3.在功能清單文件中設(shè)置(也可以在activity的節(jié)點下設(shè)置)
<application android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
4.添加
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:navigationIcon="@drawable/ic_book_list"
toolbar:title="@string/toolbar_title"
toolbar:titleTextColor="@color/white"
toolbar:theme="@style/ToolbarTheme"
toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
5.Actiavity中對toolbar做相關(guān)操作
private void initToolbar(){
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar_2);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//添加溢出菜單
toolbar.inflateMenu(R.menu.setting_menu);
// 添加菜單點擊事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//點擊設(shè)置菜單
break;
}
return false;
}
});
}
溢出菜單如下
<?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/item_collect"
android:icon="@drawable/ic_favorite_more"
android:title="收藏"
app:showAsAction="ifRoom"
/>
<item android:id="@+id/item_setting"
android:title="設(shè)置選項"
app:showAsAction="never"
/>
<item android:id="@+id/item_model"
android:title="夜間模式"
app:showAsAction="never"
/>
</menu>
app:showAsAction屬性值介紹
- ifRoom:有顯示空間就顯示,沒有就在溢出菜單中顯示
- never:總是在溢出菜單中
- always:總是顯示在ToolBar上。
3.特殊需求
- 修改溢出菜單文字的大小和顏色
<style name="ToolbarTheme" parent="Theme.AppCompat.Light">
<!-- 設(shè)置 toolbar 溢出菜單的文字的顏色 -->
<item name="android:textColor">@android:color/holo_red_dark</item>
<!-- 設(shè)置toolbar 溢出菜單的字體大小-->
<item name="android:textSize">25sp</item>
<!-- 設(shè)置 顯示在toobar上菜單文字的顏色 -->
<item name="actionMenuTextColor">@android:color/white</item>
</style>
<style name="OverFlowIcon" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">@drawable/abc_ic_menu_moreoverflow_mtrl_alpha</item>
</style>
- Toolbar設(shè)置自定義View
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:visibility="gone"
toolbar:navigationIcon="@mipmap/navigation_back_white"
toolbar:theme="@style/ToolbarTheme"
>
<!-- ToolBar 中添加一個 編輯框 -->
<EditText
android:id="@+id/edit_search"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.Toolbar>
在代碼中得到控件
private void initToolbar(){
mToolbar3 = (Toolbar) findViewById(R.id.tool_bar_4);
mToolbar3.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
mToolbar3.inflateMenu(R.menu.menu_search);
mToolbar3.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if(item.getItemId() == R.id.item_search){
// do search
}
return false;
}
});
// 獲取ToolBar 上的編輯框
EditText searchEdit = (EditText) mToolbar3.findViewById(R.id.edit_search);
// 獲取內(nèi)容
String content = searchEdit.getText().toString();
}

