【Support Design】CoordinatorLayout 初探索

属于

android.support.design.widget

包中的一个新组件，使

AppBarLayout

可以随着用户的滑动而改变高度，并且可以在初始位置将

AppBarLayout

背景设置为一张

Image

，在滑动到一定时间点时切换到

Toolbar

的样式




先看Google官方的Sample源码

[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="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

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

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

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />
    </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="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

我们可以看到，在根局部使用了

CoordinatorLayout

，打开源码

[code]public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent

CoordinatorLayout

继承自

ViewGroup

。所有定义的子部件位置默认生成在左上角。布局上只能通过

margin

和

padding

等基本属性设置子部件位置

关于

app:layout_behavior

NestedScrollView

需设置

app:layout_behavior

为

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

，可以引用

@string/appbar_scrolling_view_behavior

，使

NestedScrollView

自适应

AppBarLayout

的高度变化

仅NestedScrollView可以造成滑动时AppBarLayout高度改变，ScrollView不可以

关于

fitSystemWindows

举例：

[code]AppBarLayout.getHeight() == 180p
Toolbar.getHeight() == ?attr/actionBarSize

在API21 的Style文件中的设置

[code]<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>

CoordinatorLayout

中的

fitsSystemWindows

不设置或设置为

false

，会让

StatusBar

变为默认状态，即

transparent

AppBarLayout

和

CollaspingToolbarLayout

中的

fitsSystemWindows

不设置或设置为

false

，会让

StatusBar

在滑动前显示为

ColorPrimaryDark

，滑动后显示

ColorPrimary

若不存在

CollaspingToolbarLayout

时给

AppBarLayout

设置

fitsSystemWindows = true

会导致

StatusBar

失去高度

Toolbar

中无影响

在

CoordinatorLayout

、

AppBarLayout

和

CollaspingToolbarLayout

中都设置

fitsSystemWindows = true

后：

在滑动前，

height = AppBarLayout.getHeight()

时，

StatusBar

的颜色和

CollaspingToolbarLayout

背景色相同（即图片会延伸到

StatusBar

，但状态栏图标不覆盖）

滑动后，

height = Toolbar.getHeight()

时，

StatusBar

颜色恢复到

ColorPrimaryDark

关于

app:layout_scrollFlags

仅当第一个参数设置为

Scroll

时会造成滑动时高度的改变，滑动时

CollaspingToolbarLayout

在过程某时背景变更为

app:contentScrim

Scroll|exitUntilCollapsed

​ 内容上滑时，

AppBarLayout

的高度改变，改变到与

Toolbar

的高度相同为止，过程线性变化

Scroll|enterAlways

​ 内容上滑时，

AppBarLayout

的高度改变，改变到0为止，过程线性变化，更平滑

Scroll|enterAlwaysCollasped

​ 内容上滑时，

AppBarLayout

的高度改变，改变到0为止，过程线性变化

Scroll|snap

​ 内容上滑时，

AppBarLayout

的高度改变，上滑停止时，判断距离顶端和低端的高度，变化为极大或极小