5.x控件：FloatingActionButton、SnackBar、DrawerLayout、NavigationView

首先啥也别说，先引入support包。

compile 'com.android.support:design:22.2.1'

---

FloatingActionButton & SnackBar

这两者的使用都比较简单，所以一起说下。

FloatingActionButton其实就可以视作一个ImageButton，事实上他也是继承ImageButton。而SnackBar的使用方法和使用场景感觉和Toast有点相似。所以就写一个非常简单的例子，点击FAB，弹出SnackBar。

1、xml，FAB的背景颜色默认为theme的colorAccent，一般不用修改也搭调。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".MainActivity">


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:src="@drawable/ic_plus"/>


</FrameLayout>

2、使用

private FloatingActionButton fab;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    fab = (FloatingActionButton) findViewById(R.id.fabBtn);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar.make(fab, "Hello. I am a Snackbar!", Snackbar.LENGTH_SHORT)
                    .setAction("Undo", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "undo", Toast.LENGTH_SHORT).show();
                        }
                    })
                    .show();

        }
    });
}

问题

这时有2个bug现象

1、在我的4.3（API18）真机，默认会有一个margin效果，而在5.0（API21）模拟器上则没有。

这个问题可以通过建立两个版本尺寸来解决，这也是常见的屏幕适配方案。
res/values/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

res/values-v21/dimens.xml

<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_bottom">16dp</dimen>

然后修改xml增加两个margin属性

android:layout_marginBottom="@dimen/fab_margin_bottom"
android:layout_marginRight="@dimen/fab_margin_right"

2、5.0以上版本还可能出现阴影无法显示的bug，通过增加一个属性快速解决。然而我在模拟器上并未出现这个bug…

app:borderWidth="0dp" 

我们先不理这两个bug，点击看一下效果。

效果不咋地，SnackBar会覆盖FAB，理想的效果两者应该要协调工作，SnackBar会把FAB给顶上去才对。协调工作，把布局换成CoordinatorLayout如何。it works~~

不过这时又有个神奇的现象，我的真机默认的margin效果也没了，所以在CoordinatorLayout下直接设上一个margin值而不管版本就好啦~~

---

DrawerLayout & NavigationView

DrawerLayout

DrawerLayout顾名思义就是一个实现侧拉的布局，当它作为布局时，第一个子View是content，后面的子View是drawer，通过drawer的android:layout_gravity属性来指定其是左侧还是右侧拉。

我们在上诉例子的基础上添加一个DrawerLayout，并且将FAB的监听改为弹出drawer。

1、修改xml，顶层布局设为DrawerLayout，此时CoordinatorLayout为content，RelativeLayout为drawer。

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/ic_plus"/>


    </android.support.design.widget.CoordinatorLayout>

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="240dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="start"
                    android:background="?attr/colorAccent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Drawer"
            android:textColor="#FFFFFF"
            android:textSize="24sp"/>


    </RelativeLayout>


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

2、FAB呼出drawer

mDrawerLayout.openDrawer(Gravity.LEFT);

注意此时状态栏下面的AppBar是ActionBar而非Toolbar，如果我们将Toolbar添加到CoordinatorLayout中，呼出的菜单也会覆盖Toolbar。

NavigationView

DrawerLayout的常见使用场景是作为App的导航栏，我们当然可以通过布局去实现一个可观的导航栏，但NavigationView可以视作是一种drawer menu的标准。

NavigationView有两个最重要的属性，一个是app:headerLayout，另外一个则是app:menu。

1、设置header，res/layout/nav_header

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="192dp"
                android:background="@drawable/nav_header_img">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="kuchiki rukia"
        android:textColor="#FFFFFF"
        android:textSize="24sp"/>

</RelativeLayout>

2、设置menu，res/menu/nva_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navItem1"
            android:checked="true"
            android:icon="@drawable/ic_action_search"
            android:title="主页"/>
        <item
            android:id="@+id/navItem2"
            android:icon="@drawable/ic_action_search"
            android:title="收藏"/>
        <item
            android:id="@+id/navItem3"
            android:icon="@drawable/ic_action_search"
            android:title="评论"/>
    </group>

</menu>

3、设置NavigationView

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>

4、监听回调

nav = (NavigationView) findViewById(R.id.navigation);
nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        menuItem.setChecked(true);
        Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_SHORT).show();
        return false;
    }
});

menu

上面menu的group有个android:checkableBehavior="single"属性，配合menuItem的menuItem.setChecked(true)方法，不难理解它的作用就是限制只能选中一个，该属性还有none、all值，默认是none，即menuItem.setChecked(true)后也不会有背景色效果。如果不需要选中的背景色效果完全可以不用group。

menu也支持分组，在item里面嵌套一个menu即可，但是这个item就不再视作item了。

    <item
        android:title="分组">
        <menu>
            <item
                android:id="@+id/navItem4"
                android:icon="@drawable/ic_action_search"
                android:title="设置"/>
            <item
                android:id="@+id/navItem5"
                android:icon="@drawable/ic_action_search"
                android:title="关于"/>
        </menu>
    </item>

分组后会有一条横线

此时会有一个比较奇怪的现象，即使上面所有item处在同一个group，
android:checkableBehavior="single"却不奏效，分组的内容更像是另外一个group。根据NavigationView的使用场景，必定是所有item中单选的，所以我更倾向于不要分组这个东东。

最后NavigationView这个东东的好处是，一来标准化操作省事，二来checked状态会和theme关联，比如app:itemIconTint、app:itemTextColor会自动关联colorPrimary，这样效果也更加和谐。