android5.0+(Toolbar)

Toolbar

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

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

/res/values/styles.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

< resources  xmlns:android = "http://schemas.android.com/apk/res/android" >      < style  name = "AppBaseTheme"  parent = "Theme.AppCompat.Light.NoActionBar" >          <!-- toolbar（actionbar）颜色 -->          < item  name = "colorPrimary" >#4876FF</ item >          <!-- 状态栏颜色 -->          < item  name = "colorPrimaryDark" >#3A5FCD</ item >          <!-- 窗口的背景颜色 -->          < item  name = "android:windowBackground" >@android:color/white</ item >          <!-- SearchView -->          < item  name = "searchViewStyle" >@style/MySearchViewStyle</ item >      </ style >      < style  name = "AppTheme"  parent = "@style/AppBaseTheme" ></ style >      < style  name = "MySearchViewStyle"  parent = "Widget.AppCompat.SearchView" >          <!--      Background for the search query section (e.g. EditText)      <item name="queryBackground">...</item>      Background for the actions section (e.g. voice, submit)      <item name="submitBackground">...</item>      Close button icon      <item name="closeIcon">...</item>      Search button icon      <item name="searchIcon">...</item>      Go/commit button icon      <item name="goIcon">...</item>      Voice search button icon      <item name="voiceIcon">...</item>      Commit icon shown in the query suggestion row      <item name="commitIcon">...</item>      Layout for query suggestion rows      <item name="suggestionRowLayout">...</item>          -->      </ style > </ resources >

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

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

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

/res/values-v21/styles.xml

?

1 2 3 4 5 6

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

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

/layout/toolbar.xml

?

1 2 3 4 5 6 7 8 9 10 11

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

mToolbar = (Toolbar) findViewById(R.id.toolbar); // toolbar.setLogo(R.drawable.ic_launcher); mToolbar.setTitle( "Rocko" ); // 标题的文字需在setSupportActionBar之前，不然会无效 // toolbar.setSubtitle("副标题"); setSupportActionBar(mToolbar); /* 这些通过ActionBar来设置也是一样的，注意要在setSupportActionBar(toolbar);之后，不然就报错了 */ // getSupportActionBar().setTitle("标题"); // getSupportActionBar().setSubtitle("副标题"); // getSupportActionBar().setLogo(R.drawable.ic_launcher); /* 菜单的监听可以在toolbar里设置，也可以像ActionBar那样，通过Activity的onOptionsItemSelected回调方法来处理 */ mToolbar.setOnMenuItemClickListener( new  Toolbar.OnMenuItemClickListener() { @Override public  boolean  onMenuItemClick(MenuItem item) { switch  (item.getItemId()) { case  R.id.action_settings: Toast.makeText(MainActivity. this ,  "action_settings" ,  0 ).show(); break ; case  R.id.action_share: Toast.makeText(MainActivity. this ,  "action_share" ,  0 ).show(); break ; default : break ; } return  true ; } });

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

res/menu/main.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< 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"  >      < item          android:id = "@+id/ab_search"          android:orderInCategory = "80"          android:title = "action_search"          app:actionViewClass = "android.support.v7.widget.SearchView"          app:showAsAction = "ifRoom" />      < item          android:id = "@+id/action_share"          android:orderInCategory = "90"          android:title = "action_share"          app:actionProviderClass = "android.support.v7.widget.ShareActionProvider"          app:showAsAction = "ifRoom" />      < item          android:id = "@+id/action_settings"          android:orderInCategory = "100"          android:title = "action_settings"          app:showAsAction = "never" /> </ menu >

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

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

/layout/activity_main.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

< LinearLayout  xmlns:android = "http://schemas.android.com/apk/res/android"      xmlns:tools = "http://schemas.android.com/tools"      android:layout_width = "match_parent"      android:layout_height = "match_parent"      android:orientation = "vertical"      tools:context = "com.example.toolbar.MainActivity"  >      < include  layout = "@layout/toolbar"  />      < android.support.v4.widget.DrawerLayout          android:id = "@+id/drawer"          android:layout_width = "match_parent"          android:layout_height = "match_parent"  >          <!-- 内容界面 -->          < LinearLayout              android:layout_width = "match_parent"              android:layout_height = "match_parent"              android:orientation = "vertical"  >              < com.example.toolbar.widget.PagerSlidingTabStrip                  android:id = "@+id/tabs"                  android:layout_width = "match_parent"                  android:layout_height = "48dip"  >              </ com.example.toolbar.widget.PagerSlidingTabStrip >              < android.support.v4.view.ViewPager                  android:id = "@+id/pager"                  android:layout_width = "match_parent"                  android:layout_height = "match_parent"  >              </ android.support.v4.view.ViewPager >          </ LinearLayout >          <!-- 侧滑菜单内容 -->          < LinearLayout              android:id = "@+id/drawer_view"              android:layout_width = "match_parent"              android:layout_height = "match_parent"              android:layout_gravity = "start"              android:background = "@drawable/drawer"              android:orientation = "vertical"              android:padding = "8dp"  >              < TextView                  android:layout_width = "match_parent"                  android:layout_height = "match_parent"  />          </ LinearLayout >      </ android.support.v4.widget.DrawerLayout > </ LinearLayout >

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

?

1 2 3 4 5 6

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

< android.support.v4.widget.DrawerLayout  xmlns:android = "http://schemas.android.com/apk/res/android"      xmlns:tools = "http://schemas.android.com/tools"      android:id = "@+id/drawer"      android:layout_width = "match_parent"      android:layout_height = "match_parent"      android:fitsSystemWindows = "true"  >      < LinearLayout          android:layout_width = "match_parent"          android:layout_height = "match_parent"          android:orientation = "vertical"          tools:context = "com.example.toolbar.MainActivity"  >          < include  layout = "@layout/toolbar"  />          <!-- 内容界面 -->          < LinearLayout              android:layout_width = "match_parent"              android:layout_height = "match_parent"              android:background = "@drawable/content"              android:orientation = "vertical"  >              < com.example.toolbar.widget.PagerSlidingTabStrip                  android:id = "@+id/tabs"                  android:layout_width = "match_parent"                  android:layout_height = "48dip"                  android:visibility = "invisible"  >              </ com.example.toolbar.widget.PagerSlidingTabStrip >              < android.support.v4.view.ViewPager                  android:id = "@+id/pager"                  android:layout_width = "match_parent"                  android:layout_height = "match_parent"                  android:visibility = "invisible"  >              </ android.support.v4.view.ViewPager >          </ LinearLayout >      </ LinearLayout >      <!-- 侧滑菜单内容 -->      < LinearLayout          android:id = "@+id/drawer_view"          android:layout_width = "match_parent"          android:layout_height = "match_parent"          android:layout_gravity = "start"          android:background = "@drawable/drawer"          android:orientation = "vertical"          android:clickable = "true"          android:padding = "8dp"  >          < TextView              android:layout_width = "match_parent"              android:layout_height = "match_parent"  />      </ LinearLayout > </ 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