Android中Toolbar的使用

前言

曾在罗辑思维看到过这样一段话：人做一切都应该是为了自己。
做工作，是为了自己的能力有成长。
做公益，是为了自己对社会有担当。
着装整洁，是为了对自己的每一刻时光负责。

简介

今天给大家带来的是android中Toolbar的相关用法，我们直接来看下效果图。

效果图

实现步骤

1. materialMenu的使用

为了实现效果图中的点击icon切换动画，我们需要引入materialMenu的library。
直接在build.gradle中添加依赖：

compile 'com.balysv.materialmenu:material-menu:2.0.0'

2. 更改theme主题

<!-- Base application theme. -->
    <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>

这里我们使用的是NoActionBar的主题。

3. xml使用

 <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--include进来的是效果图中的button布局-->
        <include
            android:id="@+id/state_view"
            layout="@layout/state_layout" />

        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/colorOrange"
            android:orientation="vertical">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="左边的布局" />
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>

4. MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    /**
     * 用来给Toolbar设置NavigationIcon，实现icon的动画切换
     */
    private MaterialMenuDrawable mMenuDrawable;
    private boolean isDrawerOpen;
    /**
     * icon的不同切换状态
     */
    private MaterialMenuDrawable.AnimationState mCurrentState;
    private View mStateView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.tool_bar);
        /**
         * 给当前窗口设置ActionBar为Toolbar
         */
        setSupportActionBar(mToolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mStateView = findViewById(R.id.state_view);
        /**
         * 初始化mMenuDrawable
         */
        mMenuDrawable = new MaterialMenuDrawable(this, Color.WHITE,
                MaterialMenuDrawable.Stroke.THIN);
        /**
         * 默认切换动画是从菜单icon到返回icon
         */
        mCurrentState = MaterialMenuDrawable.AnimationState.BURGER_ARROW;
        initToolbar();
        initDrawerLayout();
        initButton();
    }

    private void initButton() {
        Button mBurgerArrowButton = (Button) mStateView.findViewById(R.id.burger_arrow_button);
        Button mBurgerXButton = (Button) mStateView.findViewById(R.id.burger_x_button);
        Button mBurgerCheckButton = (Button) mStateView.findViewById(R.id.burger_check_button);
        mBurgerArrowButton.setOnClickListener(this);
        mBurgerXButton.setOnClickListener(this);
        mBurgerCheckButton.setOnClickListener(this);
    }

    /**
     * 初始化Toolbar
     */
    private void initToolbar() {
        mToolbar.setTitleTextColor(Color.WHITE);
        mToolbar.setNavigationIcon(mMenuDrawable);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /**
                 * 判断点击icon时是关闭还是打开drawerLayout
                 */
                boolean drawerOpen = mDrawerLayout.isDrawerOpen(GravityCompat.START);
                if (drawerOpen) {
                    mDrawerLayout.closeDrawer(GravityCompat.START);
                    return;
                }
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });
    }

    /**
     * 初始化DrawerLayout
     */
    private void initDrawerLayout() {
        mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                /**
                 * 实现drawerLayout滑动过程中icon的动画变化
                 */
                mMenuDrawable.setTransformationOffset(
                        mCurrentState, isDrawerOpen ?
                                2 - slideOffset : slideOffset);
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                isDrawerOpen = true;
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                isDrawerOpen = false;
            }

            @Override
            public void onDrawerStateChanged(int newState) {
            }
        });
    }

    @Override
    public void onClick(View v) {
        /**
         * 通过按钮改变icon的切换动画
         */
        switch (v.getId()) {
            case R.id.burger_arrow_button:
                mCurrentState = MaterialMenuDrawable.AnimationState.BURGER_ARROW;
                break;
            case R.id.burger_x_button:
                mCurrentState = MaterialMenuDrawable.AnimationState.BURGER_X;
                break;
            case R.id.burger_check_button:
                mCurrentState = MaterialMenuDrawable.AnimationState.BURGER_CHECK;
                break;
        }
    }
}

我们通过依赖中的MaterialMenuDrawable来作为Toolbar的NavigationIcon，其内部已经封装了我们常见的几种切换动画，想进一步了解其实现原理的话，可以添加依赖查看源码。

总结

总的内容不多，也是基于别人封装的实现，但这好像不重要。现实就是如此，多数情况下我们很少在意过程，反而更看重结果。希望你通过本篇博文可以学到一些东西。

源码下载

https://github.com/kuangxiaoguo0123/ATToolbarStudy