安卓开发-android5.0-Material Design一系列酷炫控件

学习无止境。时常关注谷歌新动向，不要满足于可能快要被淘汰的东西。

1.DrawerLayout
看名字就知道这是一个viewGroup，是一个布局，一个侧滑布局，先上图。

代码如下
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:fitsSystemWindows=“true”
tools:openDrawer=“start”>

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width=“wrap_content”
android:layout_height=“match_parent”
android:layout_gravity=“start”
android:fitsSystemWindows=“true”
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

作为初级安卓工程师或者是正在学习的程序猿，往往容易是看到太多陌生的东西就觉得麻烦，其实非常的简单。DrawerLayout只需要三个子view。一个content，一个left，一个right。至于这三个子view要怎么写那就是你自由发挥了。
DrawerLayout可以理解为抽屉布局。
这三个子view实际上你可以自由发挥，但是记住子view的属性 android:layout_gravity=“start” （貌似没有自动补全，没有就直接输吧，不要以为没有自动补全就是没有这个属性，可以用的），大家应该看出来了，这个属性是控制你是哪个子view，是content还是left还是right，如果不设置默认就是content，不要出现多余的子view。
如果想从右侧弹出，设置android:layout_gravity=“end"的同时， tools:openDrawer=“start” 这个属性也可以改，tools属性仅仅为了预览方便，跑项目的时候是不会读取的。
NavigationView这个在我这个例子中用到了 ，其实可以不用的，我上面说的，三个子布局自己随便搞。但是官方给出的demo中使用的是这个，可能这个好用呢，那接下来就探究这个NavigationView。
2.NavigationView
<android.support.design.widget.NavigationView
android:id=”@+id/nav_view"
android:layout_width=“wrap_content”
android:layout_height=“match_parent”
android:layout_gravity=“start”
android:fitsSystemWindows=“true”
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />

单独吧这个提出来，这个是作为侧滑弹出部分，从android:layout_gravity=“start"属性看出。
android:fitsSystemWindows=“true” -->为的是弹出的时候忽视toolbar。
这些都不是很重要，为了简单明了一个点，这里我指出最重要的两个属性。
app:headerLayout=”@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"
头布局和菜单。

这个是头布局

这个是菜单，说到这里其实已经很简单了，直接看下我这个例子的头布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:contentDescription="@string/nav_header_desc"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@drawable/my_head" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/nav_header_title"
        android:textColor="@color/white"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nav_header_subtitle" />

</LinearLayout>

完全没有新东西，直接把这个而布局文件放到app:headerLayout="@layout/nav_header_main" 这个属性就成了(nav_header_main这个便是布局文件名)。so easy!
接下来看菜单。activity_main_drawer这个文件，menu文件夹下

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_menu_camera"
            android:title="@string/menu_home" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="@string/menu_gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="@string/menu_slideshow" />
        <item
            android:id="@+id/nav_tools"
            android:icon="@drawable/ic_menu_manage"
            android:title="@string/menu_tools" />
    </group>

    <item android:title="Communicate"
        >
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="@string/menu_share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="@string/menu_send" />
        </menu>
    </item>

</menu>

如果你觉得稍微陌生，结合一下图片，结合一下图片，结合一下图片，就知道是怎么回事了。
实际上，NavigationView就是配合DrawerLayout使用的，不要把他想的太牛逼，你很容易就可以上手他。记三遍这个
DrawerLayout
DrawerLayout
DrawerLayout，使用来侧边划出界面的。三个子view，左，右，content。（三个子view可以随意发挥，不是必须结合其他的特定控件）单纯的记住他，别去把所有新Material Design全部结合记，DrawerLayout+NavigationView结合使用就行了。不然你会懵逼懵逼。

