深入理解Android 5.0中的Toolbar

环境说明：

Android Studio 2.0
V7包版本：com.android.support:appcompat-v7:23.4.0
compileSdkVersion 23
buildToolsVersion "24.0.0"

Toolbar 引入使用
XML布局中加入：

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/>

主题改为隐藏ActionBar:

Theme.AppCompat.Light.NoActionBar

Activity代码中加入：

 setContentView（R.layout.activity_main）; Toolbar toolbar = （Toolbar） findViewById（R.id.toolbar）; setSupportActionBar（toolbar）;

此时运行效果：

添加背景色

android:background="@color/colorPrimary"

此时运行效果：

基本属性设置

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:navigationIcon="@mipmap/title_bar_back"//左侧图标 app:subtitle="子标题" app:subtitleTextColor="#fff" //标题颜色 app:title="标题" app:titleTextColor="#fff"/> //子标题颜色

运行效果：

添加选项菜单

第一步创建菜单文件

 <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_settings" android:icon="@mipmap/ic_launcher" android:orderInCategory="100" android:title="settings" app:showAsAction="never"/> <item android:id="@+id/action_share" android:icon="@mipmap/ic_action_share" android:orderInCategory="100" android:title="settings" app:showAsAction="ifRoom"/> <item android:id="@+id/action_search" android:icon="@mipmap/ic_action_search" android:orderInCategory="100" android:title="settings" app:showAsAction="ifRoom"/> </menu>

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

@Overridepublic boolean onCreateOptionsMenu（Menu menu） { getMenuInflater（）.inflate（R.menu.menu_main, menu）; return true;}

此时效果：

个性设置
左侧返回箭头
想要显示自带的返回箭头，需要去掉之前设定的属性：

app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加：

getSupportActionBar（）.setHomeButtonEnabled（true）; //设置返回键可用getSupportActionBar（）.setDisplayHomeAsUpEnabled（true）;

此时效果：

溢出图标颜色
在style文件中添加：

 <！-- 溢出菜单图标颜色--><item name="colorControlNormal">@android:color/white</item>

此时效果：

自定义右侧溢出图标
在Style文件中添加：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <！-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <！-- 溢出菜单图标颜色--> <item name="colorControlNormal">@android:color/white</item> <！-- 溢出菜单图标自定义--> <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item> </style> <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow"> <item name="android:src">@mipmap/ic_action_add</item> </style>

此时运行效果：

更改弹出菜单背景
在Style文件中添加样式：

在布局文件中添加使用主题：

app:popupTheme="@style/ToolbarPopupTheme"

此时运行效果：

更改弹出菜单文字颜色
添加样式文件：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><！-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item><！-- 溢出菜单图标颜色--><item name="colorControlNormal">@android:color/white</item><item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item><！-- 溢出菜单文字颜色--><item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item> </style> <！--溢出菜单文字颜色--> <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large"><item name="android:textColor">#fff</item> </style>

此时运行效果：

修改标题文字大小
添加配置：

 app:titleTextAppearance="@style/ToolbarTitleSize"

添加style：

 <！-- toolbar标题文字大小 --> <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textSize">28sp</item> </style>

此时运行效果：

子标题文字大小类似，添加配置然后定义style文件（此处省略）：

app:subtitleTextAppearance="@style/ToolbarTitleSize"

修改弹出菜单位置
修改配置使弹出菜单显示在Toolbar下方：

首先重新设置属性：（在界面布局文件Toolbar中）

app:popupTheme="@style/OverflowMenuStyle"

在Style文件中添加：

<style name="OverflowMenuStyle"><！-- 是否覆盖锚点，默认为true，即盖住Toolbar --><item name="overlapAnchor">false</item><item name="android:dropDownWidth">wrap_content</item><item name="android:paddingRight">5dp</item><！-- 弹出层背景颜色 --><item name="android:colorBackground">#FFCC99</item><！-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar --><item name="android:dropDownVerticalOffset">5dp</item><！-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 --><item name="android:dropDownHorizontalOffset">0dp</item><！-- 设置弹出菜单文字颜色 --><item name="android:textColor">#0099CC</item> </style>

此时运行效果：

事件处理
返回按钮事件
添加监听

toolbar.setNavigationOnClickListener（new View.OnClickListener（） { @Override public void onClick（View v） {Toast.makeText（getApplicationContext（）, "点击了返回箭头", Toast.LENGTH_LONG）.show（）; }}）;

菜单项点击事件
重写方法

 @Override public boolean onOptionsItemSelected（MenuItem item） {switch （item.getItemId（）） { case R.id.action_settings:break; case R.id.action_search:break; case R.id.action_share:break;}return true; }

自定义Toolbar
Toolbar下面可以嵌套布局，直接将自己定义好的布局放到Toolbar下面即可

<android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> ...... </RelativeLayout> </android.support.v7.widget.Toolbar>

Toolbar 和 DrawerLayout 左滑菜单

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_left" android:layout_width="match_parent" android:layout_height="match_parent"> <！--侧滑菜单--> <LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"android:background="#CCCCFF"android:orientation="vertical"><TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="选项一" android:textSize="18sp"/><TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="选项二" android:textSize="18sp"/> </LinearLayout></android.support.v4.widget.DrawerLayout>

添加左滑布局文件：
在主布局文件中引入：（在Toolbar下方）

<！--DrawerLayout--><include layout="@layout/custom_drawerlayout"/>

在代码中添加关联：

DrawerLayout mDrawerLayout = （DrawerLayout） findViewById（R.id.drawer_left）; ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle（this, mDrawerLayout, toolbar, R.string.open, R.string.close）; mDrawerToggle.syncState（）; mDrawerLayout.setDrawerListener（mDrawerToggle）;

此时运行效果：

新版本studio，在新建Activity的时候可以选择对应的模板，会自动创建好DrawerLayout并关联Toolbar.
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。