ToolBar的出現(xiàn)是為了替換之前的ActionBar的各種不靈活使用方式,相反,ToolBar的使用變得非常靈活,因?yàn)樗梢宰屛覀冏杂赏锩嫣砑幼涌丶?低版本要使用的話,可以添加support-v7包。
一、ToolBar簡單介紹
先看一下Toolbar的類繼承關(guān)系
一個(gè)Toolbar 從左到右包括了 一個(gè)navigation button、一個(gè)logo、一個(gè)title和subtitle、一個(gè)或多個(gè)自定義的View和一個(gè) action menu 這5部分。也就是這個(gè)ViewGroup 容器里面包含了這五部分內(nèi)容,對(duì)應(yīng)著一個(gè)界面看一下:
只有設(shè)置了nacigation button才會(huì)顯示,不設(shè)置是不會(huì)顯示出來的),否則它就只是一個(gè)空的ViewGroup
二、Toolbar 的屬性
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="?attr/actionBarSize"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
toolbar:navigationIcon
設(shè)置navigation button
toolbar:logo
設(shè)置logo 圖標(biāo)
toolbar:title
設(shè)置標(biāo)題
toolbar:titleTextColor
設(shè)置標(biāo)題文字顏色
toolbar:subtitle
設(shè)置副標(biāo)題
toolbar:subtitleTextColor
設(shè)置副標(biāo)題文字顏色
layout_scrollFlags
我們可以通過設(shè)置layout_scrollFlags參數(shù),來控制AppBarLayout中的控件行為。
大部分View的layout_scrollFlags都設(shè)置為scroll,如果沒有設(shè)置的話,
當(dāng)可滾動(dòng)的View進(jìn)行滾動(dòng)時(shí),這些沒設(shè)置為scroll的View位置會(huì)保持不變;
layout_scrollFlags設(shè)置上snap值則可以避免進(jìn)入動(dòng)畫中間狀態(tài)(mid-animation-states),
這意味著動(dòng)畫會(huì)一直持續(xù)到View完全顯示或完全隱藏為止。
app:layout_collapseMode="pin"來確保Toolbar在view折疊的時(shí)候仍然被固定在屏幕的頂部。
除了固定住view,你還可以使用app:layout_collapseMode="parallax"(以及使用app:layout_collapseParallaxMultiplier="0.7"來設(shè)置視差因子)來實(shí)現(xiàn)視差滾動(dòng)效果(比如CollapsingToolbarLayout里面的一個(gè)ImageView),這中情況和CollapsingToolbarLayout的app:contentScrim="?attr/colorPrimary"屬性一起配合更完美。
toolbar:popupTheme
個(gè)屬性就是用來自定義我們彈出的菜單的樣式
toolbar:titleTextAppearance
設(shè)置title text 相關(guān)屬性,如:字體,顏色,大小等等
toolbar:subtitleTextAppearance
設(shè)置subtitle text 相關(guān)屬性,如:字體,顏色,大小等等
toolbar:logoDescription
logo 描述
android:background
Toolbar 背景
android:theme
主題
android:elevation
有海拔和立體的意思,大概就是有一點(diǎn)浮動(dòng)的效果,更加美觀,不喜可刪。
material design 建議為app bar 的elevation設(shè)置為4dp。
三、Toolbar 代碼設(shè)置
//設(shè)置NavigationIcon
toolbar.setNavigationIcon(R.drawable.ic_book_list);
// 設(shè)置navigation button 點(diǎn)擊事件
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 點(diǎn)擊事件
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 點(diǎn)擊事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//點(diǎn)擊設(shè)置
break;
}
return false;
}
});
setSupportActionBar(toolbar);
注意的是
加標(biāo)題的時(shí)候,toolbar.setTitle("Title");必須在setSupportActionBar(toolbar);之前設(shè)置標(biāo)題才會(huì)生效
溢出菜單
<?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è)置選項(xiàng)"
app:showAsAction="never"
/>
<item android:id="@+id/item_model"
android:title="夜間模式"
app:showAsAction="never"
/>
</menu>
showAsAction的值
app中有一個(gè)菜單(menu),showAsAction主要是針對(duì)這個(gè)菜單的顯示起作用的,它有三個(gè)可選項(xiàng):
always:總是顯示在界面上
never:不顯示在界面上,只讓出現(xiàn)在右邊的三個(gè)點(diǎn)中
ifRoom:如果有位置才顯示,不然就出現(xiàn)在右邊的三個(gè)點(diǎn)中
2 溢出菜單樣式
要更改溢出菜單樣式(如文字顏色等),我們只需要為Toolbar 添加一個(gè)主題,在styles.xml 文件中添加一個(gè)主題:
<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>
3 引用樣式
android:theme="@style/ToolbarTheme"
四、在Toolbar 上添加 自定義View
如在Toolbar 上添加一個(gè)搜索框
1 在Toolbar 中添加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 中添加一個(gè) 編輯框 -->
<EditText
android:id="@+id/edit_search"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v7.widget.Toolbar>
2 代碼中得到這個(gè)編輯框的內(nèi)容
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();
}
五、回退到主頁
1 ToolBar可以生成一個(gè)回退按鈕,按下就回退到主頁
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.am.toolbartest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".IndexActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".SecondActivity"/>
<activity android:name=".MainActivity">
<!-- Parent activity meta-data to support 4.0 and lower -->
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".IndexActivity" />
</activity>
</application>
</manifest>
2 MainActivity設(shè)定setDisplayHomeAsUpEnabled(true);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolBar = (Toolbar) findViewById(R.id.mToolBar);
mToolBar.setTitle("Title");
setSupportActionBar(mToolBar);
mToolBar.setNavigationIcon(R.mipmap.nac_icon);
mToolBar.setLogo(R.mipmap.sugar);
mToolBar.setSubtitle("SubTit");
// 設(shè)置菜單點(diǎn)擊監(jiān)聽
mToolBar.setOnMenuItemClickListener(onMenuItemClick);
// Get a support ActionBar corresponding to this toolbar
ActionBar ab = getSupportActionBar();
// Enable the Up button
ab.setDisplayHomeAsUpEnabled(true);
}
3 如果只想回退到上一頁
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
4 其他
/**
* 初始化toolbar
*/
public void initToolbar() {
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawer, mToolbar, R.string.drawer_open, R.string.drawer_close);
mDrawerToggle.syncState();
}
setHomeButtonEnabled:小于4.0版本的默認(rèn)值為true的。但是在4.0及其以上是false,該方法的作用:決定左上角的圖標(biāo)是否可以點(diǎn)擊。沒有向左的小圖標(biāo)。
.
setDisplayHomeAsUpEnabled(true) // 給左上角圖標(biāo)的左邊加上一個(gè)返回的圖標(biāo) 。對(duì)應(yīng)ActionBar.DISPLAY_HOME_AS_UP