Material Design之Toolbar
Toolbar 是 Android5.0 中新引入的一个控件，其出现的目的就是为了取代 ActionBar。
我们来看一下Toolbar的类继承关系，如下图：
从继承关系可以看出，继承的是ViewGroup,也就是说Toolbar 是一个ViewGroup 容器，知道了这一点对于后面的理解就比较容易了。那么接下来我们看一下这个容器里面有些什么东西，还是看一下官方文档：
文档说得很清楚，一个Toolbar 从左到右包括了 一个navigation button、一个logo、一个title和subtitle、一个或多个自定义的View和一个 action menu 这5部分。也就是这个ViewGroup 容器里面包含了这五部分内容，对应着一个界面看一下：
上面的图就是一个Toolbar 容器从左到右的五部分内容，当然了，我们要为它设置相应的内容才行（比如：设置了nacigation button才会显示，不设置是不会显示出来的），否则它就只是一个空的ViewGroup，好了，到此我们就了解了一个Toolbar 是什么样子的。那么下面我们看一下该怎么使用Toolbar。
Toolbar的使用
XML中的常用属性(注意开头是自定义命名空间 xmlns:toolbar=“http://schemas.android.com/apk/res-auto”, 而不是 android,如果使用android:navigationIcon这种是无效的，必须使用 toolbar:navigationIcon)：
-
toolbar:navigationIcon 设置navigation button
-
toolbar:logo 设置logo 图标
-
toolbar:title 设置标题
-
toolbar:titleTextColor 设置标题文字颜色
-
toolbar:subtitle 设置副标题
-
toolbar:subtitleTextColor 设置副标题文字颜色
-
toolbar:popupTheme Reference to a theme that should be used to
-
inflate popups shown by widgets in the toolbar.
-
toolbar:titleTextAppearance 设置title text 相关属性，如：字体,颜色，大小等等
-
toolbar:subtitleTextAppearance 设置subtitle text 相关属性，如：字体,颜色，大小等等
-
toolbar:logoDescription logo 描述
-
android:background Toolbar 背景
-
android:theme 主题
以上就是Toolbar比较常用的 XML 中的属性，这些属性也可以在代码中设置，代码如下：
//设置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.确保你的Activity 是继承的AppCompatActivity
public class ToolbarActivity extends AppCompatActivity{
//...
}
- 为你的Activity提供一个 NoActionBar的主题。例如：
### themes.xml
...
<style name="NoStatusBarTheme" parent="Theme.Design.NoActionBar">
<!-- Status bar color. -->
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
### AndroidManifest.xml
...
<activity
android:name=".coordinatorlayout.CoordinatorActivity"
android:theme="@style/NoStatusBarTheme"
android:launchMode="singleTask"/>
3.在 Activity 的布局文件中添加toolbar
<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>
- 在Activity 中对 Toolbar 做一些相关的操作，如：设置标题，设置navigation button 点击事件，添加溢出菜单
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 ，这个属性是设置菜单该怎么显示，取值有5种，主要应用的有ifRoom、never、always 这三种， ifRoom 表示 如果Toolbar 上有显示空间就显示在Toolbar 上，如果没有空间就展示在溢出菜单里，never 表是总是显示在溢出菜单里，always 表示总是显示在Toolbar 上。效果如下：
点击溢出菜单如下：
项目中对Toolbar 的一些特殊需求
上面讲了Toolbar 的基本使用方法，但是在实际的项目中可能这些还不够，比如设计师觉得默认菜单文字颜色不好，要换菜单文字的颜色。或者溢出菜单文字的大小不好，要换文字的大小。或者需要在Toolbar 上添加自定义View等等。下面就讲一下项目中遇到的几个特殊需求。
1，更改溢出菜单文字的颜色和文字的大小
默认情况下，弹出的溢出菜单的文字的颜色是黑色的，如下：
要更改溢出菜单文字的颜色，我们只需要为Toolbar 添加一个主题,在styles.xml 文件中添加一个主题：
<style name="ToolbarTheme" parent="Theme.AppCompat.Light">
<!-- 设置 toolbar 溢出菜单的文字的颜色 -->
<item name="android:textColor">@android:color/holo_red_dark</item>
</style>
2.改变溢出菜单文字的大小
在style 中添加如下代码：
<!-- 设置toolbar 溢出菜单的字体大小-->
<item name="android:textSize">25sp</item>
3.更改显示在Toolbar 上的菜单文字颜色
<!-- 设置 显示在toobar上菜单文字的颜色 -->
<item name="actionMenuTextColor">@android:color/white</item>
另外，改变显示在Toolbar 上的菜单的文字大小和改变溢出菜单文字大小的方法一样，都是android:textSize 这个属性。
最后，贴出Toolbar 主题的全部代码：
<style name="ToolbarTheme" parent="Theme.AppCompat.Light">
<!-- 更换Toolbar OVerFlow menu icon -->
<item name="actionOverflowButtonStyle">@style/OverFlowIcon</item>
<!-- 设置 toolbar 溢出菜单的文字的颜色 -->
<item name="android:textColor">@android:color/holo_red_dark</item>
<!-- 设置 显示在toobar上菜单文字的颜色 -->
<item name="actionMenuTextColor">@android:color/white</item>
<!-- 设置toolbar 弹出菜单的字体大小和溢出菜单文字大小-->
<item name="android:textSize">15sp</item>
</style>
<style name="OverFlowIcon" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">@drawable/abc_ic_menu_moreoverflow_mtrl_alpha</item>
</style>
最后，别忘了在Toolbar 的xml 文件中应用主题：
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
toolbar:navigationIcon="@mipmap/navigation_back_white"
toolbar:title="@string/toolbar_title"
toolbar:titleTextColor="@color/white"
android:theme="@style/ToolbarTheme"
>
</android.support.v7.widget.Toolbar>
4. 在Toolbar 上添加 自定义View
如：很多 APP 里都有搜索功能，在Toolbar 上添加一个搜索框，如网易云音乐的搜索界面：
像上面的搜索 Toolbar 也很简单，前文已经提到过，在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();
}
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
