Android Support Design Library - CoordinatorLayout

概述

这是 Android Support Design Library 的最后一篇了，此内容在 Material Design 中算是很重要的，我只能用惊艳一词来形容。主要内容是滚动技巧，通过使用 CoordinatorLayout，实现滚动时的各种动画效果。

按照 MD 文档中的使用方式，分为三大类：

• Standard app bar
• Tabs
• Flexible space

字面上好似不太好理解，主要说明当滚动的时候，Standard app bar 的效果，有 Tabs 的标题栏的效果。Flexible space 就是滚动的时候在标题栏拉出一块空间，用来显示内容（例如图片）。实现这些效果，都需要使用 CoordinatorLayout，在 Snackbars 章节也使用过，能够让出空间给 Snackbars 显示。

Dependencies

前提条件得满足。

1 2	compile 'com.android.support:design:22.2.1' compile 'com.android.support:appcompat-v7:22.2.1'

Standard app bar 预览

布局

新建一个布局文件，使用 CoordinatorLayout 作为主要容器。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:layout_height="wrap_content" android:layout_width="match_parent"> <android.support.v7.widget.Toolbar ... app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!-- Your scrolling content --> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

AppBarLayout 需要在第一层级，里面包括 Toolbar。注意看 layout_scrollFlags 属性。同时设置滚动布局的 behavior 为 @string/appbar_scrolling_view_behavior。这样设置之后，向上滚动后，标题栏将会消失，只要向下滚动，标题栏就会出现。

layout_scrollFlags

类型	描述
scroll	需要滚出屏幕的 View 都需要设置此标志
exitUntilCollapsed	滚动推出屏幕到最小高度的时候折叠
enterAlways	向下滚动的时候，设置此标志的 View 将显示
enterAlwaysCollapsed	最小高度进入，到达顶部显示完整高度

Tabs 预览

布局

布局上和 Standard app bar 类似，只需要在 Toolbar 布局下方增加一个 TabLayout。TabLayout 的使用方式可以参看 TabLayout 章节。

1 2 3 4

<android.support.design.widget.TabLayout android:layout_height="wrap_content" android:layout_width="match_parent" />

同时需要在 Viewpager 设置 behavior 为 @string/appbar_scrolling_view_behavior。设置方式和 Standard app bar 上相同。这样设置之后，向上滚动后，标题栏将会消失，Tabs 显示，只要向下滚动，标题栏将会出现。

Flexible space 预览

这个是 Android Support Design Library 里面最惊艳的对吧，像把图片折叠一样。

布局

布局上和之前有稍微更改，增加了 CollapsingToolbarLayout。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<android.support.design.widget.CoordinatorLayout 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="match_parent" android:fitsSystemWindows="true" > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" > <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar ... app:layout_collapseMode="pin" > </android.support.v7.widget.Toolbar> </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"> ... </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton ... /> </android.support.design.widget.CoordinatorLayout>

这里首先得注意的是 AppBarLayout 的高度，一定要设置成一个固定的值，不然滚动将无效果。之后layout_scrollFlags 需要设置成 scroll|exitUntilCollapsed。

同时设置 Toolbar 的视图模式 layout_collapseMode 为 pin，并设置 ImageView 的视图模式为parallax 折叠视差。

这时候，如果运行的话，会出现两个问题。

• 标题栏 Title 不显示
• 状态栏不透明

针对第一个问题，Toolbar 标题将无效，需要使用 CollapsingToolbarLayout 来设置标题。

1 2 3

CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar.setTitle("Title");

针对第二个问题需要设置状态栏透明。

1 2 3 4

<style name="AppTheme.transpant" parent="AppTheme"> <item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item> </style>

这里单独给这个 Activity 设置主题，主要是因为状态栏透明和 Standard app bar 等会有冲突，Standard app bar 向上滚动，标题栏消失的时候，Title 将会出现在状态栏上。

如此惊艳的效果就完成了。其实 Material Design 里面还有两个 Flexible space 的效果。

一个是折叠的标题栏，就是下拉出后出现的不是图片，是放大的标题栏。实现方式就是将上面布局中的 ImageView 删除。效果在此不演示了。

另外一个是 Flexible space with overlapping content，字面上很好理解，就是覆盖住上方内容。效果如下图（官方）。

这个效果只要更改滚动布局的属性 behavior_overlapTop，其他不变。

1 2 3

<android.support.v4.widget.NestedScrollView app:behavior_overlapTop="64dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

当然也可以在代码中更改。

1 2 3 4 5 6

NestedScrollView scrollView = ... CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams(); AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior(); behavior.setOverlapTop(128); // Note: in pixels

但是遇到问题，官方中的效果是标题栏上的 Title 会一直固定在顶部，而现在的效果是 Title 还是和之前效果一样滚动的时候会放大到下方，故在此不展示效果图，有兴趣的可以去看代码。

参考

Handling Scrolls with CoordinatorLayout

Material Design

Overlap scrolling view with AppBarLayout

源码

DesignSupportLib

#Android Support Design Library  #CoordinatorLayout  #CoordinatorToolbarLayout

点击打开链接