CoordinatorLayout的使用

关于Android中的CoordinatorLayout的使用

CoordinatorLayout的使用

本篇是讲解CoordinatorLayout的使用,主要目的是用来替代NestedScrollView,使用CoordinatorLayout来达到NestedScrollView嵌套滑动的效果

讲解为什么要使用CoordinatorLayout:
  • NestedScrollView角度:
    1. 首先一般想要嵌套滑动的地方都是嵌套RecyclerView来进行屏幕滑动,但是使用NestedScrollView嵌套RecyclerView会造成当进入页面的时候,RecyclerView会一次性全部展开。RecyclerView会失去复用性。在一些RecyclerView条目数量不多的时候,并不会造成多大的印象,但失去复用性会到时候RecyclerView滑出屏幕外无法被回收,数量一旦过多就会造成性能问题。
  • CoordinatorLayout角度:
    1. 使用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

    1. 吸附效果是需要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包裹的内容在接近屏幕顶端的时候会有个吸附效果,之后就会一直吸在屏幕顶端,除非下滑脱离。