Material Design：Toolbar的使用

前言：
顾名思义，Toolbar就是应用的工具栏，是android L引入的新控件, 用来替代ActionBar一个Activity可以有多个Toolbar，你也可以把toolbar放在任何位置，因为它是作为一个ViewGroup来定义使用的。
Toolbar配合官方Material Design支持库能展示很酷炫的效果，比如配合AppBar，CoordinatorLayout，NestedScorllView，Collapsing Toolbar Layout等。本文将介绍Toolbar的全方位使用，至于那些酷炫的效果，期待我以后的文章放出吧。
参考文档：

Toolbar.png

（一）建立Toolbar

  • extend AppCompatAcitivity
  • NoActionBar主题
  • setSupportActionBar()
1. 加入v7 appcompat库

在build.gradle(Model:app)中声明

dependencies {
 compile 'com.android.support:appcompat-v7:23.3.0'  
}

2. 继承AppCompatAcitivity

public class MainActivity extends AppCompatActivity {
  // ...
}

3. 设置manifest或styles

在manifest中，把<application>中的主题设置为NoActionBar主题，用以取消系统默认的ActionBar

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        <!--      ...      -->
</application>

当然，你也可以直接在values/styles定制自己的style，并且在manifest中引用这个style，具体代码如下：

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!--      ...      -->
</application>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->    
    <item name="colorPrimary">@color/colorPrimary</item>    
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    
    <item name="colorAccent">@color/colorAccent</item></style>

注意：引用定制的style，则style中的主题必须定为NoActionBar主题

4. 在layout中加入Toolbar组件

MainActivity的layout布局如下：

<?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">       
   
        <include layout="@layout/toolbar_layout"/>   
</LinearLayout>

为了方便Toolbar的调用，可以把Toolbar封装成一个单独的layout，并且在需要使用到它的时候在布局中include这个layout，封装的Toolbar layout如下：

<?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-auto"      
        android:id="@+id/toolbar"      
        android:layout_width="match_parent"      
        android:layout_height="?attr/actionBarSize"      
        android:background="?attr/colorPrimary"      
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"      
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">  
  
</android.support.v7.widget.Toolbar>

5. 自定义Toolbar

可以自定义Toolbar各个部分的颜色，自定义的地方包括：
Toolbar可以自定义的地方包括：

状态栏颜色(Status Bar/colorPrimaryDark)(只在api21及以上有效)
标题栏背景颜色(ToolBar/colorPrimary)
弹出菜单背景颜色(OptionMenu)
内容区域背景颜色(Background)
导航栏颜色(NavigationBar)(只在api21及以上有效)
标题文字颜色 (TitleBarTextColor/TextColorPrimary)
弹出菜单文字颜色(TextColor)
内容文字颜色(TextColor)
控件颜色(ColorAccent)

自定义toolbar.jpg

可以在res/values/下修改color.xml文件，并添加使用到的颜色建议参考google给出的color style 规范(自备梯子)，然后再在Toolbar的布局下添加各项属性。

6. 建立Toolbar

在Activity中的onCreate()方法中，调用setSupportActionBar() 方法建立Toolbar

@Override
 protected void onCreate(Bundle savedInstanceState) {  
        setContentView(R.layout.activity_main);  
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
        setSupportActionBar(toolbar);   
        //...   
}

通过以上步骤，你已经在Activity中建立了一个Toolbar，这时候你可以通过V7 appcompat支持库的ActionBar类提供的各种实用方法。这种方法可以让你做一些有用的事情，如隐藏和显示应用程序栏。
要使用这些实用方法，需要你调用活动的getsupportactionbar()方法，此方法返回一个appcompat ActionBar对象引用。一旦你获得了该对象引用，你可以调用任何的ActionBar的方法调整应用程序栏。例如，调用ActionBar.hide()方法隐藏应用程序栏，建议可以看一下关于ActionBar类的官方API文档 （自备梯子）。

（二）在Toolbar中添加操作按钮

  • menu
  • onCreateOptionsMenu()
  • onOptionsItemSelected()

1. 添加操作按钮

Toolbar上所有的操作按钮和下拉条目都需要在menu中定义，res/menu/目录下新建一个xml文件，在该文件下定义Toolbar所需要的操作按钮，代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android" >   
  
         <!-- "Mark Favorite", should appear as action button if possible --> 
        <item  
                android:id="@+id/action_favorite"  
                android:icon="@drawable/ic_favorite_black_48dp"  
                android:title="@string/action_favorite"  
                app:showAsAction="ifRoom"/>  
   
        <!-- Settings, should always be in the overflow -->  
        <item   
                android:id="@+id/action_settings"   
                android:title="@string/action_settings"   
                app:showAsAction="never"/>
  
</menu>

app:showAsAction属性指定了这个操作按钮是否显示在Toolbar上。 ifRoom作用是：如果Toolbar上有足够的空间，则在Toolbar上显示为一个操作按钮；如果没有足够的空间，则在下拉菜单列表中。never的作用是：设置操作按钮在下拉菜单中显示，而不在Toolbar中显示。

2. 设置操作按钮的监听事件

