Toolbar用法詳解:
Toolbar的組成:
Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:
- A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.
- A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
- A title and subtitle. The title should be a signpost for the Toolbar's current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
- One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
- An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar's minimum height, if set.
上面是引用了官方文檔對(duì)Toolbar的介紹,可以知道Toolbar主要包括五部分:
- 導(dǎo)航按鈕
- 應(yīng)用Logo
- 標(biāo)題與副標(biāo)題
- 若干自定義View
- ActionMenu
toolbar.png
Toolbar樣式
在系統(tǒng)value下style文件中可以看到系統(tǒng)定義的Toolbar的樣式如下,如果需要更改toolbar的樣式只需要更改對(duì)應(yīng)的樣式即可;
<style name="Base.Widget.AppCompat.Toolbar" parent="android:Widget">
<item name="titleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Title</item>
<item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
<item name="android:minHeight">?attr/actionBarSize</item>
<item name="titleMargin">4dp</item>
<item name="maxButtonHeight">56dp</item>
<item name="buttonGravity">top</item>
<item name="collapseIcon">?attr/homeAsUpIndicator</item>
<item name="collapseContentDescription">@string/abc_toolbar_collapse_description</item>
<item name="contentInsetStart">16dp</item>
<item name="contentInsetStartWithNavigation">72dp</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
</style>
系統(tǒng)默認(rèn)HomeAsUp圖標(biāo):
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:autoMirrored="true"
android:tint="?attr/colorControlNormal">
<path
android:pathData="M20,11L7.8,11l5.6,-5.6L12,4l-8,8l8,8l1.4,-1.4L7.8,13L20,13L20,11z"
android:fillColor="@android:color/white"/>
</vector>
系統(tǒng)Toolbar標(biāo)題Title的默認(rèn)樣式
<style name="Base.TextAppearance.AppCompat.Widget.ActionBar.Title"parent="TextAppearance.AppCompat.Title">
<item name="android:textSize">20dp</item>
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
系統(tǒng)Toolbar副標(biāo)題SubTitle的默認(rèn)樣式
<style name="Base.TextAppearance.AppCompat.Widget.ActionBar.Subtitle" parent="TextAppearance.AppCompat.Subhead">
<item name="android:textSize">16dp</item>
<item name="android:textColor">?android:attr/textColorSecondary</item>
</style>
系統(tǒng)Toolbar溢出菜單的默認(rèn)樣式:
<style name="Base.Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">true</item>
<item name="android:dropDownHorizontalOffset">-4dip</item>
</style>
<style name="Base.Widget.AppCompat.ListPopupWindow" parent="">
<item name="android:dropDownSelector">?attr/listChoiceBackgroundIndicator</item>
<item name="android:popupBackground">@drawable/abc_popup_background_mtrl_mult</item>
<item name="android:dropDownVerticalOffset">0dip</item>
<item name="android:dropDownHorizontalOffset">0dip</item>
<item name="android:dropDownWidth">wrap_content</item>
</style>
Toolbar常用的方法
- 設(shè)置導(dǎo)航圖標(biāo)及點(diǎn)擊事件:
mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
mToolbar.setNavigationOnClickListener(this);
- 設(shè)置標(biāo)題和副標(biāo)題:
mToolbar.setTitle("Toolbar");
mToolbar.setSubtitle("demo");
- 設(shè)置應(yīng)用Logo及溢出菜單圖標(biāo):
mToolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_launcher));
- 設(shè)置溢出菜單的布局和各個(gè)ActionMenu的點(diǎn)擊事件,此處注意的是不能和setSupportActionBar同時(shí)使用,否則無(wú)效
mToolbar.inflateMenu(R.menu.menu_main);//不能和setSupportActionbar同時(shí)使用
mToolbar.setOnMenuItemClickListener(this);
修改Toolbar樣式
- 修改標(biāo)題,導(dǎo)航按鈕,溢出菜單默認(rèn)圖標(biāo)的顏色:
<!--標(biāo)題和導(dǎo)航鍵的顏色-->
<item name="android:textColorPrimary">@android:color/holo_orange_dark</item>
- 修改副標(biāo)題的顏色
<!--副標(biāo)題的顏色-->
<item name="android:textColorSecondary">@android:color/white</item>
- 修改顯示在Toolbar上的ActionMenu的顏色
<item name="actionMenuTextColor">@android:color/holo_red_dark</item>
- 修改溢出菜單文字及字體大小,同時(shí)也會(huì)修改自定義View字體大小,及Toolbar上ActionMenu文字的大小
<!--自定義控件中文字顏色和溢出菜單上文字的顏色-->
<item name="android:textColor">@android:color/holo_purple</item>
<item name="android:textSize">25dp</item>
- 修改溢出菜單的背景,擺放位置,從系統(tǒng)Overflow樣式知道其實(shí)就是修改對(duì)應(yīng)屬性的值即可
<style name="AppTheme.PopupOverlay" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:paddingRight">5dp</item>
<item name="android:popupBackground">?attr/colorPrimary</item>
<!-- 彈出層垂直方向上的偏移霜第，即在豎直方向上距離Toolbar的距離，值為負(fù)則會(huì)蓋住Toolbar -->
<item name="android:dropDownVerticalOffset">5dip</item>
<!-- 彈出層水平方向上的偏移，即距離屏幕左邊的距離呈宇，負(fù)值會(huì)導(dǎo)致右邊出現(xiàn)空隙 -->
<item name="android:dropDownHorizontalOffset">0dip</item>
</style>
貼出上圖Toolbar的代碼:
- Toolbar布局:
<android.support.v7.widget.Toolbar
android:background="#595af2"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:theme="@style/AppTheme.AppBarOverlay">
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="標(biāo)題"/>
</android.support.v7.widget.Toolbar>
- Toolbar配置樣式,及主題:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#595af2</item>
<item name="colorAccent">#ef4045</item>
<item name="colorPrimaryDark">#140878</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">@android:color/holo_orange_dark</item>
<item name="android:textColorSecondary">@android:color/white</item>
<item name="actionMenuTextColor">@android:color/holo_red_dark</item>
<item name="android:textColor">@android:color/holo_purple</item>
<item name="android:textSize">25dp</item>
</style>
<!--<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>-->
<!--溢出菜單樣式 -->
<style name="AppTheme.PopupOverlay" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:paddingRight">5dp</item>
<item name="android:popupBackground">?attr/colorPrimary</item>
<!-- 彈出層垂直方向上的偏移俯画，即在豎直方向上距離Toolbar的距離阳啥，值為負(fù)則會(huì)蓋住Toolbar -->
<item name="android:dropDownVerticalOffset">5dip</item>
<!-- 彈出層水平方向上的偏移晨川，即距離屏幕左邊的距離策肝，負(fù)值會(huì)導(dǎo)致右邊出現(xiàn)空隙 -->
<item name="android:dropDownHorizontalOffset">0dip</item>
</style>
- 配置ActionMenu布局:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item
android:id="@+id/action_text"
android:title="文字"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/search_view"
android:icon="@android:drawable/ic_menu_search"
android:imeOptions="actionSearch"
android:inputType="textCapWords"
android:orderInCategory="100"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"/>
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="設(shè)置"
app:showAsAction="never"/>
<item
android:id="@+id/action_map"
android:orderInCategory="100"
android:title="地圖"
app:showAsAction="never"/>
</menu>
- Activity中調(diào)用Toolbar:
public class ToolbarActivity extends AppCompatActivity implements View.OnClickListener,
Toolbar.OnMenuItemClickListener {
private Toolbar mToolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_toolbar);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
//mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
mToolbar.setNavigationOnClickListener(this);
mToolbar.setTitle("Toolbar");
mToolbar.setSubtitle("demo");
mToolbar.setLogo(R.drawable.ic_launcher);
//mToolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_launcher));
//mToolbar.inflateMenu(R.menu.menu_main);//不能和setSupportActionbar同時(shí)使用
//mToolbar.setOnMenuItemClickListener(this);
setSupportActionBar(mToolbar);
//給左上角圖標(biāo)的左邊加上一個(gè)返回的圖標(biāo) 。對(duì)應(yīng)ActionBar.DISPLAY_HOME_AS_UP
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//使自定義的普通View能在title欄顯示衩藤，即actionBar.setCustomView能起作用吧慢，對(duì)應(yīng)ActionBar.DISPLAY_SHOW_CUSTOM
getSupportActionBar().setDisplayShowCustomEnabled(true);
//這個(gè)小于4.0版本的默認(rèn)值為true的。但是在4.0及其以上是false,決定左上角的圖標(biāo)是否可以點(diǎn)擊赏表。检诗。
getSupportActionBar().setHomeButtonEnabled(true);
//使左上角圖標(biāo)是否顯示，如果設(shè)成false瓢剿，則沒(méi)有程序圖標(biāo)逢慌，僅僅就個(gè)標(biāo)題，否則间狂，顯示應(yīng)用程序圖標(biāo)攻泼，
// 對(duì)應(yīng)id為android.R.id.home，對(duì)應(yīng)ActionBar.DISPLAY_SHOW_HOME
//其中setHomeButtonEnabled和setDisplayShowHomeEnabled共同起作用鉴象，
//如果setHomeButtonEnabled設(shè)成false忙菠，即使setDisplayShowHomeEnabled設(shè)成true，圖標(biāo)也不能點(diǎn)擊
getSupportActionBar().setDisplayShowHomeEnabled(true);
//對(duì)應(yīng)ActionBar.DISPLAY_SHOW_TITLE纺弊。
getSupportActionBar().setDisplayShowTitleEnabled(true);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int itemId = item.getItemId();
switch (itemId) {
case R.id.search_view:
Snackbar.make(mToolbar, "點(diǎn)擊搜索", Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_settings:
Snackbar.make(mToolbar, "點(diǎn)擊設(shè)置", Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_map:
Snackbar.make(mToolbar, "點(diǎn)擊地圖", Snackbar.LENGTH_SHORT).show();
break;
}
return true;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case android.R.id.home:
finish();
}
}
@Override
public boolean onMenuItemClick(MenuItem item) {
int itemId = item.getItemId();
switch (itemId) {
case R.id.search_view:
Snackbar.make(mToolbar, "點(diǎn)擊搜索", Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_settings:
Snackbar.make(mToolbar, "點(diǎn)擊設(shè)置", Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_map:
Snackbar.make(mToolbar, "點(diǎn)擊地圖", Snackbar.LENGTH_SHORT).show();
break;
}
return true;
}
}
toolbar.png
