ToolBar的使用详解及配合TabLayout

一、概述

自ToolBar的推出后，深受广大程序猿的青睐，这里根据自己的使用做一个简单的总结，以及在使用过程中所遇到的坑，作为以后一个知识点的查阅：
先看看效果图，仅仅是展示一下ToolBar和Tablayout的Demo，并未添加其他功能

二 、ToolBar的使用

• 设置stytle

  在设置ToolBar的stytle之前，先熟悉一下，安卓界面的ActionBar中各属性所对应的位置：
  

  这里为了详细讲解，改变系统自带的ActionBar的stytle，

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

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue</item>

    </style>

这里讲我开始遇到的一个小坑，最初开始按照ToolBar的要求设置是

<style name="AppTheme.Base" parent="Theme.AppCompat">

结果竟然报错：

AppCompat does not support the current theme features: { windowActionBar: false, windowActionBarOverlay: false, Android:windowIsFloating: false, windowActionModeOverlay: false, windowNoTitle: false 

找了一会的方法，经过多次尝试，将stytle改变成：

   <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">

竟然解决了，看来网上的使用教程，也会有BUG，真是纸上得来终觉浅。。。。。

• xml布局

  为了代码简洁及复用，可以使用和将ToolBar单独分理出来;

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

</android.support.v7.widget.Toolbar>
</merge>

• axtivity_main中导入ToolBar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.example.alex.toolbar.MainActivity">

    <include
        android:id="@+id/toolBar_main"
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </include>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:tabBackground="@color/yello"
                app:tabSelectedTextColor="@color/colorPrimary"
                app:tabTextColor="@color/colorAccent">

            </android.support.design.widget.TabLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager_a"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </android.support.v4.view.ViewPager>

        </LinearLayout>

        <RelativeLayout
            android:layout_width="220dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:background="#ffffff">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/arrive_now_icon" />

            <ListView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/imageView"></ListView>
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

细心的同学可以看到上面用到了TabLayout（艹，打个TabLayout竟然打出了“玉蒲团”，这搜狗。。。。），具体的TabLayout的使用后面再详解；

• Java中代码的调用

 toolbar.setLogo(R.drawable.arrive_now_icon);
        toolbar.setTitle("ToolBar");
        setSupportActionBar(toolbar);  
        toolbar.setOnMenuItemClickListener(onMenuItemClickListener);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close){

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                setTitle("OPEN");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                setTitle("ToolBar");
            }
        };

        actionBarDrawerToggle.setDrawerIndicatorEnabled(true);
        drawerLayout.setDrawerListener(actionBarDrawerToggle);

到这里有碰到了一个坑，耽误了好久，不知道使用过ToolBar的人有没有碰到过，就是左上角的图片是个箭头，而且不会随着侧滑而旋转，最后发现有两个方法没有重写：

 @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        if (actionBarDrawerToggle != null) {
            actionBarDrawerToggle.syncState();
        }
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        if (actionBarDrawerToggle != null) {
            actionBarDrawerToggle.onConfigurationChanged(newConfig);
        }
    }
}

• Menu菜单设置

xml中代码

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item android:id="@+id/action_edit"
        android:title="AA"
        android:orderInCategory="80"
        android:icon="@drawable/arrive_now_icon"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_share"
        android:title="BB"
        android:orderInCategory="90"
        android:icon="@drawable/arrive_now_icon"
        app:showAsAction="ifRoom" />

    <item android:id="@+id/action_settings"
        android:title="CC"
        android:orderInCategory="100"
        app:showAsAction="never"/>



</menu>

在Activity中导入xml界面

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

ToolBar使用：

 private Toolbar.OnMenuItemClickListener onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {


            switch (item.getItemId()){
                case R.id.action_edit:

                    break;
                case R.id.action_share:

                    break;
                case R.id.action_settings:

                    break;

            }
       return true;
        }
    };

将OnMenuItemClickListener设置给ToolBar：

toolbar.setOnMenuItemClickListener(onMenuItemClickListener);

注：如果想点击事件，手动关闭侧滑栏：

drawerLayout.closeDrawer(Gravity.LEFT);

前人填上的坑成就以后的平坦大道，到此ToolBar的使用介绍完毕，希望对大家有所帮助，

TabLayout的使用

• 导入第三方开源库

compile 'com.android.support:design:24.2.1'

• 代码中的使用

tabLayout.setupWithViewPager(viewPager);

注：设置的viewPager，在重写Adapter时需要重写getPageTitle(int position)：

 @Override
    public CharSequence getPageTitle(int position) {
        return Content.string[position];
    }

这里只是简单的使用，具体TabLayout的用法及属性请参考：Design库-TabLayout属性详解

本文源码地址