Android Design Support Library（5）- CoordinatorLayout的入门使用

原创文章，转载请注明 /article/3662961.html

这篇文章介绍下Android Design Support Library中的CoordinatorLayout的使用，如果你还不知道怎么使用这个Design Library请参考 /article/3662957.html，CoordinatorLayout是Design Library中比较重要也是最难的一部分，Coordinator顾名思义，它是用来组织它的子views之间协作的一个父ViewGroup，CoordinatorLayout 实现了多种Material Design中的滚动效果，目前这个框架提供了几种不用写动画代码就能实现的动画和滚动效果，下面看看几个入门效果。

1：Toolbar跟随滚动显示与隐藏



看下Layout代码

[code]<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        >

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
     >

        <TextView
            android:layout_margin="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/textString"
            android:textSize="20sp" />

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

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

这个布局最外层用到了CoordinatorLayout起到协调子View的作用，然后用的是v7的Toolbar而不是已经过时的Actionbar，为了能够让Toolbar响应滚动事件需要在Toolbar外面放AppBarLayout的布局容器 ↓ 。

[code]//代码片段
   <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/appbar"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        >

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

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

之后，我们需要定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。Android design support library包含了一个字符串资源@string/appbar_scrolling_view_behavior，这个是官方定义好的，我们直接拿来用就OK了，它和AppBarLayout.ScrollingViewBehavior相匹配，当这个滚动的View发生滚动事件时候，CoordinatorLayout会搜索自己所包含的其他view，看看是否有view与这个behavior相关联，所以NestedScrollView滚动的时候会触发AppBarLayout ↓。

[code]//代码片段
 <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
     >

        <TextView
            android:layout_margin="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/textString"
            android:textSize="20sp" />

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

AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView滚动事件发生的时候会被触发↓：

[code]//代码片段
 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            />

Toolbar中的app:layout_scrollFlags属性里面必须至少启用scroll，这样Toolbar才会滚动出屏幕，否则它将一直固定在顶部。

enterAlways：一旦向上滚动这个view就可见

2：Toolbar跟随滚动折叠效果



看下Layout代码

[code]<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"
    android:fitsSystemWindows="true"
   >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
             app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/p"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
               />

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_margin="8dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/textString"
            android:textSize="20sp" />

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/btn_star"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

为了使Toolbar具有折叠的效果，Toolbar外面还要放一个CollapsingToolbarLayout布局容器，CollapsingToolbarLayout里面放了一个ImageView和一个Toolbar，并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。↓

[code] <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
             app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/p"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"  />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
               />

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

CollapsingToolbarLayout的属性

layout_scrollFlags=”scroll|exitUntilCollapsed”：向上滚动时收缩View，但可以固定Toolbar，使Toolbar一直在上面

contentScrim： 当CollapsingToolbarLayout折叠后背景颜色

CollapsingToolbarLayout子view，ImageView属性

layout_collapseMode=”parallax”：使ImageView跟随滚动的时候具有视差效果

layout_collapseParallaxMultiplier=”0.7”：视差因子，设置视差滚动因子，值为：0~1

CollapsingToolbarLayout子view，Toolbar属性

layout_collapseMode=”pin”：当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

OK CoordinatorLayout的入门使用就讲解完了，由于代码比较复杂，这次上源码下载地址 http://download.csdn.net/detail/leejizhou/9407558