在menu设置了显示在Toolbar上的item之后，需要把Toolbar和menu关联才能显示定义的item，重写Activity提供的onCreateOptionsMenu()方法可以关联Toolbar和menu。

@Override
public boolean onCreateOptionsMenu(Menu menu) {      
        // Inflate the menu; this adds items to the action bar if it is present.      
        getMenuInflater().inflate(R.menu.menu_main,menu);      
        return true;  
}

这样，你就能在Toolbar上看到你关联的item了，然后重写onOptionsItemSelected()方法就可以对Toolbar的按钮设置监听。

@Override
 protected boolean onOptionsItemSelected(MenuItem item) {  
        Intent intent;  
        switch (item.getItemId()) {  
        case R.id.action_favorite:    
            // User chose the "Favorite" action, mark the current item
            // as a favorite...
            return true;   
        case R.id.action_favorite: 
            // User chose the "Favorite" action, mark the current item    
            // as a favorite...            
            return true;        
        default:            
            // If we got here, the user's action was not recognized.   
            // Invoke the superclass to handle it.            
            return super.onOptionsItemSelected(item);
        }  
}

（三）添加Toolbar的返回按钮

  • getSupportActionBar()
  • setDisplayHomeAsUpEnabled(true)
@Override
 protected void onCreate(Bundle savedInstanceState) {  
        setContentView(R.layout.activity_main);  
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
        setSupportActionBar(toolbar);     
        if(getSupportActionBar() != null)  
                // Enable the Up button 
                getSupportActionBar().setDisplayHomeAsUpEnabled(true);   
        }
        //...   
}

（四）添加Action View和Action Provider按钮

本节介绍如何添加两种通用组件——action view 和 action provider

action view是一个能提供的丰富功能的组件。例如，搜索视图(search action view)允许用户在Toolbar中输入搜索文本，而不用改变Activity或Fragment。

action provider是一个可定制的布局的组件，当用户点击它，它能控制支配你想以任何方式定义的操作。例如，action provider能够响应一个点击事件来展示菜单项。

安卓的支持库提供了一些专门的action view和action provider。例如，使使用SearchView控件实现搜索查询功能，使用ShareActionProvider控件与其他应用程序共享信息。你也可以定义自己的action view和action provider。

1.action view：

在Toolbar关联的menu中创建新的<item>来添加action view
(1)actionViewClass：实现该控件的类。
(2)actionLayout:描述该空间的布局资源。
设置showAsAction属性为"ifRoom|collapseActionView"或者"never|collapseActionView"。collapseActionView标志指明当用户不再和它交互时控件该如何展示：在Toolbar上以小图标显示，在下拉菜单下以一个菜单项显示。当用户和action view交互时，它将在Toolbar上扩展。
例如下面添加一个SearchView：

<item android:id="@+id/action_search"
     android:title="@string/action_search"
     android:icon="@drawable/ic_search"
     app:showAsAction="ifRoom|collapseActionView"
     app:actionViewClass="android.support.v7.widget.SearchView" />
SearchView.png

如果你需要配置控件，那么在onCreateOptionsMenu()回调函数下，通过调用静态getActionView()方法获取action views的对象引用。例如，下面代码中对SearchView的对象引用：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_actions, menu);    
   MenuItem searchItem = menu.findItem(R.id.action_search);  
    SearchView searchView =
             (SearchView)MenuItemCompat.getActionView(searchItem);   
    MenuItemCompat.getActionView(searchItem);
    // Configure the search info and add any event listeners...      
    return super.onCreateOptionsMenu(menu); 
}
响应action view的扩展
  • onMenuItemActionCollapse()
  • onMenuItemActionExpand()

设置监听，当SearchView折叠和扩展时的响应事件，代码如下：

@Override
public boolean onCreateOptionsMenu(Menu menu) { 
     getMenuInflater().inflate(R.menu.options, menu);    
     // Define the listener    
    OnActionExpandListener expandListener = new OnActionExpandListener() {            
        @Override   
        public boolean onMenuItemActionCollapse(MenuItem item) {   
            // Do something when action item collapses      
             return true;     //Return true to collapse action view   
        }
        @Override  
        public boolean onMenuItemActionExpand(MenuItem item) {   
             // Do something when expanded   
             return true;      // Return true to expand action view  
        }   
};
// Get the MenuItem for the action item   MenuItem actionMenuItem = menu.findItem(R.id.myActionItem);    
// Assign the listener to that action item    
MenuItemCompat.setOnActionExpandListener(actionMenuItem, expandListener);    
// Any other things you have to do when creating the options menu…    
return true;  
}

2.action provider：

下面将声明一个ShareActionProvider，这是一种在支持库中定义的允许当前应用与其他应用分享数据的控件，和action view差不多，直接贴代码：

<item android:id="@+id/action_share"        
    android:title="@string/share"    
    app:showAsAction="ifRoom"   
    app:actionProviderClassapp:actionProviderClass="  
    android.support.v7.widget.ShareActionProvider" />

这里不需要为控件声明一个图标，因为ShareActionProvider提供自己的图标。

总结：Toolbar的基本用法差不多到此结束，以后将继续推出有关user interface(用户界面)的文章，刚入门安卓，也是第一次发表文章，有错误请指正，共同进步，与诸君共勉。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容