coordinatorLayout使用详解及注意事项,看完这篇完全可以开发5.0的高级特效了

标签（空格分隔）： 未分类

---

一言不合就上个图,还是动态的 

主要是找了半天,好多人说的都不够详细,而且有好多注意事项没有说明,所以走了好多弯路,这个地方就是解决那些关键疑问的,这些疑问清楚了才能真正掌握它的用法

代码示例(activity的xml代码,只需要xml配置就可实现上面这么炫酷的效果了,是不是超赞呢,后面有分析哦):

<?xml version="1.0" encoding="utf-8"?><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.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="200dp"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="170dp"            app:contentScrim="@color/colorAccent"            app:expandedTitleMarginBottom="100dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:title="我是collapsebar的标题">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="第一个固定(pin)"                android:textSize="40sp"                app:layout_collapseMode="pin" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:text="不设置,跟随滑动"                android:textSize="40sp" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="bottom"                android:text="视察效果(parallax)"                android:textSize="40sp"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:layout_width="match_parent"                android:layout_height="30dp"                android:layout_gravity="top"                android:background="#600f"                app:layout_collapseMode="pin">                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="我是toolbar" />            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="appbar之内,collap之外"            android:textColor="#0f0" />    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:id="@+id/n_scroll_view"        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="wrap_content"            android:orientation="vertical">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="哈"                android:textColor="#0f0"                android:textSize="200sp" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="哈"                android:textColor="#0f0"                android:textSize="200sp" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="哈"                android:textColor="#0f0"                android:textSize="200sp" />            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="哈"                android:textColor="#0f0"                android:textSize="200sp" />        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

代码分析:

使用注意事项:

1. CoordinatorLayout继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上,但跟behavior属性也有很大关系,的app:layout_behavior属性,只有CoordinatorLayout的直接子布局才能响应,所以不要做徒劳无功的事

2. CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout结合起来才能产生这么神奇的效果,不要想当然的光拿着CoordinatorLayout就要玩出来(刚接触的时候我也有这种想法),累死你

3. AppBarLayout:继承自lineLayout,使用时其他属性随lineLayou,已经响应了CoordinatorLayout的layout_behavior属性,所以他能搞出那么多特效来

4. AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags 
   1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局 
   2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩 
   3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来 
   4.如果不设置改属性,则改布局不能滑动

5. CollapsingToolbarLayout,字面意思是折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠 继承自framLayout,所以它的直接子类可以设置layout_gravity来控制显示的位置,它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下: 
   1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开 
   2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果) 
   3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

6. toobar最好是放在CollapsingToolbarLayout,也不是没有其他用法,但是在这套系统中一般只能放在CollapsingToolbarLayout里面,才能达到好的效果,这里toolbar同时设置layout_gravity和app:layout_collapseMode时有一些比较复杂的情况.不一一作介绍,因为一般我们只会把toolbar放在最上面(不用设置layout_gravity属性,默认的),并且设置app:layout_collapseMode为pin,让他固定在最顶端,有兴趣的自己试试其他情况,

7. 告你一个惊天大幂幂:只要CollapsingToolbarLayout里面包含有toolbar那么CollapsingToolbarLayout的折叠后高度就是toolbar的高度,相当于CollapsingToolbarLayout设置了minHeight属性,

8. 再告诉你一个惊天大咪咪:CollapsingToolbarLayout折叠到最顶端时,它就是老大,会处于最上层,包括toolbar在内,所有的布局都会被他盖住,显示不出来.

9. CollapsingToolbarLayout 自己的属性 说明,不是直接子布局可用的,是自己可以用的属性 
   contentScrim折叠后的颜色也是展开时的渐变颜色,效果超赞. 
   title标题,如果设置在折叠时会动画的显示到折叠后的部分上面,拉开时会展开,很好玩的 
   expandedTitleMargin当title文字展开时文字的margin,当然还有marginTop等属性,脑补吧 
   app:collapsedTitleTextAppearance=”@style/Text”折叠时title的样式里面可以定义字体大小颜色等 
   app:collapsedTitleTextAppearance=”@style/Text1”折叠时title的样式里面可以定义字体大小颜色等 
   当然还有一些,自己试试吧,现在的这些已经完全够用了

10. 还有最后一个问题:怎么实现固定表头,这个也简单,写一个布局放在CollapsingToolbarLayout之后,AppBarLayout之内即可,xml文件中自己找找看吧.你要是问如果放在CollapsingToolbarLayout之前,AppBarLayout之内会怎么样?这样折叠布局就不起作用了.不会折叠了.

写的真累啊,这都是一个一个总结出来,试出来的.希望大家少走弯路吧.其实写帖子挺好的,因为你写的时候也是为自己总结,以后自己用的时候方便找,如果不写可能下次用的时候需要重新学一遍了,所以不管帖子有没有人看,自己一定要多写,跟写笔记还不一样,因为帖子你是让别人看的,你会尽量写的好一点,以后自己也会省事,写笔记是给自己看的,不怕丢人.