1.官方文档内容
toolbar.png
toolbar是android.support.v7.widget包中的一个类，兼容低版本的API，如果你开发的项目最低要求的API版本是21，那么你也可以使用android.widget.包中的toolbar。它可以放置在一个视图层次结构中嵌套的任意级别，应用程序可以使用方法setSupportActionBar将一个ActionBar替换为toolbar，toolBar支持比ActionBar更集中的功能集。
2.toolbar的基本使用：
（1）第一步，在使用之前我们需要把ActionBar隐藏。
也可以不隐藏ActionBar作为一个独立控件使用。
ActionBar的方式有：
- 在AndroidManifest中通过属性theme隐藏：
<activity
android:name=".MainActivity"
android:theme="@android:style/Theme.Light.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
注：该方式的使用条件是你的XxxActivity必须继承自Activity,如果继承自AppCompatActivity，会报如下图的错误：
错误.png
我们需要使用如下theme：
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
- 在Activity中获取到ActionBar，利用ActionBar的方法进行隐藏；
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.hide();
}
}
注：以上方式兼容任何级别的API；
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
if (actionBar != null) {
actionBar.hide();
}
}
注：以上方式API21以上才会起作用。
- 在Activity中设置如下代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
// supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
注：使用上述代码时，必须放到setContentView方法之前调用。
（2）第二步，在xml中添加toolbar控件，代码如下；
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/custom"/>
</android.support.v7.widget.Toolbar>
注：上面代码中的TextView为自定义控件。?attr/actionBarSize表示根据屏幕的分辨率采用系统默认的高度，低版本要使用的话，需要使用V7包中的，否则只有api21以上才能使用。
（3）第三步，在Activity中添加toolbar，代码如下；
@BindView(R.id.toolbar)
Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_zhifu);
ButterKnife.bind(this);
mToolbar.inflateMenu(R.menu.toolbar_menu); //设置右上角的填充菜单
mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
mToolbar.setLogo(R.mipmap.ic_launcher); //设置app的logo
mToolbar.setTitle("Title"); //设置主标题
mToolbar.setTitleTextColor(Color.MAGENTA);
mToolbar.setSubtitle("Subtitle"); //设置子标题
mToolbar.setSubtitleTextColor(Color.WHITE);
//设置菜单的点击事件
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_search:
Toast.makeText(ZhifuActivity.this, R.string.menu_search, Toast.LENGTH_SHORT).show();
break;
case R.id.action_notification:
Toast.makeText(ZhifuActivity.this, R.string.menu_notifications, Toast.LENGTH_SHORT).show();
break;
case R.id.action_item01:
Toast.makeText(ZhifuActivity.this, R.string.item01, Toast.LENGTH_SHORT).show();
break;
case R.id.action_item02:
Toast.makeText(ZhifuActivity.this, R.string.item02, Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
}
用到的菜单xml（R.menu.toolbar_menu）如下：
<?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/action_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notifications"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_item01"
android:title="@string/item01"
app:showAsAction="never"/>
<item
android:id="@+id/action_item02"
android:title="@string/item02"
app:showAsAction="never"/>
</menu>
注：我们可以在xml中使用第三步中java代码的属性，如下所示：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/color_0176da"
toolbar:logo="@mipmap/ic_launcher"
toolbar:navigationIcon="@mipmap/ic_drawer_home"
toolbar:subtitle="123"
toolbar:title="112"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/custom"/>
</android.support.v7.widget.Toolbar>
注：在xml中有些属性需要使用toolbar:才会有作用。
常用操作：
（1）改变菜单(R.menu.toolbar_menu)的字体颜色:
- 在styles.xml中定义一个Theme,并设置android：textColorPrimary属性，
<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">@color/color_red</item>
</style>
- 在布局文件的Toolbar中设置popupTheme:
toolbar:popupTheme="@style/Theme.ToolBar.Base"
3.仿知乎的标题栏
实现效果如下：
仿知乎的标题栏.gif
代码如下，
ZhihuActivity.java:
public class ZhifuActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_zhifu);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);
toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
toolbar.setTitle(R.string.home_page);
toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
}
}
主布局activity_zhihu.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_zhifu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.gjj.gd.materialdesign_v7.toolbar.ZhifuActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="@color/color_0176da"
android:theme="@style/Theme.Toolbar.ZhiHu">
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:src="@mipmap/ic_zhihu_logo"/>
</RelativeLayout>
</LinearLayout>
toolbar中的三点对应的menu布局zhihu_toolbar_menu.xml：
<?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/ic_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search"
app:showAsAction="ifRoom"
/>
<item
android:id="@+id/action_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notifications"
app:showAsAction="ifRoom"
/>
<item
android:id="@+id/action_setting"
android:orderInCategory="100"
android:title="@string/menu_setting"
app:showAsAction="never"
/>
<item
android:id="@+id/action_about"
android:orderInCategory="101"
android:title="@string/menu_about"
app:showAsAction="never"
/>
</menu>
布局中用到的样式：
<style name="Theme.Toolbar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
</style>
<style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@mipmap/ic_menu_more_overflow</item>
</style>
4.toolbar实例1
结合DrawerLayout写了一个简单实例。
toolbar实例1.gif
5.toolbar实例2
自定义了更多的弹出菜单布局，利用了PopWindow。
自定义了弹出菜单popwindow.gif
源码地址：https://github.com/gaojuanjuan/MaterialDesign_V7
参考文章：
