《Android進階之光》ToolBar 與 Drawerlayout 與 Palette

Toolbar是Actionbar的升級版，更加自由。效果圖：

一、使用步驟

首先引入：

    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:palette-v7:28.0.0'

1、在styles.xml的主題中設置不使用Actionbar：

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

2、寫一個mytoolbar.xml，引入Toolbar控件。（單獨寫是爲了多次調用，include即可）

<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"
    app:title="標題"
    app:subtitle="子標題"
    app:logo="@mipmap/ic_launcher"
    app:navigationIcon="@mipmap/icon_item_detail_back"
    android:background="?attr/colorAccent"
    android:minHeight="?attr/actionBarSize">

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

3、在佈局中引入mytoolbar.xml，順便加入側滑效果

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <!--引入Toolbar-->
    <include layout="@layout/mytoolbar" />

    <!--側滑效果-->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="內容界面"/>
            <android.support.design.widget.TabLayout
                android:id="@+id/tl_home_page"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/colorAccent"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="@android:color/black" />
            <android.support.v4.view.ViewPager
                android:id="@+id/vp_home_page"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <!--layout_gravity="start" ,這個必須要有，作爲側滑界面 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_gravity="start"
            android:background="@color/colorPrimary">
            <TextView
                android:id="@+id/tv_close"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="側滑界面， 點擊收回"/>
        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

4、代碼中進行Toolbar的自定義設置—menu、監聽、實現側滑、取色後設置背景

    private void initToolbar() {
        //設置Toolbar：意思是把Toolbar當做ActionBar來用。實際上可以不用這句。
//        setSupportActionBar(mToolbar);

        //設置menu（直接用mToolbar設置menu。因爲上面沒有設置setSupportActionBar(mToolbar)，即不用重寫onCreateOptionsMenu(Menu menu)）
        mToolbar.inflateMenu(R.menu.main);

        //設置左側箭頭 監聽
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });

        //設置menu item 點擊監聽
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                int itemId = menuItem.getItemId();
                switch (itemId) {
                    case R.id.item_share:
                        Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item_settings:
                        Toast.makeText(MainActivity.this, "設置", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return false;
            }
        });


        //用DrawerLayout實現側滑
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.close);
        mActionBarDrawerToggle.syncState();

        mDrawerLayout.addDrawerListener(mActionBarDrawerToggle);

        View close = findViewById(R.id.tv_close);
        close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            }
        });

        //Toolbar的背景設置爲 palette從圖片提取到的活力色 (目的是動態 適應當前界面的色調)
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.dog);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(@Nullable Palette palette) {
                Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();
                mToolbar.setBackgroundDrawable(new ColorDrawable(vibrantSwatch.getRgb()));
            }
        });

//    @Override
//    public boolean onCreateOptionsMenu(Menu menu) {
//        //加載menu；如果actionbar存在就把items添加到actionbar
//        //注意，因爲上面沒有調用setSupportActionBar(mToolbar)，且主題中NoActionbar，即沒有Actionbar。所以本方法也不用重寫。
//        getMenuInflater().inflate(R.menu.main, menu);
//        return true;
//    }

    }

R.menu.main如下:

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

    <item
        android:id="@+id/item_search"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/item_share"
        android:title="分享"
        android:icon="@mipmap/dog"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/item_settings"
        android:orderInCategory="100"
        android:title="設置"
        app:showAsAction="never" />

</menu>

側滑效果如下：