概述
这是 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
Overlap scrolling view with AppBarLayout