1.官方文檔內(nèi)容
toolbar.png
toolbar是android.support.v7.widget包中的一個(gè)類，兼容低版本的API晚吞，如果你開發(fā)的項(xiàng)目最低要求的API版本是21肛冶，那么你也可以使用android.widget.包中的toolbar。它可以放置在一個(gè)視圖層次結(jié)構(gòu)中嵌套的任意級別，應(yīng)用程序可以使用方法setSupportActionBar將一個(gè)ActionBar替換為toolbar诚卸，toolBar支持比ActionBar更集中的功能集。
2.toolbar的基本使用：
（1）第一步绘迁，在使用之前我們需要把ActionBar隱藏合溺。
也可以不隱藏ActionBar作為一個(gè)獨(dú)立控件使用。
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缀台，會報(bào)如下圖的錯(cuò)誤：
錯(cuò)誤.png
我們需要使用如下theme：
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
- 在Activity中獲取到ActionBar棠赛，利用ActionBar的方法進(jìn)行隱藏；
@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中設(shè)置如下代碼：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
// supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
注：使用上述代碼時(shí)，必須放到setContentView方法之前調(diào)用哲身。
（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表示根據(jù)屏幕的分辨率采用系統(tǒng)默認(rèn)的高度，低版本要使用的話脯丝，需要使用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); //設(shè)置右上角的填充菜單
mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//設(shè)置導(dǎo)航欄圖標(biāo)
mToolbar.setLogo(R.mipmap.ic_launcher); //設(shè)置app的logo
mToolbar.setTitle("Title"); //設(shè)置主標(biāo)題
mToolbar.setTitleTextColor(Color.MAGENTA);
mToolbar.setSubtitle("Subtitle"); //設(shè)置子標(biāo)題
mToolbar.setSubtitleTextColor(Color.WHITE);
//設(shè)置菜單的點(diǎn)擊事件
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中定義一個(gè)Theme,并設(shè)置android：textColorPrimary屬性，
<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">@color/color_red</item>
</style>
- 在布局文件的Toolbar中設(shè)置popupTheme:
toolbar:popupTheme="@style/Theme.ToolBar.Base"
3.仿知乎的標(biāo)題欄
實(shí)現(xiàn)效果如下：
仿知乎的標(biāo)題欄.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中的三點(diǎn)對應(yīng)的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實(shí)例1
結(jié)合DrawerLayout寫了一個(gè)簡單實(shí)例。
toolbar實(shí)例1.gif
5.toolbar實(shí)例2
自定義了更多的彈出菜單布局赤惊，利用了PopWindow吼旧。
自定義了彈出菜單popwindow.gif
源碼地址：https://github.com/gaojuanjuan/MaterialDesign_V7
參考文章：
