一、前言

简单实现原生自带的滚动折叠效果。

二、简单滚动效果实例

2.1 Toolbar 滚动效果

Toolbar 帮我们实现了标题栏，但是很多时候并不能满足需求，所以不如自定义标题栏好。简单了解下 Toolbar的使用。

  • 滚动效果，效果图：

iShot2020-08-1322.28.48.gif
布局文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto">
  7.     <com.google.android.material.appbar.AppBarLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content">
  10.         <androidx.appcompat.widget.Toolbar
  11.             android:id="@+id/tb_tb_scroll_tb"
  12.             android:layout_width="match_parent"
  13.             android:layout_height="wrap_content"
  14.             app:navigationIcon="@mipmap/ic_navigation_back_white"
  15.             app:title="toolbar滚动"
  16.             app:titleTextColor="@color/white"
  17.             android:background="@color/blue_74D3FF"
  18.            app:layout_scrollFlags="scroll|enterAlways|snap"/>
  20.     </com.google.android.material.appbar.AppBarLayout>
  23.     <include layout="@layout/content_scrolling"/>
  25. <!--   <androidx.core.widget.NestedScrollView-->
  26. <!--       android:layout_width="match_parent"-->
  27. <!--       android:layout_height="match_parent"-->
  28. <!--       app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">-->
  29. <!--       <TextView-->
  30. <!--           android:layout_width="wrap_content"-->
  31. <!--           android:layout_height="wrap_content"-->
  32. <!--           android:layout_margin="@dimen/m12"-->
  33. <!--           android:text="@string/large_text" />-->
  34. <!--   </androidx.core.widget.NestedScrollView>-->
  36. <!--    悬浮按钮-->
  37. <com.google.android.material.floatingactionbutton.FloatingActionButton
  38.     android:id="@+id/fab_tb_scroll_menu"
  39.     android:layout_width="wrap_content"
  40.     android:layout_height="wrap_content"
  41.     android:layout_gravity="end|bottom"
  42.     android:layout_margin="@dimen/m12"
  43.     android:src="@mipmap/ic_navigation_menu"/>
  45. </androidx.coordinatorlayout.widget.CoordinatorLayout>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     app:layout_behavior="@string/appbar_scrolling_view_behavior"
  8.     >
  10.     <TextView
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:layout_margin="@dimen/m12"
  14.         android:text="@string/large_text" />
  16. </androidx.core.widget.NestedScrollView>

2.2 简单折叠布局

效果图：
iShot2020-08-1323.13.13.gif
布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto">
  7.     <com.google.android.material.appbar.AppBarLayout
  8.         android:id="@+id/abl_collaspone_appbar"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="250dp"
  11.         android:background="@color/red_FF8EB7">
  12.         <com.google.android.material.appbar.CollapsingToolbarLayout
  13.             android:id="@+id/ctl_collaspone_collapsing"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="match_parent"
  16.             app:contentScrim="@color/blue_74D3FF"
  17.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  18.             <ImageView
  19.                 android:layout_width="match_parent"
  20.                 android:layout_height="match_parent"
  21.                 android:src="@mipmap/image13"
  22.                 android:scaleType="centerCrop"
  23.                 app:layout_collapseMode="parallax"/>
  24.                 <androidx.appcompat.widget.Toolbar
  25.                     android:id="@+id/tb_collaspingone_tb"
  26.                     android:layout_width="match_parent"
  27.                     android:layout_height="?attr/actionBarSize"
  28.                     app:layout_collapseMode="pin"
  29.                     app:titleTextColor="@color/white"
  30.                     app:navigationIcon="@mipmap/ic_navigation_back_white"/>
  33.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  37.     </com.google.android.material.appbar.AppBarLayout>
  39.     <include layout="@layout/content_scrolling"/>
  41.     <com.google.android.material.floatingactionbutton.FloatingActionButton
  42.         android:id="@+id/fab_collaspingone_fab"
  43.         android:layout_width="wrap_content"
  44.         android:layout_height="wrap_content"
  45.         android:src="@drawable/ic_cloud"
  46.         app:layout_anchor="@id/abl_collaspone_appbar"
  47.      app:layout_anchorGravity="end|bottom"
  48.         android:layout_margin="@dimen/m10"/>
  50. </androidx.coordinatorlayout.widget.CoordinatorLayout>

