ToolBar使用方法详解
toolbar的出现是为了替换之前的actionbar的各种不灵活使用方式,相反,toolbar的使用变得非常灵活,因为它可以让我们*往里面添加子控件.低版本要使用的话,可以添加support-v7包.
今天要实现的效果如下:
由上图可以看到,toolbar的布局还是相对丰富的.要使用toolbar,首先为了兼容低版本,需要在gradle中引入支持库
compile 'com.android.support:appcompat-v7:23.4.0'
其次,我们还需要隐藏默认的actionbar,否则会报如下错误:
caused by: java.lang.illegalstateexception: this activity already has an action bar
supplied by the window decor. do not request window.feature_support_action_bar and set
windowactionbar to false in your theme to use a toolbar instead.
可以在res/value/style.xml中设置:
<resources> <!-- base application theme. --> <style name="apptheme" parent="apptheme.base"></style> <style name="apptheme.base" parent="theme.appcompat"> <!--将actionbar隐藏,这里使用toolbar--> <item name="windowactionbar">false</item> <!-- 使用 api level 22以上编译的话,要拿掉前綴字 --> <item name="windownotitle">true</item> <!--colorprimarydark对应状态栏的颜色--> <item name="colorprimarydark">@color/statuscolor</item> <!--colorprimary 对应toolbar的颜色--> <item name="colorprimary">@color/toolbarcolor</item> <!--coloraccent 对应edittext编辑时、radiobutton选中、checkbox等选中时的颜色。--> <item name="coloraccent">@color/editcolor</item> <!--窗口的颜色--> <item name="android:windowbackground">@color/widowcolor</item> </style> <!--status bar color--> <color name="statuscolor">#ff0000</color> <!-- toolbar color --> <color name="toolbarcolor">#0000ff</color> <!--edittext,radiobutton,checkbox color--> <color name="editcolor">#fd87a9</color> <!--window color--> <color name="widowcolor">#ffffff</color> </resources>
从上面的style文件中,可以知道,手机状态栏的颜色和toolbar的颜色也是可以在style中配置的.然后在清单文件的application节点下需要确认使用的style是android:theme=”@style/apptheme”
ok,样式配置完后,接着在res/layout/activity_main.xml中加入toolbar控件.
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <!-- ?attr/actionbarsize:表示根据屏幕的分辨率采用系统默认的高度 如果低版本也要使用的话,则需要使用v7包的,否则只有api21上才能有效 --> <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:background="?attr/colorprimary"> <!--添加toolbar的子控件--> <button android:id="@+id/btn_diy" android:layout_width="60dp" android:layout_height="wrap_content" android:layout_gravity="right" android:background="#80ffffff" android:text="自定义按钮" android:textcolor="#000000" android:textsize="11sp" /> <textview android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:text="首页" android:textcolor="@android:color/black" android:textsize="20sp" /> </android.support.v7.widget.toolbar> <textview android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/hello_world" android:textcolor="@android:color/black" android:textsize="30sp" /> </linearlayout>
再来看看mainactivity的代码:
package blog.csdn.net.mchenys.toolbardemo; import android.graphics.color; import android.graphics.rect; import android.graphics.drawable.colordrawable; import android.os.bundle; import android.support.v7.app.appcompatactivity; import android.support.v7.widget.toolbar; import android.view.gravity; import android.view.menu; import android.view.menuitem; import android.view.view; import android.view.viewgroup; import android.widget.popupwindow; import android.widget.toast; /** * created by mchenys on 2016/5/29. */ public class mainactivity extends appcompatactivity implements view.onclicklistener { toolbar mtoolbar; toast mtoast; popupwindow mpopupwindow; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mtoast = toast.maketext(this, "", toast.length_short); mtoast.setgravity(gravity.center, 0, 0); mtoolbar = (toolbar) findviewbyid(r.id.toolbar); // app logo // mtoolbar.setlogo(r.drawable.app_icon); // 主标题,默认为app_label的名字 mtoolbar.settitle("title"); mtoolbar.settitletextcolor(color.yellow); // 副标题 mtoolbar.setsubtitle("sub title"); mtoolbar.setsubtitletextcolor(color.parsecolor("#80ff0000")); //侧边栏的按钮 mtoolbar.setnavigationicon(r.drawable.back); //取代原本的actionbar setsupportactionbar(mtoolbar); //设置navigationicon的点击事件,需要放在setsupportactionbar之后设置才会生效, //因为setsupportactionbar里面也会setnavigationonclicklistener mtoolbar.setnavigationonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { mtoast.settext("click navigationicon"); mtoast.show(); } }); //设置toolbar上的menuitem点击事件 mtoolbar.setonmenuitemclicklistener(new toolbar.onmenuitemclicklistener() { @override public boolean onmenuitemclick(menuitem item) { switch (item.getitemid()) { case r.id.action_edit: mtoast.settext("click edit"); break; case r.id.action_share: mtoast.settext("click share"); break; case r.id.action_overflow: //弹出自定义overflow popupmyoverflow(); return true; } mtoast.show(); return true; } }); //toolbar里面还可以包含子控件 mtoolbar.findviewbyid(r.id.btn_diy).setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { mtoast.settext("点击自定义按钮"); mtoast.show(); } }); mtoolbar.findviewbyid(r.id.tv_title).setonclicklistener(new view.onclicklistener() { @override public void onclick(view v) { mtoast.settext("点击自定义标题"); mtoast.show(); } }); } //如果有menu,创建完后,系统会自动添加到toolbar上 @override public boolean oncreateoptionsmenu(menu menu) { super.oncreateoptionsmenu(menu); getmenuinflater().inflate(r.menu.menu_main, menu); return true; } /** * 弹出自定义的popwindow */ public void popupmyoverflow() { //获取状态栏高度 rect frame = new rect(); getwindow().getdecorview().getwindowvisibledisplayframe(frame); //状态栏高度+toolbar的高度 int yoffset = frame.top + mtoolbar.getheight(); if (null == mpopupwindow) { //初始化popupwindow的布局 view popview = getlayoutinflater().inflate(r.layout.action_overflow_popwindow, null); //popview即popupwindow的布局,ture设置focusable. mpopupwindow = new popupwindow(popview, viewgroup.layoutparams.wrap_content, viewgroup.layoutparams.wrap_content, true); //必须设置backgrounddrawable后setoutsidetouchable(true)才会有效 mpopupwindow.setbackgrounddrawable(new colordrawable()); //点击外部关闭。 mpopupwindow.setoutsidetouchable(true); //设置一个动画。 mpopupwindow.setanimationstyle(android.r.style.animation_dialog); //设置gravity,让它显示在右上角。 mpopupwindow.showatlocation(mtoolbar, gravity.right | gravity.top, 0, yoffset); //设置item的点击监听 popview.findviewbyid(r.id.ll_item1).setonclicklistener(this); popview.findviewbyid(r.id.ll_item2).setonclicklistener(this); popview.findviewbyid(r.id.ll_item3).setonclicklistener(this); } else { mpopupwindow.showatlocation(mtoolbar, gravity.right | gravity.top, 0, yoffset); } } @override public void onclick(view v) { switch (v.getid()) { case r.id.ll_item1: mtoast.settext("哈哈"); break; case r.id.ll_item2: mtoast.settext("呵呵"); break; case r.id.ll_item3: mtoast.settext("嘻嘻"); break; } //点击popwindow的item后,关闭此popwindow if (null != mpopupwindow && mpopupwindow.isshowing()) { mpopupwindow.dismiss(); } mtoast.show(); } }
另外,我们的toolbar控件还用到了menu item,下面是/res/menu/menu_main.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" xmlns:tools="http://schemas.android.com/tools" tools:context=".mainactivity"> <item android:id="@+id/action_edit" android:icon="@drawable/edit" android:orderincategory="80" android:title="@string/action_edit" app:showasaction="ifroom" /> <item android:id="@+id/action_share" android:icon="@drawable/share" android:orderincategory="90" android:title="@string/action_share" app:showasaction="ifroom" /> <item android:id="@+id/action_overflow" android:orderincategory="100" android:title="@string/action_more" android:icon="@drawable/more" app:showasaction="always" /> </menu>
还有popwindow的布局,在/res/layout/action_overflow_popwindow.xml,内容如下:
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#274b5e" android:orientation="vertical" android:padding="10dp"> <linearlayout android:id="@+id/ll_item1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/app_icon" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="10dp" android:text="哈哈" android:textcolor="#ffffff" android:textsize="20sp" /> </linearlayout> <linearlayout android:id="@+id/ll_item2" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/app_icon" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="10dp" android:text="呵呵" android:textcolor="#ffffff" android:textsize="20sp" /> </linearlayout> <linearlayout android:id="@+id/ll_item3" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/app_icon" /> <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="10dp" android:text="嘻嘻" android:textcolor="#ffffff" android:textsize="20sp" /> </linearlayout> </linearlayout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。