Android开发——Toolbar组件用法详解

原创
2015/12/02 11:02
阅读数 892


本文重点讲述Android Toolbar的用法,包括它的一些概念和注意事项,现在总结出来分享给Android程序员兄弟们。本文的例子都是基于Android5.0+。

Toolbar

Toolbar是什么?大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏,可以说是Actionbar的升级版,两者不是独立关系,要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar Toolbar最明显的一点就是变得很自由,可随处放置,因为它是作为一个ViewGroup来定义使用的,所以单纯使用ActionBar已经稍显过时了,它的一些方法已被标注过时。

那么它怎么使用呢,首先我们一样要用到v7的支持包,然后定义程序的主题样式,在style里得先把Actionbar去掉,有点像欲想练功,必先自宫的感觉啊。如下:

/res/values/styles.xml

1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
2     <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
3         <!-- toolbar(actionbar)颜色 -->
4         <item name="colorPrimary">#4876FF</item>
5         <!-- 状态栏颜色 -->
6         <item name="colorPrimaryDark">#3A5FCD</item>
7         <!-- 窗口的背景颜色 -->
8         <item name="android:windowBackground">@android :color/white</item>
9         <!-- SearchView -->
10         <item name="searchViewStyle">@style/MySearchViewStyle</item>
11     </style>
12     <style name="AppTheme" parent="@style/AppBaseTheme"></style>
13     <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
14         <!--
15     Background for the search query section (e.g. EditText)
16     <item name="queryBackground">...</item>
17     Background for the actions section (e.g. voice, submit)
18     <item name="submitBackground">...</item>
19     Close button icon
20     <item name="closeIcon">...</item>
21     Search button icon
22     <item name="searchIcon">...</item>
23     Go/commit button icon
24     <item name="goIcon">...</item>
25     Voice search button icon
26     <item name="voiceIcon">...</item>
27     Commit icon shown in the query suggestion row
28     <item name="commitIcon">...</item>
29     Layout for query suggestion rows
30     <item name="suggestionRowLayout">...</item>
31         -->
32     </style>
33 </resources>

去除Actionbar最简单的方法就是直接继承NoActionBar的主题了。颜色的属性说明,还是下面这张图最清楚了:

android5.0+(Toolbar)

另外,SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置,不过一般我们用默认的就行。

还有我们可以在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色:

/res/values-v21/styles.xml

1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
2     <style name="AppTheme" parent="@style/AppBaseTheme">
3         <!-- 底部导航栏颜色 -->
4         <item name="android:navigationBarColor">#4876FF</item>
5     </style>
6 </resources>

设置好主题的下一步工作:
在xml的layout中定义一个Toolbar:

/layout/toolbar.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
3     xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"
4     android:id="@+id/toolbar"
5     android:layout_width="match_parent"
6     android:layout_height="wrap_content"
7     android:background="?attr/colorPrimary"
8     android:minHeight="?attr/actionBarSize"
9     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
10     app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >
11 </android.support.v7.widget.Toolbar>

我们把toolbar作为一个独立的布局xml,方便在其他布局里include进去。可以看到我们在这里是可以设置Toolbar的属性的,初上面的外还有以下的属性,都是见名知意的就不一一说明了。

android5.0+(Toolbar)

然后在activity的布局里把它include进去就行了,当然一般把它放到最上面了,有需要你是可以把它放到中间、底部或其它位置的,可见它的自由度是很高的。在下一步呢就到代码了,在onCreate中:

1 mToolbar = (Toolbar) findViewById(R.id.toolbar);
2 // toolbar.setLogo(R.drawable.ic_launcher);
3 mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前,不然会无效
4 // toolbar.setSubtitle("副标题");
5 setSupportActionBar(mToolbar);
6 /* 这些通过ActionBar来设置也是一样的,注意要在setSupportActionBar(toolbar);之后,不然就报错了 */
7 // getSupportActionBar().setTitle("标题");
8 // getSupportActionBar().setSubtitle("副标题");
9 // getSupportActionBar().setLogo(R.drawable.ic_launcher);
10 /* 菜单的监听可以在toolbar里设置,也可以像ActionBar那样,通过Activity的onOptionsItemSelected回调方法来处理 */
11 mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
12 @Override
13 public boolean onMenuItemClick(MenuItem item) {
14 switch (item.getItemId()) {
15 case R.id.action_settings:
16 Toast.makeText(MainActivity.this, "action_settings", 0).show();
17 break;
18 case R.id.action_share:
19 Toast.makeText(MainActivity.this, "action_share", 0).show();
20 break;
21 default:
22 break;
23 }
24 return true;
25 }
26 });

上面关键的一点就是setSupportActionBar(mToolbar);把Toolbar当做ActionBar给设置了。menu还是可以像ActionBar一样用和处理的:

res/menu/main.xml

