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

侧滑效果如下：