cscfas
cscfas

Android Toolbar 开发实践总结

初识 Toolbar

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

               这些课定制的API 如下：  

  • 设置导航栏图标；
  • 设置App的logo；
  • 支持设置标题和子标题；
  • 支持添加一个或多个的自定义控件；
  • 支持Action Menu；
Android Toolbar 开发实践总结_第1张图片


开始使用 Toolbar

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

              接下来研究 Toolbar的结构

Android Toolbar 开发实践总结_第2张图片

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

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

Android Toolbar 开发实践总结_第3张图片


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


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







 

注意事项：

         Toolbar  这个控件需要引入自定义属性声明，相当于我们自定义控件的时候要引入自定义属性声明，下面这行代码必不可少，

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

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


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

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

最后我们来研究 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) ）；


            样式布局文件如下：