Activity:

  1. class CollapsingOneActivity: AppCompatActivity() {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  4.         setContentView(R.layout.activity_collasping_one)
  5.         /*
  6.         layout_collapseMode: 用来指当前控件在 CollapsingToolbarLayout 在折叠过程中的折叠模式,
  7.                                             其中 Toolbar 指定成 pin, 表示在折叠过程中位置始终保持不变,
  8.                                             ImageView 指定成 parallax,表示在折叠过程中会有一定的错位偏移
  9.          */
  11.         fab_collaspingone_fab.setOnClickListener {
  12.             Snackbar.make(fab_collaspingone_fab,"hello",Snackbar.LENGTH_SHORT)
  13.                 .show()
  14.         }
  15.         tb_collaspingone_tb.setNavigationOnClickListener {
  16.             finish()
  17.         }
  18.     }
  19. }

2.3 透明状态栏简单折叠布局

效果图：
iShot2020-08-1323.24.59.gif
布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:fitsSystemWindows="true">
  8.     <com.google.android.material.appbar.AppBarLayout
  9.         android:id="@+id/abl_collaspone_appbar"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="250dp"
  12.         android:background="@color/red_FF8EB7"
  13.         android:fitsSystemWindows="true">
  15.         <com.google.android.material.appbar.CollapsingToolbarLayout
  16.             android:id="@+id/ctl_collaspone_collapsing"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent"
  19.             android:fitsSystemWindows="true"
  20.             app:contentScrim="@color/blue_74D3FF"
  21.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  23.             <ImageView
  24.                 android:layout_width="match_parent"
  25.                 android:layout_height="match_parent"
  26.                 android:fitsSystemWindows="true"
  27.                 android:scaleType="centerCrop"
  28.                 android:src="@mipmap/image13"
  29.                 app:layout_collapseMode="parallax" />
  31.             <androidx.appcompat.widget.Toolbar
  32.                 android:id="@+id/tb_collaspingone_tb"
  33.                 android:layout_width="match_parent"
  34.                 android:layout_height="?attr/actionBarSize"
  35.                 app:layout_collapseMode="pin"
  36.                 app:navigationIcon="@mipmap/ic_navigation_back_white"
  37.                 app:titleTextColor="@color/white" />
  40.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  43.     </com.google.android.material.appbar.AppBarLayout>
  45.     <include layout="@layout/content_scrolling" />
  47.     <com.google.android.material.floatingactionbutton.FloatingActionButton
  48.         android:id="@+id/fab_collaspingone_fab"
  49.         android:layout_width="wrap_content"
  50.         android:layout_height="wrap_content"
  51.         android:layout_margin="@dimen/m10"
  52.         android:src="@drawable/ic_cloud"
  53.         app:layout_anchor="@id/abl_collaspone_appbar"
  54.         app:layout_anchorGravity="end|bottom" />
  56. </androidx.coordinatorlayout.widget.CoordinatorLayout>

