记录一下 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
| <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingtoolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/musictoorbar"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:gravity="center"
android:text="测试"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
|
##为了使 Toolbar 有滑动属性，需要注意
在CoordinatorLayout中放置两个布局，分别是Appbar布局AppBarLayout和可滑动布局NestedScrollView（ListView和ScrollView）并不能使用这个特性
CoordinatorLayout必须作为整个布局的父布局容器
给需要滑动的组件设置 app:layout_scrollFlags 属性，给可以滑动的组件设置 app:layout_behavior 属性
其中app:layout_scrollFlags 的属性有：
1.scroll: 所有需要滚出屏幕的布局都需要设置这个属性
2.enterAlways:使得滚出屏幕的布局在屏幕在向下滑动时可见
3.enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
4.exitUntilCollapsed:滚动出屏幕最后折叠在顶部
在滑动的子View中设置app:layout_collapseMode属性
有两个属性
1.app:layout_collapseMode="parallax" 设置该属性，在内容滚动时，该View也会同时滚动，实现视觉差，通常和layout_collapseParallaxMultiplier搭配使用
2.app:layout_collapseMode="pin" 设置该属性，当CollapsingToolbarLayout被收缩的时候，该View还会被固定在屏幕上。
PS. 在CollapsingToolbarLayout中设置app:contentScrim="color"可以改变收缩以后Toolbar的颜色，不设置的话会显示为图片的背景
ImageView中使用android:scaleType="centerCrop" 使得照片按照原始比例缩放
在<include layout="@layout/toolbar"/>中加入 app:layout_scrollFlags="scroll|enterAlways"并不生效，即
1
2
| <include layout="@layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways"/>
|
似乎是个bug？需要在toolbar中添加该属性
参考文章
- Android M新控件之AppBarLayout，NavigationView，CoordinatorLayout，CollapsingToolbarLayout的使用
- Material Design之CollapsingToolbarLayout使用