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