一、效果图

仿摩拜个人中心界面 - 图1iShot2020-08-2200.16.59.gif

二、实现

    1. 布局界面 ``` <?xml version=”1.0” encoding=”utf-8”?>

  1.         <RelativeLayout
  2.             android:layout_width="match_parent"
  3.             android:layout_height="220dp"
  4.             app:layout_collapseMode="parallax" >
  5.             <ImageView
  6.                 android:layout_width="match_parent"
  7.                 android:layout_height="match_parent"
  8.                 android:src="@mipmap/wuhuang"
  9.                 android:scaleType="centerCrop"/>
  1.         </RelativeLayout>
  3.         <androidx.appcompat.widget.Toolbar
  4.             android:id="@+id/tb_mt_toolbar"
  5.             android:layout_width="match_parent"
  6.             android:layout_height="?attr/actionBarSize"
  7.             app:layout_collapseMode="pin"
  8.          app:contentInsetStart="0dp"
  9.             >
  10.             <RelativeLayout
  11.                 android:layout_width="match_parent"
  12.                 android:layout_height="match_parent">
  14.                 <ImageView
  15.                     android:id="@+id/iv_mt_back"
  16.                     android:layout_width="60dp"
  17.                     android:layout_height="match_parent"
  18.                     android:src="@mipmap/ic_navigation_back_white"
  19.                     android:scaleType="center"/>
  20.                 <TextView
  21.                     android:id="@+id/tv_mt_title"
  22.                     android:layout_width="wrap_content"
  23.                     android:layout_height="wrap_content"
  24.                     android:text="膜拜单车"
  25.                     android:textSize="17sp"
  26.                     android:textColor="@color/red_FF6D84"
  27.                     android:layout_centerInParent="true"
  28.                     android:background="@color/blue_74D3FF"
  29.                     />
  30.             </RelativeLayout>
  34.         </androidx.appcompat.widget.Toolbar>
  37.     </com.google.android.material.appbar.CollapsingToolbarLayout>
  41. </com.google.android.material.appbar.AppBarLayout>
  43. <include layout="@layout/content_scrolling"/>

  2. - 2. AppBarStateChangeListener

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

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

}

  2. - 3. activity

class MeiTuanHomeActivity : AppCompatActivity(R.layout.activity_meituan_home) { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)

  1.     //tb_mt_toolbar.setNavigationOnClickListener { finish() }
  2.     iv_mt_back.setOnClickListener { finish() }

// ctl_mt_collapsing.run { // title = “个人中心” // setExpandedTitleColor(ContextCompat.getColor(this@MeiTuanHomeActivity,R.color.transparent)) // setCollapsedTitleTextColor(ContextCompat.getColor(this@MeiTuanHomeActivity,R.color.red)) // expandedTitleGravity = Gravity.CENTER_HORIZONTAL // collapsedTitleGravity = Gravity.CENTER_HORIZONTAL // }

// appbar_mt_appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener(){ // override fun onStateChanged(appBarLayout: AppBarLayout?, state: State?, i: Int) { // LogUtils.e(i) // //对标题设置渐变,向上滑动时i —> 0—- -448,标题先是变不见,后又可见(alpha 0-1) // // when(state){ // //折叠 i == -492 // State.COLLAPSED -> { // alpha = 1f // } // //展开 i == 0 // State.EXPANDED -> { // alpha = 0f // } // //中间状态 // State.IDLE -> { // val a = - (i / 200) // val max = 0.3f.coerceAtLeast(a.toFloat()) // alpha = max // LogUtils.e(“alpha = $alpha ———max = $max”,”——alpha—->”) // } // } // tv_mt_title.alpha = alpha // } // // })

  1.     appbar_mt_appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener() {
  2.         override fun onStateChanged(appBarLayout: AppBarLayout?, state: State?, i: Int) {
  3.             when (state) {
  4.                 //折叠 i == -492
  5.                 State.COLLAPSED -> {
  6.                     tv_mt_title.text = "个人中心"
  7.                 }
  8.                 //展开 i == 0
  9.                 State.EXPANDED -> {
  10.                     tv_mt_title.text = "膜拜单车"
  11.                 }
  12.                 //中间状态
  13.                 State.IDLE -> {
  14.                     //LogUtils.e("alpha = $alpha ------max = $max","----alpha--->")
  15.                 }
  16.             }
  17.         }
  19.         override fun onStateChangedAny(appBarLayout: AppBarLayout?, verticalOffset: Int) {
  20.             super.onStateChangedAny(appBarLayout, verticalOffset)
  21.             maxVerticalOffset = appBarLayout?.totalScrollRange?.toFloat()!!
  22.             val a = -(verticalOffset / maxVerticalOffset)//渐变从0 - 1
  23.             //LogUtils.e("verticalOffset = $verticalOffset ---- a = $a ---------max = $maxVerticalOffset")
  24.             if (-verticalOffset <= maxVerticalOffset / 2) {
  25.                 title = "膜拜单车"
  26.                 alpha = (1 + verticalOffset / (maxVerticalOffset / 2))
  27.             } else {
  28.                 title = "个人中心"
  29.                 alpha = -(1 + verticalOffset / (maxVerticalOffset / 2))
  30.             }
  31.             LogUtils.e("$verticalOffset-----${appBarLayout.totalScrollRange / 2 + verticalOffset}")
  32.             //减小判断的范围,在这个范围内调用 settext 方法会一直触发onOffsetChanged,减小范围来减少触发
  33.             if (appBarLayout.totalScrollRange / 2 + verticalOffset in -20..20) {
  34.                 setToolbarTitle()
  35.             }
  36.             tv_mt_title.alpha = alpha
  37.         }
  38.     })
  40. }
  42. override fun onResume() {
  43.     super.onResume()
  44.     //appbar_mt_appbar.addOnOffsetChangedListener(this)
  45. }
  47. override fun onPause() {
  48.     super.onPause()
  49.     //appbar_mt_appbar.removeOnOffsetChangedListener(this)
  50. }
  52. var alpha = 0f//渐变从1 - 0,到达折叠布局中间,再从 0 - 1
  53. var maxVerticalOffset = 0f//折叠布局最大高度
  54. var title = ""

// override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) { // if (appBarLayout != null) { // //确保折叠和展开状态时,标题一定是对的 // if (abs(verticalOffset) in -appBarLayout.totalScrollRange + 1 .. -appBarLayout.totalScrollRange + 5){//折叠状态 // tv_mt_title.text = “个人中心” // }else if (verticalOffset in -1 downTo -5){//展开状态 // tv_mt_title.text = “膜拜单车” // } // } // maxVerticalOffset = appBarLayout?.totalScrollRange?.toFloat()!! // val a = -(verticalOffset / maxVerticalOffset)//渐变从0 - 1 // //LogUtils.e(“verticalOffset = $verticalOffset —— a = $a ————-max = $maxVerticalOffset”) // if (-verticalOffset <= maxVerticalOffset / 2) { // title = “膜拜单车” // alpha = (1 + verticalOffset / (maxVerticalOffset / 2)) // } else { // title = “个人中心” // alpha = -(1 + verticalOffset / (maxVerticalOffset / 2)) // } // //Toast.makeText(this, “$verticalOffset”, Toast.LENGTH_SHORT).show() //// tv_mt_title.text = title // LogUtils.e(“$verticalOffset——-${appBarLayout.totalScrollRange / 2 + verticalOffset}”) // //减小判断的范围,在这个范围内调用 settext 方法会一直触发onOffsetChanged,减小范围来减少触发 // if (appBarLayout.totalScrollRange / 2 + verticalOffset in -20..20){ // setToolbarTitle() // } // tv_mt_title.alpha = alpha // }

  1. private fun setToolbarTitle() {
  2.     LogUtils.e("settoolbar---$title")
  3.     tv_mt_title.text = title
  5. }

}

  2. - 4. 重点
  4. 在监听折叠布局时，使用 AppbarLayout 的addOnOffsetChangedListener方法，同时使用自定义抽象类AppBarStateChangeListener，一般使用这个方法就可以监听状态onStateChanged，可以很方便监听折叠和展开状态，缺点是无法监听到中间转态，所以又加了一个方法onStateChangedAny，可以在需要时调用。
  6. 监听时设置标题渐变度和文字内容，如果仅仅设置渐变度从 0-1，那么只要实现下面这个就可以了 val a = -(verticalOffset / maxVerticalOffset)//渐变从0 - 1。
  8. 如果想设置渐变度从 1-0 ，再从 0-1，只需要实现下面的方法，

if (-verticalOffset <= maxVerticalOffset / 2) { title = “膜拜单车” alpha = (1 + verticalOffset / (maxVerticalOffset / 2)) } else { title = “个人中心” alpha = -(1 + verticalOffset / (maxVerticalOffset / 2)) }

  1. 注意设置标题时，有个问题，在滚动的范围内设置调用 setText 方法会一直触发监听折叠的方法，原因我也不知道，如果有知道的，或者有更好的解决方法可以留言。我的解决方法是在设置改变标题时，减小改变的条件，在使用时不会一直处在这个条件下就不会一直触发onStateChangedAny方法，不过缺点是如果滑动太快就会无法监听到，所以要在onStateChanged里设置好折叠和展开的标题，确保最终标题准确。
  3. 如果出现监控失效的情况，可以采用下面这种方法监听：

override fun onResume() { super.onResume() //appbar_mt_appbar.addOnOffsetChangedListener(this) }

  1. override fun onPause() {
  2.     super.onPause()
  3.     //appbar_mt_appbar.removeOnOffsetChangedListener(this)
  4. }

``` 如果想让折叠布局不响应下面的滚动，可以这么设置nsvouter._isNestedScrollingEnabled = false，效果就像哔哩哔哩播放界面，播放时滚动不折叠。

三、地址和参考

demo
高仿美团APP页面滑动标题栏渐变效果