1.简介
-
简单点可以理解为替代原来的ActionBar就行了
Paste_Image.png
一个Toolbar从左到右包括了一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个action menu这五部分。只有设置相应的内容才行，否则不会显示。
Paste_Image.png
2.Toolbar的使用
注意：开头是自定义命名空间xmlns:toolbar="http://schemas.android.com/apk/res-auto
- toolbar:navigationIcon 设置navigation button的图标
- toolbar:logo 设置logo
- toolbar:title 设置标题
- toolbar:titleTextColor 设置标题文字颜色
- toolbar:subtitle 设置副标题
- toolbar subtitleTextColor 设置副标题文字颜色
- toolbar:popupTheme 应用一个主题用来控制toolbar的ui弹窗
- toolbar:title TextAppearance 设置title text 相关属性，如：字体，颜色，大小等等
- toolbar:subtitle TextAppearance
- toolbar:logoDescription logo描述
- anderoid:background toolbar背景
- android:theme 主题
//设置NavigationIcon
toolbar.setNavigationIcon(R.drawable.ic_book_list);
// 设置navigation button 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
// 设置 toolbar 背景色
toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
// 设置 Title
toolbar.setTitle(R.string.toolbar_title);
// 设置Toolbar title文字颜色
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
// 设置Toolbar subTitle
toolbar.setSubtitle(R.string.sub_title);
toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
// 设置logo
toolbar.setLogo(R.mipmap.ic_launcher);
// 设置 NavigationIcon 点击事件
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//设置 Toolbar menu
toolbar.inflateMenu(R.menu.setting_menu);
// 设置溢出菜单的图标
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
// 设置menu item 点击事件
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_setting:
//点击设置
break;
}
return false;
}
});
如何为一个Activity添加一个ToolBar
1.gradle中添加V7 appCompat
2.确保Activity集成AppCompatActivity
3.在功能清单文件中设置（也可以在activity的节点下设置）
<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做相关操作
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:
//点击设置菜单
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="设置选项"
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">
<!-- 设置 toolbar 溢出菜单的文字的颜色 -->
<item name="android:textColor">@android:color/holo_red_dark</item>
<!-- 设置toolbar 溢出菜单的字体大小-->
<item name="android:textSize">25sp</item>
<!-- 设置 显示在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设置自定义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);
// 获取内容
String content = searchEdit.getText().toString();
}
