Android - ToolBar详解
来源:互联网 发布:java有哪些类 编辑:程序博客网 时间:2024/06/05 15:01
原码下载地址:
2014 的 google i/o 发表令多数人为之一亮的 material design,而 google 也从「google i/o 2014」 开始,
大家也陆陆续续地看到其更新的 android app 皆套用了这个设计介面。
当然,这个设计介面著实让大家感到惊艳外,更让 android 开发者开始担心未来 app 的界面处理了。
不过,所幸有着之前 actionbar 的经验后,android 也很快地在 support library 里面提供了相对应的 api 给开发者使用,
本篇就为各位介绍 – toolbar,这是用来取代过去 actionbar 的控件,而现在于 material design 中也对之有一个统一名称:app bar,
在未来的 android app 中,就以 toolbar 这个元件来实作之。
概述
Android 3.0 Android 推了 ActionBar 这个控件,而到了2013 年 Google 开始大力地推动所谓的 android style,
想要逐渐改善过去 android 纷乱的界面设计,希望让终端使用者尽可能在 android 手机有个一致的操作体验。
ActionBar 过去最多人使用的两大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat。既然会有本篇跟各位介绍的 Toolbar,也意味着官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性,
而在 material design 也对之做了名称的定义:App bar。
接下来将为各位分成几个阶段进行说明,如何在 android app 中用 toolbar 这个控件来做出一个基本的 app bar 喽。
总揽:
2.基础套用
这个阶段分为3个部分:
风格 (style)
界面 (layout)
程序 (java)
2.1 风格(style)
风格要调整的地方有二
一在 res/values/styles.xml中
二在 /res/values-v21/styles.xml中 (API >=21 也就是5.0及以上)
为了之后设定方便,我们先在 res/values/styles.xml 里增加一个名为 AppTheme.Base的风格
res/values/styles.xml<style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item></style>
因为此范例只使用 Toolbar,所以我们要将让原本的 ActionBar 隐藏起来,
然后将原本 AppTheme 的 parent 属性 改为上面的AppTheme.Base,代码如下:
res/values/styles.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> <del><item name="android:windowNoTitle">true</item></del> <!-- 使用 API Level 22 編譯的話,要拿掉前綴字 --> <item name="windowNoTitle">true</item> </style></resources>
再来调整Android 5.0的style: /res/values-v21/styles.xml,也将其 parent 属性改为 AppTheme.Base:
res/values-v21/styles.xml<?xml version="1.0" encoding="utf-8"?><resources> <style name="AppTheme" parent="AppTheme.Base"> </style></resources>
2.2界面(Layout)
在 activity_main.xml 里面添加 Toolbar 控件:
activity_main.xml<!-- ?attr/actionBarSize -> toolbar的高度是原先的actionbar的高度 --><android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" > </android.support.v7.widget.Toolbar>
(1)android.support.v7依赖 moduled右击/open module setting/Dependencies/右边+号/library dependencies/选择v7
(2)请记得用 support v7 里的 toolbar,不然然只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。
(3)这里需注意,要将 RelatvieLayout 里的四个方向的padding 属性去掉,并记得将原本的 Hello World 设为 layout_below=”@+id/toolbar” ,
否则会看到像下面这样的错误画面:
toobar.blog2 (后续贴上)
2.3 程序 (Java)
在 MainActivity.java 中加入 Toolbar 的声明:
MainActivity.java/onCreate()mToolbar = (Toolbar) findViewById(R.id.toolbar);// 取代原本的actionbar// 使用该方法的时候MainActivity需要继承于AppCompatActivitysetSupportActionBar(toolbar);
声明后,再将之用 setSupportActionBar 设定,Toolbar即能取代原本的 actionbar 了,此阶段完成画面如下:
toolbar.blog3(后续补上)
- 自定义颜色(Customization color)
toolbar.blog4
上图是将本阶段要完成的结果画面做了标示,结合下面的描述希望大家能明白。
属性介绍:
(1)colorPrimaryDark(状态栏底色):在风格 (styles) 或是主题 (themes) 里进行设定。
(2)App bar底色 这个设定分为二,
1’若你的 android app 仍是使用 actionbar ,则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可;
2’若是采用 toolbar 的话,则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。
(3)navigationBarColor(导航栏底色)
仅能在 API v21 也就是 Android 5 以后的版本中使用, 因此要将之设定在 res/values-v21/styles.xml 里面。
(4)windowBackground - 主视窗底色
因此这个阶段,我们需要做的设定有三个地方
res/values/styles.xml (追加状态栏以及Window的底色)<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> <del><item name="android:windowNoTitle">true</item></del> <!-- 使用 API Level 22 編譯的話,要拿掉前綴字 --> <item name="windowNoTitle">true</item>+ <!--Status bar color-->+ <item name="colorPrimaryDark">@color/accent_material_light</item>+ <!-- Actionbar color -->+ <!-- 若是使用的是ActionBar,colorPrimary属性就够了; 但是若是ToolBar 还需要在toolbar 控件中设置background 属性 -->+ <item name="colorPrimary">@color/accent_material_dark</item>+ <!-- Window color-->+ <item name="android:windowBackground">@color/dim_foreground_material_dark</item> </style></resources>
res/values-v21/styles.xml (追加底部导航栏底色)<?xml version="1.0" encoding="utf-8"?><resources> <style name="AppTheme" parent="AppTheme.Base">+ <!-- Navigation bar color -->+ <item name="android:navigationBarColor">@color/accent_material_light</item> </style></resources>
activity_main.xml (追加Toolbar底色)<!-- ?attr/actionBarSize -> toolbar的高度是原先的actionbar的高度 --><android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" + android:background="?attr/colorPrimary" ></android.support.v7.widget.Toolbar>
最后,再来看一下结果画面(只看颜色)
Toolbar.blog1
4.控件(component)
在
MainActivity.java/onCreat()mToolbar = (Toolbar) findViewById(R.id.toolbar);// App LogomToolbar.setLogo(R.drawable.ic_launcher);// TitlemToolbar.setTitle("My Title");// Sub TitlemToolbar.setSubtitle("Sub title");// 取代原本的actionbar// 使用该方法的时候MainActivity需要继承于AppCompatActivitysetSupportActionBar(mToolbar);// Navigation Icon 要設定在 setSupoortActionBar(...) 后才有作用// 否則會出現 back button,而不是预想设定的IconmToolbar.setNavigationIcon(R.drawable.ab_android);这边要留意的是setNavigationIcon需要放在 setSupportActionBar之后才会生效
再来看菜单部分,需要先在res/menu/menu_main.xml左定义:
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"> <!-- 1.alaways:这个值会使菜单项一直显示在ActionBar上。 2.ifRoom:如果有足够的空间,这个值会使菜单显示在ActionBar上。 3.never:这个值菜单永远不会出现在ActionBar是。 4.withText:这个值使菜单和它的图标,菜单文本一起显示。 --> <!-- orderInCategory 决定item的顺序, 值越大,优先级越低--> <item android:id="@+id/action_edit" android:title="edit" android:orderInCategory="80" android:icon="@drawable/abc_ic_ab_back_mtrl_am_alpha" app:showAsAction="ifRoom" /> <item android:id="@+id/action_share" android:title="edit" android:orderInCategory="90" android:icon="@drawable/abc_ic_menu_share_mtrl_alpha" app:showAsAction="ifRoom" /> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never"/> <item android:id="@+id/action_1" android:title="action_1" android:orderInCategory="70" app:showAsAction="never"/> <item android:id="@+id/action_2" android:title="action_2" android:orderInCategory="40" app:showAsAction="never"/> <item android:id="@+id/action_overflow" android:title="action_overflow" android:orderInCategory="10" app:showAsAction="never"/></menu>
再回到MainActivity.java 中加入OnMenuItemClickListener 的监听者:
//设置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_settings: mToast.setText("seting"); break; case R.id.action_1: mToast.setText("1"); break; case R.id.action_2: mToast.setText("2"); break; case R.id.action_overflow: //弹出自定义overflow popUpMyOverflow(); return true; } mToast.show(); return true; }});注意拉:这个时候的按钮响应都必须在setOnMenuItemClickListener写,不可以在重载的onOptionsItemSelected中进行相应了
此外增加了点击action_overflow,弹出自定义的popWindow
/**
* 弹出自定义的popWindow
* 并且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); }}@Overridepublic 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();}
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/abc_ic_menu_share_mtrl_alpha" /> <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/abc_ic_menu_share_mtrl_alpha" /> <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/abc_ic_menu_share_mtrl_alpha" /> <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>
5.总结
(1)colorPrimaryDark
状态栏背景色。
在 style 的属性中设置。
(2)textColorPrimary
App bar 上的标题与更多菜单中的文字颜色。
(3)App bar 的背景色
Actionbar 的背景色设定在 style 中的 colorPrimary。
Toolbar 的背景色在layout文件中设置background属性。
(4)colorAccent
各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
(5)colorControlNormal
各控制元件的预设颜色。
在 style 的属性中设置
(6)windowBackground
App 的背景色。
(7)navigationBarColor
导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
在 style 的属性中设置
最后需要注意的是:使用material主题的时候,必须设定targetSdkVersion = 21,否则界面看起来是模糊的
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- Android toolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- Android ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- android:ToolBar详解
- Activity管理器用来增加,移除Activity
- 【STL】 map、set;
- springMVC+velocity配置
- 文章标题
- iOS 自定义加密算法——原理
- Android - ToolBar详解
- terminate called after throwing an instance of 'std::length_error
- 【前端】web安全字体
- Beyond Compare文件比较四种结果分析
- 749 B. Parallelogram is Back codeforces
- 编程实现
- basic use of sidekiq (2)
- nodemcu使用心得(一)模块的测试和烧写固件
- leetcode_434. Number of Segments in a String 计算字符串中段的个数,只需遍历一遍字符串