深入理解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方法加载菜单文件
@override public 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.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);
此时运行效果:
新版本studio,在新建activity的时候可以选择对应的模板,会自动创建好drawerlayout并关联toolbar.
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
上一篇: JAVA实现caesar凯撒加密算法
下一篇: Java数组常用排序算法实例小结