Android5.0之Toobar的使用

Posted 2020-09-04 brave-sailor

总体上来说，Toolbar的使用可以分为两个方面，一方面是将ToolBar当作ActionBar来用，另一方面就是将Toolbar当成一个单独的控件来用，不过到目前为止我见到的大部分情况都是把Toolbar当作ActionBar来用，下面我们分别就这两种使用方式来进行说明。

1.Toolbar作为ActionBar使用

将Toolbar当作ActionBar使用首先要隐藏系统默认的ActionBar，隐藏方式其实很简单，只需要简单设置一下style就可以了，如下了：

[java] view plain copy print?

1. <style name="AppTheme.NoActionBar">  
2.     <item name="android:windowActionBar">false</item>  
3.     <item name="android:windowNoTitle">true</item>  
4.     <item name="windowActionBar">false</item>  
5.     <item name="windowNoTitle">true</item>  
6. </style>  

Android手机在3.0之前标题栏叫做titlebar，3.0之后又推出了ActionBar来代替titlebar，所以我们在使用的Toolbar的时候为了兼容早期的手机也要把titlebar隐藏掉。这两个东东都隐藏之后，在清单文件中给Activity或者App设置一下主题就可以了，我这里给Activity设置主题，如下：

[java] view plain copy print?

1. <activity android:name=".MainActivity" android:theme="@style/AppTheme.NoActionBar">  
2.     <intent-filter>  
3.         <action android:name="android.intent.action.MAIN"/>  
4.   
5.         <category android:name="android.intent.category.LAUNCHER"/>  
6.     </intent-filter>  
7. </activity>  

如此，我的MainActivity就成功的隐藏掉了ActionBar了，接下来就是怎么添加Toolbar了，我们知道在企业开发中ActionBar使用并不多，一个重要的原因就是这个东西太死板了，而且太丑了，那么Google推出Toolbar必然就要避免这些问题，so，Toolbar除了好看另一个最大的优点就是灵活，你完全可以把它当作一个普普通通的控件来使用，普通控件怎么使用呢？先在布局文件中写呗，同时，我们为了兼容Android5.0之前的手机，在使用Toolbar的时候都是使用v7包里的Toolbar，布局文件如下：

[java] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="org.mobiletrain.toolbar2.MainActivity">  
8.   
9.     <android.support.v7.widget.Toolbar  
10.         android:id="@+id/toolbar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="?attr/actionBarSize"  
13.         android:background="@color/colorPrimary"  
14.         android:popupTheme="@style/AppTheme.PopupOverlay">  
15.     </android.support.v7.widget.Toolbar>  
16. </LinearLayout>  

OK，是不是很简单呢？一个简单的布局文件就搞定了，那么这里有三个地方需要给大家解释一下，首先是toolbar的高，你可以给一个固定值，也可以参考之前ActionBar的高度，参考ActionBar高度的好处是系统会在不同的设备上自动为你调整Toolbar的高度。第二点就是background属性，使用toolbar时我们可以给toolbar设定一个背景颜色。第三就是popupTheme属性，就是弹出框的显示，这里我们一般按如下的方式来设置：

[java] view plain copy print?

1. <style name="AppTheme.PopupOverlay" parent="Theme.AppCompat.Light">  

OK，布局文件搞定之后，下来我们就来看看在MainActivity中该怎么处理：

[java] view plain copy print?

1. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
2. toolbar.setTitle("主标题");  
3. toolbar.setSubtitle("二级标题");  
4. //设置应用Logo  
5. toolbar.setLogo(R.drawable.a5k);  
6. //设置导航图标  
7. toolbar.setNavigationIcon(R.drawable.ic_menu_back);  
8. //用ToolBar代替ActionBar  
9. setSupportActionBar(toolbar);  

在布局文件中我们还是像处理普通控件一样，先是获得到这个Toolbar，然后给toolbar设置各种属性，至于这些属性具体指什么大家看下面一张图就明白了（a5k是微信中的图片，ic_menu_back是一个向前的箭头）：

可是这个导航箭头太丑了，其实这里我们用系统默认的箭头就可以了，设置方式如下：

[java] view plain copy print?

1. //设置导航图标  
2.   toolbar.setNavigationIcon(R.drawable.ic_menu_back);  
3. //用ToolBar代替ActionBar  
4. setSupportActionBar(toolbar);  
5. //显示导航按钮并使之处于可点击状态  
6. getSupportActionBar().setDisplayHomeAsUpEnabled(true);  

