《Android進階之光》Design Support Library常用控件（一）：Snackbar、FloatingActionButton、TabLayout、NavigationView

一、SnackBar

    private void showSnackBar() {
        //第一個參數是爲了找到Snackbar的父控件，給個view就行
        Snackbar.make(mBtnShowSnackBar, "Snackbar標題", Snackbar.LENGTH_LONG)
                .setAction("點擊事件", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MaterialDesignWidgetActivity.this, "點擊了snackbar", Toast.LENGTH_SHORT).show();
                    }
                })
                .show();
    }

二、FloatingActionButton

    <!--FloatingActionButton-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:background="@color/colorAccent"
        android:backgroundTint="@color/colorPrimary"
        android:clickable="true"
        android:elevation="15dp"
        android:src="@mipmap/dog"
        app:pressedTranslationZ="10dp" /><!--pressedTranslationZ點擊時陰影的大小-->

SnackBar、FloatingActionButton的效果：

注意：圖中效果SnackBar彈出後，FloatingActionButton隨之上移，是因爲FloatingActionButton標籤放在<CoordinatorLayout>中。先知道效果，後面介紹<CoordinatorLayout>。

三、TabLayout

用來結合ViewPager實現選項卡

<?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">

    <!--&lt;!&ndash;側滑效果&ndash;&gt;-->
    <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">

            <!--用AppBarLayout把toolbar、TabLayout組合爲一個整體，設置elevation有立體效果-->
            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:elevation="5dp">

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

                <!--TabLayout使用tabMode="scrollable"設置可以滑動-->
                <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.design.widget.AppBarLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/vp_home_page"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
        </LinearLayout>


        <!--側滑界面-->

        <!--第一種：自定義，layout_gravity="start" ,這個必須要有，作爲側滑界面 -->
        <!--<LinearLayout-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_gravity="start"-->
        <!--android:background="@color/colorPrimary"-->
        <!--android:orientation="vertical">-->

        <!--<TextView-->
        <!--android:id="@+id/tv_close"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:text="側滑界面， 點擊收回" />-->
        <!--</LinearLayout>-->

        <!--第二種：NavigationView headerLayout是頭部佈局 menu是菜單列表-->
        <!--layout_gravity="start" ,這個必須要有，作爲側滑界面-->
        <android.support.design.widget.NavigationView
            android:id="@+id/nv_navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/navigation_header"
            app:menu="@menu/navigation_menu" />

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

</LinearLayout>

    private void initView() {
        //PagerAdapter
        fragments.add(new FirstFragment());
        fragments.add(new SecondFragment());
        fragments.add(new FirstFragment());
        HomePagerAdapter adapter = new HomePagerAdapter(getSupportFragmentManager(), titles, fragments);
        mVpHomePage.setAdapter(adapter);

        //TabLayout關聯ViewPage
        mTlHomeTab.setupWithViewPager(mVpHomePage);

        initToolbar();

        initDrawerLayout();
    }

    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;
            }
        });

    }

效果：

四、NavigationView

用來實現抽屜菜單頁面。設置屬性navigation_header（側滑頁的頭部）、navigation_menu（側滑頁的菜單）即可。

@layout/navigation_header：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:src="@mipmap/dog"/>

    <TextView
        android:layout_marginLeft="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="dog"/>
</LinearLayout>

@menu/navigation_menu：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--checkableBehavior="single", 每次只能有一個item被選中-->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/id_android"
            android:icon="@drawable/ic_launcher_background"
            android:title="android" />
        <item
            android:id="@+id/id_java"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="java" />
    </group>

    <!--item中有menu就會有個橫線-->
    <item android:title="其他">
        <menu>
            <item
                android:icon="@drawable/ic_launcher_foreground"
                android:title="haha" />
            <item
                android:icon="@drawable/ic_launcher_foreground"
                android:title="hehe" />
        </menu>
    </item>
</menu>

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

        mDrawerLayout.addDrawerListener(mActionBarDrawerToggle);

        //側滑頁面的導航菜單 選中監聽
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                int itemId = menuItem.getItemId();
                CharSequence title = menuItem.getTitle();
                Toast.makeText(MainActivity.this, title, Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }

效果：