Activity:

  1. class CollapsingOneActivity: AppCompatActivity() {
  2.     override fun onCreate(savedInstanceState: Bundle?) {
  3.         super.onCreate(savedInstanceState)
  4.         setContentView(R.layout.activity_collasping_one)
  6.         //设置沉浸式状态栏,可以设置状态栏颜色
  7.         StatusBarUtils.initStatusBarStyle(this,true)
  8.         /*
  9.         layout_collapseMode: 用来指当前控件在 CollapsingToolbarLayout 在折叠过程中的折叠模式,
  10.                                             其中 Toolbar 指定成 pin, 表示在折叠过程中位置始终保持不变,
  11.                                             ImageView 指定成 parallax,表示在折叠过程中会有一定的错位偏移
  12.          */
  14.         fab_collaspingone_fab.setOnClickListener {
  15.             Snackbar.make(fab_collaspingone_fab,"hello",Snackbar.LENGTH_SHORT)
  16.                 .show()
  17.         }
  18.         tb_collaspingone_tb.setNavigationOnClickListener {
  19.             finish()
  20.         }
  21.     }
  22. }

2.3 透明状态栏简单折叠布局带标题

设置折叠时标题居中无效，会因为设置了返回按钮而偏向右边，效果图：
iShot2020-08-1611.22.36.gif
布局和上面完全一样，可以在 xml 中设置图标相关，也可以在代码中设置，在代码中设置如下：

  1.  //折叠标题设置
  2.         ctl_collaspone_collapsing.title = "测试标题"
  3.         ctl_collaspone_collapsing.collapsedTitleGravity = Gravity.START
  4.         ctl_collaspone_collapsing.expandedTitleGravity = Gravity.BOTTOM
  5.         ctl_collaspone_collapsing.setCollapsedTitleTextColor(ContextCompat.getColor(this,R.color.red))
  6.         ctl_collaspone_collapsing.setExpandedTitleColor(ContextCompat.getColor(this,R.color.blue_74D3FF))

三、加上刷新

    1. 第一种，刷新和折叠布局平级，适用于折叠布局不是很高的情况

效果图：
iShot2020-08-1721.56.14.gif
xml 布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     xmlns:app="http://schemas.android.com/apk/res-auto">
  8.     <com.google.android.material.appbar.AppBarLayout
  9.         android:id="@+id/appbar_refresh_appbar"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="250dp"
  12.         android:background="@color/red_FF8EB7"
  13.        >
  15.         <com.google.android.material.appbar.CollapsingToolbarLayout
  16.             android:layout_width="match_parent"
  17.             android:layout_height="match_parent"
  18.             app:contentScrim="@color/blue_74D3FF"
  19.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
  20.             >
  22.             <ImageView
  23.                 android:layout_width="match_parent"
  24.                 android:layout_height="match_parent"
  25.                 android:scaleType="centerCrop"
  26.                 android:src="@mipmap/image13"
  27.                 app:layout_collapseMode="parallax" />
  29.             <androidx.appcompat.widget.Toolbar
  30.                 android:id="@+id/tb_collaspingone_tb"
  31.                 android:layout_width="match_parent"
  32.                 android:layout_height="?attr/actionBarSize"
  33.                 app:layout_collapseMode="pin"
  34.                 app:navigationIcon="@mipmap/ic_navigation_back_white"
  35.                 app:titleTextColor="@color/white"
  36.                 />
  39.         </com.google.android.material.appbar.CollapsingToolbarLayout>
  42.     </com.google.android.material.appbar.AppBarLayout>
  44.     <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
  45.         android:id="@+id/srl_refresh_refresh"
  46.         android:layout_width="match_parent"
  47.         android:layout_height="match_parent"
  48.         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
  49.        >
  50.         <androidx.recyclerview.widget.RecyclerView
  51.             android:id="@+id/rv_refresh_refresh"
  52.             android:layout_width="match_parent"
  53.             android:layout_height="wrap_content"/>
  55.     </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
  58.     <com.google.android.material.floatingactionbutton.FloatingActionButton
  59.         android:id="@+id/fab_refresh_fab"
  60.         android:layout_width="wrap_content"
  61.         android:layout_height="wrap_content"
  62.         android:layout_margin="@dimen/m10"
  63.         android:src="@drawable/ic_cloud"
  64.         app:layout_anchor="@id/appbar_refresh_appbar"
  65.         app:layout_anchorGravity="end|bottom" />
  67. </androidx.coordinatorlayout.widget.CoordinatorLayout>

