关于Android中的CoordinatorLayout的使用
CoordinatorLayout的使用
本篇是讲解CoordinatorLayout的使用,主要目的是用来替代NestedScrollView,使用CoordinatorLayout来达到NestedScrollView嵌套滑动的效果
讲解为什么要使用CoordinatorLayout:
- NestedScrollView角度:
- 首先一般想要嵌套滑动的地方都是嵌套RecyclerView来进行屏幕滑动,但是使用NestedScrollView嵌套RecyclerView会造成当进入页面的时候,RecyclerView会一次性全部展开。RecyclerView会失去复用性。在一些RecyclerView条目数量不多的时候,并不会造成多大的印象,但失去复用性会到时候RecyclerView滑出屏幕外无法被回收,数量一旦过多就会造成性能问题。
- CoordinatorLayout角度:
- 使用CoordinatorLayout嵌套RecyclerView也可以达到跟随屏幕一起滑动的效果,并不会造成什么性能问题,并不会丢失特性。
讲解如何使用CoordinatorLayout嵌套RecyclerView:
首先CoordinatorLayout是要与AppBarLayout一起使用才能做出许多效果。
AppBarLayout:
1.AppBarLayout用来规划需要要滑出屏幕的控件,被AppBarLayout包裹的控件需要添加(layout_scrollFlags=”scroll”)的属性layout_scrollFlags=”scroll”:当它滚动的时候,AppBarLayout会回调触发内部设置了layout_scrollFlags=””的控件的滚动行为。
scroll:跟随屏幕一起滑动
enterAlways:使用enterAlways,必须要带上scroll,否则没有效果,同样使用后面哪一个都要有scroll;使用要两个一块使用,enterAlways决定向下滚动时Scrolling View和Child View之间的滚动优先级问题。
enterAlwaysCollapsed:这里涉及到Child View的高度和最小高度,向下滚动时,
Child View先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时,Child View再向下滚动,直至显示完全。代码使用:
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<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<com.youth.banner.Banner
android:id="@+id/Re_banner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginTop="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_10"
app:banner_indicator_gravity="right"
app:banner_indicator_marginBottom="@dimen/dp_7"
app:banner_indicator_marginRight="@dimen/dp_15"
app:banner_indicator_normal_color="@color/White"
app:banner_indicator_selected_color="@color/Pink"
app:layout_scrollFlags="scroll" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/Re_recy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_5"
android:layout_marginTop="@dimen/dp_5"
android:layout_marginRight="@dimen/dp_5"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>这里就是是哟CoordinatorLayou嵌套RecyclerView,将头部的Banner设置layout_scrollFlags=”scroll”,它将会跟随屏幕一起滑动,滑出屏幕外,而RecyclerView设置的layout_behavior=”@string/appbar_scrolling_view_behavior”将会把View设置在AppBarLayout的下方,并且不会随着屏幕的滑动而滑出屏幕之外。
CoordinatorLayou吸附效果:
CollapsingToolbarLayout
吸附效果是需要CoordinatorLayout与CollapsingToolbarLayout一同使用,并且CollapsingToolbarLayout设置layout_scrollFlags=”scroll|snap”,代表被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
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<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/TV_nestSc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/coll_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/Sy_text"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_35"
android:layout_marginLeft="@dimen/dp_15"
android:layout_marginTop="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_15"
android:layout_weight="1"
android:background="@drawable/file_background_radius_30_while_gray"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/dp_24"
android:layout_height="@dimen/dp_24"
android:layout_marginLeft="@dimen/dp_15"
android:src="@drawable/search_24_while" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_5"
android:layout_weight="1"
android:text="查找精彩动态内容"
android:textColor="#c1bfc0"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="@+id/xian_2"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_1"
android:layout_below="@+id/Sy_text"
android:layout_marginTop="@dimen/dp_10"
android:background="#e7e7e7" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/Recy_dynamic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>吸附效果就是在滑动屏幕的时候,被CollapsingToolbarLayout包裹的内容在接近屏幕顶端的时候会有个吸附效果,之后就会一直吸在屏幕顶端,除非下滑脱离。