欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

深入理解Android 5.0中的Toolbar

程序员文章站 2024-02-15 19:47:22
环境说明: android studio 2.0 v7包版本:com.android.support:appcompat-v7:23.4.0 comp...

环境说明:

  • 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 5.0中的Toolbar

添加背景色

android:background="@color/colorprimary"

此时运行效果:

深入理解Android 5.0中的Toolbar

基本属性设置

<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"/> //子标题颜色

运行效果:

深入理解Android 5.0中的Toolbar

添加选项菜单

第一步创建菜单文件

 <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方法加载菜单文件

@override
public boolean oncreateoptionsmenu(menu menu) {
 getmenuinflater().inflate(r.menu.menu_main, menu);
 return true;
}

此时效果:

深入理解Android 5.0中的Toolbar

个性设置

左侧返回箭头

想要显示自带的返回箭头,需要去掉之前设定的属性:

app:navigationicon="@mipmap/title_bar_back"

然后在代码中添加:

getsupportactionbar().sethomebuttonenabled(true); //设置返回键可用
getsupportactionbar().setdisplayhomeasupenabled(true);

此时效果:

深入理解Android 5.0中的Toolbar

溢出图标颜色

在style文件中添加:

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

此时效果:

深入理解Android 5.0中的Toolbar

自定义右侧溢出图标

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

此时运行效果:

深入理解Android 5.0中的Toolbar

更改弹出菜单背景

在style文件中添加样式:


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

app:popuptheme="@style/toolbarpopuptheme"

此时运行效果:

深入理解Android 5.0中的Toolbar

更改弹出菜单文字颜色

添加样式文件:

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

此时运行效果:

深入理解Android 5.0中的Toolbar

修改标题文字大小

添加配置:

 app:titletextappearance="@style/toolbartitlesize"

添加style:

 <!-- toolbar标题文字大小 -->
 <style name="toolbartitlesize" parent="@style/textappearance.widget.appcompat.toolbar.title">
  <item name="android:textsize">28sp</item>
 </style>

此时运行效果:

深入理解Android 5.0中的Toolbar

子标题文字大小类似,添加配置然后定义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>

此时运行效果:

深入理解Android 5.0中的Toolbar

事件处理

返回按钮事件

添加监听

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_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);

此时运行效果:

深入理解Android 5.0中的Toolbar

新版本studio,在新建activity的时候可以选择对应的模板,会自动创建好drawerlayout并关联toolbar.

总结

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