Android下拉缩放/平移效果实现

效果预览

效果预览.gif

效果预览: https://img.haomeiwen.com/i13651212/73670cc205ad0b6c.gif

实现方式

1、引入依赖

implementation 'com.scwang.smart:refresh-layout-kernel:2.0.3'

2、新建PersonScaleRefreshLayout.kt 和 ScaleHeaderView.kt

class PersonScaleRefreshLayout(context: Context, attrs: AttributeSet?) :
    SmartRefreshLayout(context, attrs) {

    init {
        addView(
            ScaleHeaderView(context),
            0,
            ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
        )
        setEnableHeaderTranslationContent(false)//或者在xml设置
        setHeaderTriggerRate(1000f)//或者在xml设置
        setEnableLoadMore(false)
        setEnableRefresh(true)
    }
}

class ScaleHeaderView : SimpleComponent, RefreshHeader {

    constructor (context: Context?) : this(context, null)

    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs, 0) {
        addView(View(context), LayoutParams(60.dpToPx(), 60.dpToPx()))
    }

    override fun getSpinnerStyle(): SpinnerStyle {
        return SpinnerStyle.FixedFront
    }

    //拿到需要平移或者缩放的View，根据具体实际进行增删
    private val fraBanner: View? by lazy { (parent as ViewGroup).findViewById(R.id.fraBanner) }
    private val clInfo: View? by lazy { (parent as ViewGroup).findViewById(R.id.clInfo) }
    private val tabViewPager: View? by lazy { (parent as ViewGroup).findViewById(R.id.tabViewPager) }
    private val tabLayout: View? by lazy { ((parent as ViewGroup).findViewById<View?>(R.id.tabLayout)?.parent as? View) }

    override fun onMoving(
        isDragging: Boolean,
        percent: Float,
        offset: Int,
        height: Int,
        maxDragHeight: Int
    ) {
        //向下平移
        clInfo?.translationY = offset.toFloat()
        tabViewPager?.translationY = offset.toFloat()
        tabLayout?.translationY = offset.toFloat()
        //向下平移&缩放
        fraBanner?.translationY = offset.toFloat() * 0.5F
        fraBanner?.scaleX = 1 + percent
        fraBanner?.scaleY = 1 + percent
    }
}

3、引入xml使用

<!-- 可以有其他内容-->
<**.PersonScaleRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srlEnableHeaderTranslationContent="false"
            app:srlHeaderTriggerRate="1000">
      <!-- 包含内容, 切记只能是一个子View-->
</**.PersonScaleRefreshLayout>
<!-- 可以有其他内容-->

4、根据实际需求修改ScaleHeaderView.kt中所有by lazy的View对象。

根据测试，可以同AppBarLayout和CollapsingToolbarLayout一起配合使用。

常见问题：必要时使用如下属性，对平移后裁切的View所在ViewGroup进行设置

android:clipChildren="false"
android:clipToPadding="false"

如果本文对你有帮助就点个赞支持下吧~~~