activity:

  1. class RefreshActivity:AppCompatActivity() {
  3.     val list = arrayListOf("测试数据一","测试数据二","测试数据三","测试数据四","测试数据五","测试数据六"
  4.         ,"测试数据七","测试数据八","测试数据九","测试数据一","测试数据二","测试数据三","测试数据四","测试数据五","测试数据六"
  5.         ,"测试数据七","测试数据八","测试数据九")
  7.     val mAdapter by lazy { RefreshAdapter() }
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  10.         setContentView(R.layout.activity_refresh)
  12.         rv_refresh_refresh?.run {
  13.             layoutManager = LinearLayoutManager(this@RefreshActivity)
  14.             adapter = mAdapter
  15.             setHasFixedSize(true)
  16.         }
  17.         mAdapter.setList(list)
  18.         //mAdapter.setNewInstance()
  19.         srl_refresh_refresh.setOnRefreshListener {
  20.             srl_refresh_refresh.postDelayed({
  21.                 srl_refresh_refresh.isRefreshing = false
  22.             },1000)
  23.         }
  24.         fab_refresh_fab.setOnClickListener {
  25.             Snackbar.make(fab_refresh_fab,"hello", Snackbar.LENGTH_SHORT)
  26.                 .show()
  27.         }
  28.     }
  29. }

adapter:

  1. class RefreshAdapter(layoutId: Int = R.layout.item_refresh)
  2.     : BaseQuickAdapter<String,BaseViewHolder>(layoutId){
  3.     override fun convert(holder: BaseViewHolder, item: String) {
  4.         holder.itemView.tv_item_refresh_text.text = item
  5.     }
  6. }
    1. 刷新放在最外层，需要处理滑动冲突

效果图：
iShot2020-08-1721.59.35.gif
布局：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
  3.     android:id="@+id/srl_refresh_refresh"
  4.     xmlns:android="http://schemas.android.com/apk/res/android"
  5.     xmlns:tools="http://schemas.android.com/tools"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent"
  8.     xmlns:app="http://schemas.android.com/apk/res-auto">
  10.     <androidx.coordinatorlayout.widget.CoordinatorLayout
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent">
  14.         <com.google.android.material.appbar.AppBarLayout
  15.             android:id="@+id/appbar_refresh_appbar"
  16.             android:layout_width="match_parent"
  17.             android:layout_height="250dp"
  18.             android:background="@color/red_FF8EB7"
  19.             >
  21.             <com.google.android.material.appbar.CollapsingToolbarLayout
  22.                 android:layout_width="match_parent"
  23.                 android:layout_height="match_parent"
  24.                 app:contentScrim="@color/blue_74D3FF"
  25.                 app:layout_scrollFlags="scroll|exitUntilCollapsed"
  26.                 >
  28.                 <ImageView
  29.                     android:layout_width="match_parent"
  30.                     android:layout_height="match_parent"
  31.                     android:scaleType="centerCrop"
  32.                     android:src="@mipmap/image13"
  33.                     app:layout_collapseMode="parallax" />
  35.                 <androidx.appcompat.widget.Toolbar
  36.                     android:id="@+id/tb_collaspingone_tb"
  37.                     android:layout_width="match_parent"
  38.                     android:layout_height="?attr/actionBarSize"
  39.                     app:layout_collapseMode="pin"
  40.                     app:navigationIcon="@mipmap/ic_navigation_back_white"
  41.                     app:titleTextColor="@color/white"
  42.                     />
  45.             </com.google.android.material.appbar.CollapsingToolbarLayout>
  48.         </com.google.android.material.appbar.AppBarLayout>
  51.             <androidx.recyclerview.widget.RecyclerView
  52.                 android:id="@+id/rv_refresh_refresh"
  53.                 android:layout_width="match_parent"
  54.                 android:layout_height="match_parent"
  55.                 app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
  60.         <com.google.android.material.floatingactionbutton.FloatingActionButton
  61.             android:id="@+id/fab_refresh_fab"
  62.             android:layout_width="wrap_content"
  63.             android:layout_height="wrap_content"
  64.             android:layout_margin="@dimen/m10"
  65.             android:src="@drawable/ic_cloud"
  66.             app:layout_anchor="@id/appbar_refresh_appbar"
  67.             app:layout_anchorGravity="end|bottom" />
  69.     </androidx.coordinatorlayout.widget.CoordinatorLayout>
  73. </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

