原文链接: Android CoordinatorLayout使用示例记录-Stars-One的杂货小窝

简单记录下常用CoordinatorLayout的几个效果代码示例,方便后续有需求的时候参照实现

开始之前,注意下项目material 版本,下文提到的某些属性是在后续版本才有的

implementation("com.google.android.material:material:1.9.0")

一级吸顶效果

效果:

代码:

滚动伸缩显示标题

效果:

代码:

layout_behavior属性设置虽然引用的string,但实际上这个string就是一个全类名!

CollapsingToolbarLayout属性补充

滚动隐藏底部菜单

这里使用了自定义的behavior来实现

Behavior行为控制器：实现了用户可以在子视图上进行的一个或多个交互。这些交互可能包括拖动，滑动，甩动或任何其他手势。

Behavior中常用的重写的方法:

/**
  * 确定使用Behavior的View要依赖的View的类型
  * 只要是CoordinatorLayout内的View的状态发送了变化,该方法就会执行
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  * @return 这里判断dependency所属的View是哪一个, 返回true，onDependentViewChanged才执行,否则不执行
  */
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依赖的View状态改变时回调
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  * @return 当我们改变了child的大小或者位置的时候我们需要返回true
  */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依赖的View移除时回调
  * @param parent  顶层父控件CoordinatorLayout
  * @param child 我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  */
@Override
public void onDependentViewRemoved(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency)

效果(向上滑动时底部控件渐渐隐藏，向下滑动时底部控件渐渐显示):

代码:

package zhan.scollzoomlistview.activity

import android.content.Context
import android.util.AttributeSet
import android.util.Log
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.coordinatorlayout.widget.CoordinatorLayout.Behavior
import com.google.android.material.appbar.AppBarLayout
import kotlin.math.abs

class MyBehavior: CoordinatorLayout.Behavior {
    constructor() : super()
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)

    override fun layoutDependsOn(
        parent: CoordinatorLayout,
        child: View,
        dependency: View
    ): Boolean {
        //这里判断dependency所属的View是哪一个,返回true，onDependentViewChanged才执行,否则不执行
        return dependency is AppBarLayout;
    }

    override fun onDependentViewChanged(
        parent: CoordinatorLayout,
        child: View,
        dependency: View
    ): Boolean {
        /*
        *这里获取dependency的top值,也就是AppBarLayout的top,因为AppBarLayout
        *在是向上滚出界面的,我们的因为是和AppBarLayout相反,每次都取反
        */
        Log.d("ttt", "onDependentViewChanged: ${dependency.top}")
        val myY = -dependency.top
        child.translationY = myY.toFloat()
        return true
    }

}

解释下:

屏幕坐标以左上角为原点,y正方向为向下,而我们手指向上滑动,实际AppBarLayout也在向上滚动(只是屏幕不显示了)

AppBarLayout的top即是y,而初始位置top为0,而后其向上滚动,这个时候的appbarlayout实际top距离已经变为负数了

而我们要修改底部菜单的translationY,实际就是相当于原始位置的y坐标偏移

• 如果 translationY 设置为 50，那么视图的绘制位置会相对于它的原始位置向下平移 50 像素。
• 如果 translationY 设置为 -50，那么视图的绘制位置会向上平移 50 像素。

所以:

• 底部菜单设置正数的translationY,实现的效果就是它向下移动到消失
• 底部菜单设置负数的translationY,实现的效果就是它向上移动到显示

底部菜单的layout_behavior一定要是全类名,否则会出现崩溃问题!

参考

• 基于AppBarLayout实现二级吸顶&踩坑记录 - 知乎
• Android CoordinatorLayout使用 - 掘金