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

时间 2019-11-11

标签 android 开发 toolbar 组件用法详解栏目 Android 繁體版

原文原文链接

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

Toolbar android

Toolbar是什么？大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏，能够说是Actionbar的升级版，二者不是独立关系，要使用Toolbar仍是得跟ActionBar扯上关系的。相比Actionbar Toolbar最明显的一点就是变得很自由，可随处放置，由于它是做为一个ViewGroup来定义使用的，因此单纯使用ActionBar已经稍显过期了，它的一些方法已被标注过期。程序员

那么它怎么使用呢，首先咱们同样要用到v7的支持包，而后定义程序的主题样式，在style里得先把Actionbar去掉，有点像欲想练功，必先自宫的感受啊。以下： app

/res/values/styles.xml ide

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的主题了。颜色的属性说明，仍是下面这张图最清楚了：工具

另外，SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置，不过通常咱们用默认的就行。布局

还有咱们能够在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色：动画

/res/values-v21/styles.xml this

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： spa

/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的属性的，初上面的外还有如下的属性，都是见名知意的就不一一说明了。

而后在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> 

这一步时候程序的样子：
PS. Genymotion能够用5.0的模拟器了

能够感受到这样是否是和ActionBar没什么区别呢。诶，左边的菜单图标怎么出来的呢，其实上面还没处理到，他就是Navigation drawer了，使用新版本的v四、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的监听器设置进去，仍是比较简单的，效果：

要是须要把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

本文到此结束，须要的朋友能够参考下。