深入理解Android 5.0中的Toolbar

概述环境说明：AndroidStudio2.0V7包版本：com.android.support:appcompat-v7:23.4.0compileSdkVersion23

环境说明：

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>

此时运行效果：

更改d出菜单背景

在Style文件中添加样式：

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

app:popuptheme="@style/ToolbarPopuptheme"

此时运行效果：

更改d出菜单文字颜色

添加样式文件：

<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"

修改d出菜单位置

修改配置使d出菜单显示在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>  <!-- d出层背景颜色 -->  <item name="androID:colorBackground">#FFCC99</item>  <!-- d出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar -->  <item name="androID:dropDownVerticalOffset">5dp</item>  <!-- d出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 -->  <item name="androID:dropDownHorizontalOffset">0dp</item>  <!-- 设置d出菜单文字颜色 -->  <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.Toolbar  androID: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.DrawerLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:ID="@+ID/drawer_left" androID:layout_wIDth="match_parent" androID:layout_height="match_parent"> <!--侧滑菜单--> <linearLayout  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_g@R_419_6610@ty="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.

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

总结

以上是内存溢出为你收集整理的深入理解Android 5.0中的Toolbar全部内容，希望文章能够帮你解决深入理解Android 5.0中的Toolbar所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。