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

效果：