Android Toolbar详解-实现Material Design 风格的导航栏
2017-08-09 14:43
621 查看
初识 Toolbar
Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 Actionbar 。与 Actionbar 相比,Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在Activity的顶部,而是可以放到界面的任意位置。除此之外,在设计 Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍,如:设置导航栏图标;
设置App的logo;
支持设置标题和子标题;
支持添加一个或多个的自定义控件;
支持Action Menu;
开始使用 Toolbar
前面提到 Toolbar 是在 Android 5.0 才开始加上的,Google 为了将这一设计向下兼容,自然也少不了要推出兼容版的 Toolbar 。为此,我们需要在工程中引入 appcompat-v7 的兼容包,使用 android.support.v7.widget.Toolbar 进行开发。ToolbarActivity 包含了 Toolbar 的一些基本使用, ZhiHuActivity 是在熟悉了 Toolbar 后对知乎主页面的一个高仿实现。
layout和menu文件夹分别是上面提到的两个Activity的布局文件 和 actionmenu 菜单文件。
values、values-v19、values-v21 中包含了一些自定义的 theme,后面用到的时候会顺带讲解。
我们先来看一下 ToolbarActivity 的运行效果
按照效果图,从左到右分别是我们前面提及到的 导航栏图标、App的logo、标题和子标题、自定义控件、以及 ActionMenu 。接着,我们来看下布局文件和代码实现。
首先,在布局文件 activity_tool_bar.xml 中添加进我们需要的 Toolbar 控件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da"> <!--自定义控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar> </LinearLayout>
接着在 base_toolbar_menu.xml 中添加 action menu 菜单项
<?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"> <item android:id="@id/action_search" android:icon="@mipmap/ic_search" android:title="@string/menu_search" app:showAsAction="ifRoom" /> <item android:id="@id/action_notification" android:icon="@mipmap/ic_notifications" android:title="@string/menu_notifications" app:showAsAction="ifRoom" /> <item android:id="@+id/action_item1" android:title="@string/item_01" app:showAsAction="never" /> <item android:id="@+id/action_item2" android:title="@string/item_02" app:showAsAction="never" /> </menu>
最后到 ToolbarActivity 中调用代码拿到这 Toolbar 控件,并在代码中做各种setXXX操作。
/** * Toolbar的基本使用 */ public class ToolBarActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tool_bar); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标 toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo toolbar.setTitle("Title");//设置主标题 toolbar.setSubtitle("Subtitle");//设置子标题 toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListe 4000 ner() { @Override public boolean onMenuItemClick(MenuItem item) { int menuItemId = item.getItemId(); if (menuItemId == R.id.action_search) { Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_notification) { Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_item1) { Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show(); } else if (menuItemId == R.id.action_item2) { Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show(); } return true; } }); } }
代码到此已经完成了 Toolbar 的基本使用,下面有几个代码里面需要注意的地方:
我们在使用 Toolbar 时候需要先隐藏掉系统原先的导航栏,我这里直接在BaseActivity中调用 supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏(注意,我的BaseActivity是继承了AppCompatActivity的,如果是继承Activity就应该调用requestWindowFeature(Window.FEATURE_NO_TITLE));
如果你想修改标题和子标题的字体大小、颜色等,可以调用setTitleTextColor、setTitleTextAppearance、setSubtitleTextColor、setSubtitleTextAppearance 这些API;
自定义的View位于 title、subtitle 和 actionmenu 之间,这意味着,如果 title 和 subtitle 都在,且 actionmenu选项 太多的时候,留给自定义View的空间就越小;
导航图标 和 app logo 的区别在哪?如果你只设置 导航图标( or app logo) 和 title、subtitle,会发现 app logo 和 title、subtitle 的间距比较小,看起来不如 导航图标 与 它们两搭配美观;
Toolbar 和其他控件一样,很多属性设置方法既支持代码设置,也支持在xml中设置;
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" toolbar:navigationIcon="@mipmap/ic_drawer_home" toolbar:logo="@mipmap/ic_launcher" toolbar:subtitle="456" toolbar:title="123"> <!--自定义控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar> </LinearLayout>
必须设置自定义命名空间:
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
系统默设置了ActionMenu每个Item的文字颜色和大小,像ToolbarActivity在Google原生5.1系统下默认效果就是下面这样的
此时,如果我有需求要改变一下item文字颜色,应该怎么破?我按照网上比较普遍的解决方案,做了如下两步的修改操作:
在styles.xml中自定义一个Theme,并设置 android:textColorPrimary 属性
<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:textColorPrimary">@color/color_red</item> </style>
在布局文件的Toolbar中设置popupTheme(注意:是toolbar:xxx,不是android:xxx)
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" toolbar:popupTheme="@style/Theme.ToolBar.Base"> <!--自定义控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Clock" /> </android.support.v7.widget.Toolbar>
这种方法也有一个小缺点,同时改变了自定义控件文字颜色
如果你想要修改 ActionMenu Item 的文字大小,也可以在theme中设置加上如下设置
<item name="android:textSize">20sp</item>
仿知乎主页面
为了加深一下 Toolbar 的开发体验,我们使用 Toolbar 来实现知乎主页的效果!先来看下知乎主页的效果如果前面的内容你看明白,想撸出这个界面无非是几分钟的事情,下面就直接上代码,不做赘述了。
ZhiHuActivity界面代码
public class ZhiHuActivity extends BaseActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_zhi_hu); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.inflateMenu(R.menu.zhihu_toolbar_menu); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); toolbar.setTitle(R.string.home_page); toolbar.setTitleTextColor(getResources().getColor(android.R.color.white)); } }
zhihu_toolbar_menu.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"> <item android:id="@id/action_search" android:icon="@mipmap/ic_search" android:title="@string/menu_search" app:showAsAction="ifRoom" /> <item android:id="@id/action_notification" android:icon="@mipmap/ic_notifications" android:title="@string/menu_notifications" app:showAsAction="ifRoom" /> <item android:id="@id/action_settings" android:orderInCategory="100" android:title="@string/menu_settings" app:showAsAction="never" /> <item android:id="@id/action_about" android:orderInCategory="101" android:title="@string/menu_about_us" app:showAsAction="never" /> </menu>
activity_zhi_hu.xml 布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_0176da" android:theme="@style/Theme.ToolBar.ZhiHu"> </android.support.v7.widget.Toolbar> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"> <ImageView android:layout_width="60dp" android:layout_height="60dp" android:layout_centerInParent="true" android:background="@mipmap/ic_zhihu_logo" /> </RelativeLayout> </LinearLayout>
styles.xml 中的 Theme.ToolBar.ZhiHu,给 Toolbar 设置android:theme用的
<resources> ... ... <style name="Theme.ToolBar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar"> <item name="actionOverflowButtonStyle">@style/Action bb9d Button.Overflow.ZhiHu</item> </style> <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow"> <item name="android:src">@mipmap/ic_menu_more_overflow</item> </style> </resources>
最终得到下面这样的效果
这里在 Toolbar 设置 android:theme=”@style/Theme.ToolBar.ZhiHu” 主要是为了替换系统右上角三个点的图标,如果不设置,则会成系统默认主题的样子。
最后,再给知乎的主页面做个小小的优化,它在 Android 4.4 上运行还是能够看到一条黑乎乎的通知栏,为此我把 Toolbar 和 Translucent System Bar 的特性结合起来,最终改进成下面的效果(附上 Android4.4 和 5.1 上的运行效果)。
如果你还不知道 Translucent System Bar 的特性怎么使用,请查看我转载的文章:Android Translucent System Bar 开发详解-实现沉浸式通知栏(通知栏与导航栏颜色相同)
源码点击此处下载
转自:
https://github.com/D-clock/AndroidSystemUiTraining/blob/master/note/01_AndroidSystemUI%EF%BC%9AToolBar%E7%89%B9%E6%80%A7%E7%9A%84%E4%BD%BF%E7%94%A8.md
相关文章推荐
- Android Design风格实现可折叠页面CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
- 实现Material Design风格的Actionbar和Drawer侧边导航栏
- 教你轻松实现Material Design风格的知乎主页(详解多种控件的综合使用)
- Android Material Design详解(二):CollapsingToolbarLayout
- Android实现Material Design风格的设置页面(滑动开关控件)
- android Material Design之 ToolBar+TabLayout+recycleView的效果实现
- Android Material Design中的BottomNavigationView实现底部导航栏
- Material Design系列风格控件之(一)----AppBarLayout实现上滑隐藏ToolBar
- 底部导航栏(自定义View+ViewPager实现) android项目详解
- Android实现Material Design风格的设置页面(滑动开关控件)
- Android Material Design系列之使用Toolbar + DrawerLayout实现高侧滑菜单
- Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
- Android顶部(toolbar)搜索框实现的实例详解
- Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
- Android MVP设计模式登录具体实现Material Design风格
- 22—(图文详解)游戏中灵活实现动画播放!简述J2me的游戏类库与Android游戏开发
- Android 四大组件之(2)Service实现原理以及AIDL语言的使用详解
- Android实战技巧:用TextView实现Rich Text---在同一个TextView中设置不同的字体风格
- Android实战技巧:用TextView实现Rich Text---在同一个TextView中设置不同的字体风格
- 【Android】通过PopupWindow实现浏览器风格的下拉菜单