大家注意这里要注释掉之前设置导航图标的代码，同时getSupportActionBar().setDisplayHomeAsUpEnabled(true);要放在setSupportActionBar(toolbar);这个之后执行，因为真正的ActionBar已经被我们隐藏了，在用toolbar代替actionbar之前如果调用getSupportActionBar()会无法获取ActionBar。这样做之后，显示效果如下：

这个默认的后退按钮比起ActionBar中的后退按钮漂亮多了吧。如果你用过ActionBar里边的后退按钮你就会知道它有多丑。

OK，接下来，如果我想要在Toolbar上显示菜单项该怎么办呢？以前ActionBar的时候你怎么办现在还怎么办！

先写菜单文件，如下：

[java] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <menu xmlns:android="http://schemas.android.com/apk/res/android"  
3.       xmlns:app="http://schemas.android.com/apk/res-auto">  
4.     <item  
5.         android:id="@+id/setting"  
6.         android:icon="@drawable/a5k"  
7.         android:orderInCategory="99"  
8.         android:title="setting"  
9.         app:showAsAction="never"/>  
10.     <item  
11.         android:id="@+id/search"  
12.         android:title="search"  
13.         app:actionViewClass="android.support.v7.widget.SearchView"  
14.         app:showAsAction="always"/>  
15.     <item  
16.         android:id="@+id/share"  
17.         app:actionProviderClass="android.support.v7.widget.ShareActionProvider"  
18.         app:showAsAction="never"  
19.         android:title="share"></item>  
20. </menu>  

大家注意这里有两个地方和以前不一样，一个就是showAsAction的命名空间变为了自定义的app，还有就是actionViewClass和actionProviderClass的命名空间也变为app。OK，菜单文件写完之后，在Activity中创建菜单即可，如下：

[java] view plain copy print?

1. @Override  
2. public boolean onCreateOptionsMenu(Menu menu) {  
3.     getMenuInflater().inflate(R.menu.main, menu);  
4.     return super.onCreateOptionsMenu(menu);  
5. }  

和以前创建菜单的方式一模一样，我们再来看看显示效果：

貌似没有什么难度，然后菜单事件的处理依然在onOptionsItemSelected方法中，如下：

[java] view plain copy print?

1. @Override  
2. public boolean onOptionsItemSelected(MenuItem item) {  
3.     switch (item.getItemId()) {  
4.         case android.R.id.home:  
5.             Log.d("lenve", "onOptionsItemSelected() returned: " + 456);  
6.             break;  
7.     }  
8.     return super.onOptionsItemSelected(item);  
9. }  

2.单独使用Toolbar

你既可以把Toolbar当作ActionBar来用，也可以当作普通控件来用，虽然这种用法比较少见。当作普通控件来用的话，那我就没有必要隐藏ActionBar了（不给新的Activity在清单文件中设置我们在文章开头创建的AppTheme.NoActionBar主题即可）。那我依然是先在布局文件中来写一个Toolbar，不同的是，这次我把它放在屏幕的正中央，代码如下：

[java] view plain copy print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="org.mobiletrain.toolbar2.Main2Activity">  
8.   
9.     <android.support.v7.widget.Toolbar  
10.         android:id="@+id/toolbar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="?attr/actionBarSize"  
13.         android:layout_centerInParent="true"  
14.         android:background="@color/colorPrimary"  
15.         android:popupTheme="@style/AppTheme.PopupOverlay">  
16.     </android.support.v7.widget.Toolbar>  
17. </RelativeLayout>  

显示效果如下：

OK，Toolbar已经显示在屏幕正中央了，但是既然把它当作一个普通控件来使用，我们在怎么向Toolbar中添加菜单项呢？如下，需要Toolbar自己加载：

[java] view plain copy print?

1. @Override  
2. protected void onCreate(Bundle savedInstanceState) {  
3.     super.onCreate(savedInstanceState);  
4.     setContentView(R.layout.activity_main2);  
5.     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
6.     toolbar.inflateMenu(R.menu.main);  
7. }  

显示效果如下：

OK，接下来一个问题是怎么给这些控件设置点击事件呢，如下：

[java] view plain copy print?

1. toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
2.     @Override  
3.     public boolean onMenuItemClick(MenuItem item) {  
4.         switch (item.getItemId()) {  
5.             case R.id.search:  
6.                 Log.d("lenve", "onMenuItemClick() returned: search");  
7.                 break;  
8.             case R.id.setting:  
9.                 Log.d("lenve", "onMenuItemClick() returned: setting");  
10.                 break;  
11.             case R.id.share:  
12.                 Log.d("lenve", "onMenuItemClick() returned: share");  
13.                 break;  
14.         }  
15.         return true;  
16.     }  
17. });  

OK，基本Toolbar的使用就是这样的。