activity:

  1. class Refresh2Activity:AppCompatActivity() {
  3.     val list = arrayListOf("测试数据一","测试数据二","测试数据三","测试数据四","测试数据五","测试数据六"
  4.         ,"测试数据七","测试数据八","测试数据九","测试数据一","测试数据二","测试数据三","测试数据四","测试数据五","测试数据六"
  5.         ,"测试数据七","测试数据八","测试数据九")
  7.     val mAdapter by lazy { RefreshAdapter() }
  8.     override fun onCreate(savedInstanceState: Bundle?) {
  9.         super.onCreate(savedInstanceState)
  10.         setContentView(R.layout.activity_refresh2)
  12.         rv_refresh_refresh?.run {
  13.             layoutManager = LinearLayoutManager(this@Refresh2Activity)
  14.             adapter = mAdapter
  15.             setHasFixedSize(true)
  16.         }
  17.         mAdapter.setList(list)
  18.         //mAdapter.setNewInstance()
  19.         srl_refresh_refresh.setOnRefreshListener {
  20.             srl_refresh_refresh.postDelayed({
  21.                 srl_refresh_refresh.isRefreshing = false
  22.             },1000)
  23.         }
  24.         //下拉刷新和下拉会有冲突
  25.         appbar_refresh_appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener(){
  26.             override fun onStateChanged(appBarLayout: AppBarLayout?, state: State?) {
  27.                 if( state == State.EXPANDED ) {
  28.                     //展开状态
  29.                     srl_refresh_refresh.isEnabled = true
  30.                 }else if(state == State.COLLAPSED){
  31.                     //折叠状态
  32.                     srl_refresh_refresh.isEnabled = false
  33.                 }else {
  34.                     //中间状态
  35.                     srl_refresh_refresh.isEnabled = false
  36.                 }
  37.             }
  39.         })
  40.         //悬浮按钮
  41.         fab_refresh_fab.setOnClickListener {
  42.             Snackbar.make(fab_refresh_fab,"hello", Snackbar.LENGTH_SHORT)
  43.                 .show()
  44.         }
  45.     }
  46. }

AppBarStateChangeListener：

  1. public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
  3.     public enum State {
  4.         EXPANDED,
  5.         COLLAPSED,
  6.         IDLE
  7.     }
  9.     private State mCurrentState = State.IDLE;
  11.     @Override
  12.     public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
  13.         if (i == 0) {
  14.             if (mCurrentState != State.EXPANDED) {
  15.                 onStateChanged(appBarLayout, State.EXPANDED);
  16.             }
  17.             mCurrentState = State.EXPANDED;
  18.         } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
  19.             if (mCurrentState != State.COLLAPSED) {
  20.                 onStateChanged(appBarLayout, State.COLLAPSED);
  21.             }
  22.             mCurrentState = State.COLLAPSED;
  23.         } else {
  24.             if (mCurrentState != State.IDLE) {
  25.                 onStateChanged(appBarLayout, State.IDLE);
  26.             }
  27.             mCurrentState = State.IDLE;
  28.         }
  29.     }
  31.     public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
  32. }

四、地址和参考

demo
实现折叠式Toolbar：CollapsingToolbarLayout 使用完全解析
链接