3.CoordinatorLayout
他的等级和DrawerLayout一样是viewgroup，layout布局，拥有子view的。和DrawerLayout一样，也有需要结合使用的子view。
CoordinatorLayout可以理解为层叠布局，只是为了配合子view实现效果。先看子view
3.1.AppBarLayout
AppBarLayout是比较特殊的，他必须要跟CoordinatorLayout一起使用，不然很多属性没效果，跟普通的linearlayout一样。他继承于linearlayout。所以效果跟Vertical的线性布局一样，但是他有一个属性能让他的子view使用配合scroll形成显示隐藏效果。
这里其实要实践了才知道效果是怎么样的，但是我尽量会说的很简单易懂。首先布局是这样的。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

layout="@layout/content_main" 这是一个recyclerview，没别的了，注意AppBarLayout的子view Toolbar的app:layout_scrollFlags="scroll|enterAlways"这条属性。

下面是设置的几种情况 （recyclerView是会消费滑动事件的，主要的区别就在于滑动事件谁先消费）
app:layout_scrollFlags=“scroll|enterAlways” ： toolbar优先消费滑动事件，前提是它能够消费，如果toolbar已经隐藏，就没办法消费向上滑动事件了，这个很容易理解，就是他隐藏了肯定就不能再向上划了。反之，如果toolbar全部显示，那就不能再消费向下滑动事件，否则优先消费滑动事件。
app:layout_scrollFlags=“scroll|snap” 如果toolbar隐藏了， 只有当recyclerView滑到了最顶端，它才会出现，而往下滑如果是toolbar存在优先隐藏toolbar。说白了就是要走先走，要出现最后才出现，最没有地位和存在感的toolbar。
但是呢，最骚的是，我们介绍的是AppBarLayout并不是toolbar，所以实际上能有这种效果的并不是toolbar，而是AppBarLayout里面的子控件，放banner大小的图片也行的！于是各种骚操作就出来了~比如如下操作

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/banner"
    android:scaleType="centerCrop"
    app:layout_scrollFlags="scroll|enterAlways"
    />
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

只截取部分代码，效果还是自己去试一试！！！！！这样印象更深刻！
反正很diao/。不过还有更diao的。
如果多看几篇文章，应该发现了其实很多人实现了图片里面嵌套了标题。目前我们说到的要去实现可能比较麻烦，所以。我们要
3.2CollapsingToolbarLayout
实际上AppBarLayout的子view属性app:layout_scrollFlags="scroll|enterAlways"不止上面说的两种，还有
app:layout_scrollFlags=“scroll|exitUntilCollapsed”
app:layout_scrollFlags=“scroll|enterAlwaysCollapsed”
这两个就是要配合CollapsingToolbarLayout的，单独给image或者toolbar使用没有特殊效果。
CollapsingToolbarLayout是AppBarLayout子view。说白了就是给AppBarLayout的子view再包裹一层。然后CollapsingToolbarLayout成了唯一的AppBarLayout的子view。设置上面两个属性。
app:layout_scrollFlags=“scroll|exitUntilCollapsed” 向上滚动时会收缩View，但是可以固定Toolbar一直在上面。但是toolebar的标题也会有特殊效果。
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/banner"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

虽然是越来越复杂，但是都是提到了的，应该都不陌生了。
app:contentScrim属性，完全收缩只剩toolbar后的颜色
重点
toolbar和imageview都有的属性 ：app:layout_collapseMode
pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，设置这个属性的控件还可以保留在屏幕上
parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用.
这个解释是网上的，wtf？？这个是什么鬼，其实这个对于整体影响不大，可以试试将toolbar设置成parallax，他还是能一直保留，但是除了title以外其他控件都会被移出屏幕。

实际上开发过程种的需求远不止于此，但是我们在用这些新的布局时也别忘了实际上他们都是继承于一个我们熟悉的布局，比如CollapsingToolbarLayout也是一个FrameLayout。这样实际上我们可以做很多个性化需求。比如自定义titlebar，toolbar只是作为让我们上划保留一块空间的玩意，完全可以不去显示他，毕竟CollapsingToolbarLayout是FrameLayout，我们用自己的titlebar去覆盖原有的就好了。新东西要去用要去学，但也千万别限制自己的思维。千万不要被觉得新东西约束太多就把自己的思维也约束了。就算不去了解源码，也要多尝试不同的用法。