1 <menu xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:app="http://schemas.android.com/apk/res-auto"
3     xmlns:tools="http://schemas.android.com/tools"
4     tools:context=".MainActivity" >
5     <item
6         android:id="@+id/ab_search"
7         android:orderInCategory="80"
8         android:title="action_search"
9         app:actionViewClass="android.support.v7.widget.SearchView"
10         app:showAsAction="ifRoom"/>
11     <item
12         android:id="@+id/action_share"
13         android:orderInCategory="90"
14         android:title="action_share"
15         app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
16         app:showAsAction="ifRoom"/>
17     <item
18         android:id="@+id/action_settings"
19         android:orderInCategory="100"
20         android:title="action_settings"
21         app:showAsAction="never"/>
22 </menu>

这一步时候程序的样子:
android5.0+(Toolbar)   PS.  Genymotion可以用5.0的模拟器了

可以感觉到这样是不是和ActionBar没什么区别呢。诶,左边的菜单图标怎么出来的呢,其实上面还没处理到,他就是Navigation drawer了,使用新版本的v4、v7库的drawer明显的一点是它带了一个酷酷的交互动画(请看最后的gif图)。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面当然也是跟着代码来.

/layout/activity_main.xml

1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5     android:orientation="vertical"
6     tools:context="com.example.toolbar.MainActivity" >
7     <include layout="@layout/toolbar" />
8     <android.support.v4.widget.DrawerLayout
9         android:id="@+id/drawer"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent" >
12         <!-- 内容界面 -->
13         <LinearLayout
14             android:layout_width="match_parent"
15             android:layout_height="match_parent"
16             android:orientation="vertical" >
17             <com.example.toolbar.widget.PagerSlidingTabStrip
18                 android:id="@+id/tabs"
19                 android:layout_width="match_parent"
20                 android:layout_height="48dip" >
21             </com.example.toolbar.widget.PagerSlidingTabStrip>
22             <android.support.v4.view.ViewPager
23                 android:id="@+id/pager"
24                 android:layout_width="match_parent"
25                 android:layout_height="match_parent" >
26             </android.support.v4.view.ViewPager>
27         </LinearLayout>
28         <!-- 侧滑菜单内容 -->
29         <LinearLayout
30             android:id="@+id/drawer_view"
31             android:layout_width="match_parent"
32             android:layout_height="match_parent"
33             android:layout_gravity="start"
34             android:background="@drawable/drawer"
35             android:orientation="vertical"
36             android:padding="8dp" >
37             <TextView
38                 android:layout_width="match_parent"
39                 android:layout_height="match_parent" />
40         </LinearLayout>
41     </android.support.v4.widget.DrawerLayout>
42 </LinearLayout>

Pager的东西可以先忽略,后面会说到。侧滑菜单的内容为简单起见直接先用图片来演示了。可以看到布局的设置大同小异,不同点在代码中:

1 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
2 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
3 mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
4 R.string.drawer_close);
5 mDrawerToggle.syncState();
6 mDrawerLayout.setDrawerListener(mDrawerToggle);


先把图标设置显示出来,然后把ActionBarDrawerToggle作为DrawerLayout的监听器设置进去,还是比较简单的,效果:

android5.0+(Toolbar)

要是需要把drawer覆盖toolbar怎么办呢?需要稍微调整一下界面的布局位置就行了,效果就不贴上来了(脑补,或者改下源码的setContentView运行):

1 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:id="@+id/drawer"
4     android:layout_width="match_parent"
5     android:layout_height="match_parent"
6     android:fitsSystemWindows="true" >
7     <LinearLayout
8         android:layout_width="match_parent"
9         android:layout_height="match_parent"
10         android:orientation="vertical"
11         tools:context="com.example.toolbar.MainActivity" >
12         <include layout="@layout/toolbar" />
13         <!-- 内容界面 -->
14         <LinearLayout
15             android:layout_width="match_parent"
16             android:layout_height="match_parent"
17             android:background="@drawable/content"
18             android:orientation="vertical" >
19             <com.example.toolbar.widget.PagerSlidingTabStrip
20                 android:id="@+id/tabs"
21                 android:layout_width="match_parent"
22                 android:layout_height="48dip"
23                 android:visibility="invisible" >
24             </com.example.toolbar.widget.PagerSlidingTabStrip>
25             <android.support.v4.view.ViewPager
26                 android:id="@+id/pager"
27                 android:layout_width="match_parent"
28                 android:layout_height="match_parent"
29                 android:visibility="invisible" >
30             </android.support.v4.view.ViewPager>
31         </LinearLayout>
32     </LinearLayout>
33     <!-- 侧滑菜单内容 -->
34     <LinearLayout
35         android:id="@+id/drawer_view"
36         android:layout_width="match_parent"
37         android:layout_height="match_parent"
38         android:layout_gravity="start"
39         android:background="@drawable/drawer"
40         android:orientation="vertical"
41         android:clickable="true"
42         android:padding="8dp" >
43         <TextView
44             android:layout_width="match_parent"
45             android:layout_height="match_parent" />
46     </LinearLayout>
47 </android.support.v4.widget.DrawerLayout>

Demo源码下载地址:http://download.csdn.net/detail/bbld_/8191251

依赖库android-support-v7-appcompat.rar with Palette : http://download.csdn.net/detail/bbld_/8382913 

本文到此结束,需要的朋友可以参考下。
展开阅读全文
打赏
0
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部