Android Toolbar 开发实践总结

初识 Toolbar

              Toolbar 是 Android 5.0 开始推出的一个 Material Design 风格的导航控件，Google非常推荐使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 ActionBar。与Actionbar 相比，Toolbar 显的要灵活很多，它不同于 Actionbar 一样,一定要固定在 Activity的顶端，而是可以放在界面的任意位置。Google 在设计Toolbar 的时候也给开发者留下了很多可定制的空间。

               这些课定制的API 如下：  

• 设置导航栏图标；
• 设置App的logo；
• 支持设置标题和子标题；
• 支持添加一个或多个的自定义控件；
• 支持Action Menu；

开始使用 Toolbar

              Toolbar 是 Android 5.0 才开始使用，Google为了将这个设计向下兼容，自然需要推出兼容版的 Toolbar 。项目工程中需要引入 appcompat-v7 的兼容包，

      compile 'com.android.support:appcompat-v7:23.4.0'

              接下来研究 Toolbar的结构

• ToolbarActivity 包含了 Toolbar 的一些基本使用，
• layout和menu文件夹分别是上面提到的两个Activity的布局文件 和 actionmenu 菜单文件。
• values中包含了一些自定义的 theme，后面用到的时候会顺带讲解。

接下来我们来看下 Toolbar 效果，这里是结合 DrawerLayout  抽屉菜单使用效果如下图。

效果图中，从左到右分别使用到了：导航栏图标，APP的Long，标题、副标题、搜索框，分享，以及ActionMenu。接下来我们来了解布局文件

首先来看在布局文件中，toolbar.xml   也就是我们所使用的  android.support.v7.widget.Toolbar 控件布局

<?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="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  这个控件需要引入自定义属性声明，相当于我们自定义控件的时候要引入自定义属性声明，下面这行代码必不可少，

          xmlns:app="http://schemas.android.com/apk/res-auto"

         否者引入的属性： app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 就会出现异常

接着来了解 Toolbar 中那些菜单选项，这里引入的是系统提供的一些菜单选项，代码有标注

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

接下来继续了解我们的首页布局，这里使用到了 android.support.v4.widget.DrawerLayout 控件，这里笔者称它为抽屉菜单，像一个抽屉一样可以拉出来，这个空间用法这里不做详细介绍，有兴趣自己百度。<include layout="@layout/toolbar" /> 这里使用 include 标签引入布局，可以优化布局。

<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=".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:background="@android:color/holo_blue_light"
            android:orientation="vertical" >
            <Button
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:text="内容界面"/>
        </LinearLayout>

        <!-- 侧滑菜单内容 必须指定其水平重力 -->
        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical" >
            <Button
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:text="菜单界面"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
 

最后我们来研究 ToolbarActivity 中究竟是如何实现的，代码如下：

public class ToolbarActivity extends ActionBarActivity {

    private Toolbar mToolbar;
    private ShareActionProvider mShareActionProvider;
    private DrawerLayout mDrawerLayout;


    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setLogo(R.mipmap.ic_launcher);

        // 标题的文字需在setSupportActionBar之前，不然会无效
        mToolbar.setTitle("主标题");
        mToolbar.setSubtitle("副标题");
        setSupportActionBar(mToolbar);

        /**
         * 设置是否显示为 Home主页
         *
         * 将此设置为 true  如果选择的  Home主页 返回主页
         */
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //获取侧滑菜单控件
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);


        //关联 Toolbar 和 DrawerLayout
        mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar,
                R.string.abc_action_bar_home_description,
                R.string.abc_action_bar_home_description_format);




        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);



        // 菜单的监听可以在toolbar里设置，
        // 也可通过Activity的onOptionsItemSelected回调方法来处理
        mToolbar.setOnMenuItemClickListener(
                new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_settings:
                                Toast.makeText(ToolbarActivity.this,
                                        "action_settings", Toast.LENGTH_SHORT).show();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_toobar, menu);
        /* ShareActionProvider配置 */
        mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(menu
                .findItem(R.id.action_share));
        Intent intent = new Intent(Intent.ACTION_SEND);
        intent.setType("text/*");
        mShareActionProvider.setShareIntent(intent);
        return super.onCreateOptionsMenu(menu);
    }
}

看到这里以为就万事大吉了嘛！没有还没完呢，接下来提示一下使用过程中遇到的一下问题

        1、在使用  Toolbar 的时候需要先隐藏掉原先的导航栏，这里我采用的是 ：

    
   Theme.AppCompat.Light.NoActionBar

         
             还有其他的设置方法，比如：

              supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏（注意，继承AppCompatActivity 可以这样使用，

              如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) ）；

            样式布局文件如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorAccent">@color/colorAccent</item>


        <!-- toolbar 颜色 -->
        <item name="colorPrimary">#4876FF</item>

        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">#3A5FCD</item>

        <!-- 窗口背景颜色 -->
        <item name="android:windowBackground">@android:color/white</item>

      <item name="searchViewStyle">@style/MySerachView</item>
    </style>

    <style name="MySerachView" parent="Widget.AppCompat.SearchView"/>

</resources>

 

       2、如果需要修改标题和副标题的字体大小、颜色、可以调用

             setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 这些API；

       3、如果需要自定义View可以在 android.support.v7.widget.Toolbar 控件的布局中嵌入自定义布局，需要注意这里的自定义布局位于title 、 subtitle 和 actionmenu 之间，这意味着，如果 title 和 subtitle 都在，且 actionmenu选项 太多的时候，留给自定义View的空间就越小；

       对Toolbar的讲解就此为止，后续在学习研究中继续补充。(*^__^*) 嘻嘻……。