##布局文件

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中添加该属性

参考文章

  1. Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用
  2. Material Design之CollapsingToolbarLayout使用