推荐另一篇 Toolbar 的文章:
http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
********************************************************************************************************************
初识 Toolbar
Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在Activity的顶部,而是可以放到界面的任意位置。除此之外,在设计Toolbar 的时候,Google也留给了开发者很多可定制修改的余地,这些可定制修改的属性在API文档中都有详细介绍,如:
- 设置导航栏图标;
- 设置App的logo;
- 支持设置标题和子标题;
- 支持添加一个或多个的自定义控件;
- 支持Action Menu;
Toolbar支持的特性
总之,与 Actionbar 相比, Toolbar 让我感受到Google满满的诚意。怎样?是否已经对Toolbar 有大概的了解,跃跃欲试的感觉出来了有木有?接下来,我们就一步一步的来看如何使用Toolbar (其实是我使用Toolbar 踩坑填坑的血泪史,你们接下去看,我先擦个眼泪…. )。
开始使用 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 的运行效果
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="?attr/actionBarSize"
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 菜单项(即toolbar最右边那“三个点”的更多按钮)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@id/action_search"
android:icon="@mipmap/ic_search"
android:title="@string/menu_search" />
<item
android:id="@id/action_notification"
android:icon="@mipmap/ic_notifications"
android:title="@string/menu_notifications"/>
<item
android:id="@+id/action_item1"
android:title="@string/item_01"/>
<item
android:id="@+id/action_item2"
android:title="@string/item_02"/>
</menu>
最后到 ToolbarActivity 中调用代码拿到这 Toolbar 控件,并在代码中做各种setXXX操作。
/**
* Toolbar的基本使用
*/
public class ToolBarActivity extends AppcompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tool_bar);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// 继承的activity要是 AppcompatActivity 下面这句话setSupportActionBar才有效
// 设置后Toolbar即能取代原本的 actionbar 了
setSupportActionBar(toolbar);
try {
getSupportActionBar().setDisplayShowHomeEnabled(true); //使左上角图标是否显示,如果设成false,则没有程序图标,仅仅就个标题,否则,显示应用程序图标
getSupportActionBar().setDisplayShowTitleEnabled(false); //隐藏toolbar上的app title
getSupportActionBar().setDisplayHomeAsUpEnabled(true); //先启用home as up:即打开侧边栏那个按钮
} catch (NullPointerException e) {
e.printStackTrace();
}
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);//设置右上角的填充菜单
//设置toolbal最右边 那“三个点” 更多菜单选项监听器
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@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;
}
});
}
/**
* 开启toolbal最右边 那“三个点” 更多按钮
* (不写此方法的话那按钮不显示)
* @param menu
* @return
*/
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);
return true;
}
/**
* toolbar最左边那个打开侧滑栏的按钮
* (在home菜单被点击的时候,打开drawer;不写此方法点击那按钮会没反应)
* @param item
* @return
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home: //toolbar最左边那个按钮
mDrawerLayout.openDrawer(GravityCompat.START);//打开侧滑栏
return true;
}
return super.onOptionsItemSelected(item);
}
}
代码到此已经完成了 Toolbar 的基本使用,注意,是基本使用而已!!!!!下面有几个代码里面需要注意的地方:
- 我们在使用 Toolbar 时候需要先隐藏掉系统原先的导航栏:方法一:在style中设置一个NoActionBar的Theme。如下:
<style name="AppTheme.NoActionBar" > <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>
方法二: 直接在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中设置(这里也是最最最最最坑爹的地方,如何坑爹法,请接着往下看);
Toolbar 踩坑填坑
坑一:xml布局文件中,Toolbar属性设置无效
刚开始使用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="?attr/actionBarSize"
android:background="@color/color_0176da"
android:logo="@mipmap/ic_launcher"
android:navigationIcon="@mipmap/ic_drawer_home"
android:subtitle="456"
android:title="123">
<!--自定义控件-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clock" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
在真机跑起来之后,看到的结果是下面这样的。
Toolbar 属性设置无效
此时心中真是万千匹草泥马在奔腾,除了设置背景色和TextView有效外,说好的 logo 、 navigationIcon 、subtitle 、 title 都跑哪去了?在编译器没报错又不见效果的情况下,参考了其他开发者的用法后找到了以下的解决方案,就是在根布局中加入自定义属性的命名空间:
xmlns:toolbar="http://schemas.android.com/apk/res-auto"(这里的toolbar可以换成你想要其他命名,做过自定义控件的童鞋相比很熟悉此用法了)
然后把所有用
android:xxx 设置无效的,都用
toolbar:xxx设置即可生效。最终的布局代码如下:
(正确写法)
<?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="?attr/actionBarSize"
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>
ps:toolbar的高度可以设置成官方的【?attr/actionBarSize】如:android:layout_height="?attr/actionBarSize"
到此即可解决 xml 中属性设置失效的问题,为什么会出现这种问题呢?我猜测是因为这个控件是兼容版的控件,用 android:xxx 设置无效是的这些属性是在兼容包中,不在默认的Android SDK中,所以我们需要额外的引入。至于为什么IDE不报错,估计就是bug了吧!
Action Menu Item 的文字颜色
系统默设置了ActionMenu每个Item的文字颜色和大小,像ToolbarActivity在Google原生5.1系统下默认效果就是下面这样的
Android 5.1 默认的ActionMenu Item的风格
此时,如果我有需求要改变一下item文字颜色,应该怎么破?我按照网上比较普遍的解决方案,做了如下两步的修改操作:
在styles.xml中自定义一个Theme,并设置 actionMenuTextColor 属性(注意:不是 android:actionMenuTextColor )
<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 文字的颜色
这种方法也有一个小缺点,如果我把自定义控件换成Button,你会发现Button默认的文字颜色也变成了红色。所以,此处如果有朋友有更好的解决方案,请留言赐教。
如果你想要修改 ActionMenu Item 的文字大小,也可以在theme中设置加上如下设置
<item name="android:textSize">20sp</item>
仿知乎主页面
为了加深一下 Toolbar 的开发体验,我们使用 Toolbar 来实现知乎主页的效果!先来看下知乎主页的效果
Android 5.1上知乎主页效果图
如果前面的内容你看明白,想撸出这个界面无非是几分钟的事情,下面就直接上代码,不做赘述了。
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/ActionButton.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>
最终得到下面这样的效果
Android5.1上仿知乎主页面效果
这里在 Toolbar 设置 android:theme=”@style/Theme.ToolBar.ZhiHu” 主要是为了替换系统右上角三个点的图标,如果不设置,则会成系统默认主题的样子。
不设置Theme的效果
最后,再给知乎的主页面做个小小的优化,它在 Android 4.4 上运行还是能够看到一条黑乎乎的通知栏,为此我把 Toolbar 和Translucent System Bar 的特性结合起来,最终改进成下面的效果(附上 Android4.4 和 5.1 上的运行效果)。
Android4.4上改进版的知乎主页
Android5.1上改进版的知乎主页
如果你还不知道 Translucent System Bar 的特性怎么使用,请查看我的上一篇文章: Translucent System Bar 的最佳实践
总结
关于 Toolbar 的使用就介绍到此,本来是怀着很简单就可以上手的心态来使用,结果发现还是有很多坑需要填。果然还是验证了一句老话
纸上得来终觉浅,绝知此事要躬行
对于想要更深的了解 Toolbar 设计的童鞋,也可以看看这篇 官网文档 (自备梯子)。
同样,分享即美德,需要源代码的童鞋,请戳: https://github.com/D-clock/AndroidSystemUiTraining
【本文章转至,我稍做了修改】 http://www.codeceo.com/article/android-toolbar-develop.html