Android新控件之MotionLayout 个人主页页面悬浮,缩放,平移,旋转效果<六>

效果.gif

近年来,越来越多的类似博客主页页面 顶部背景图搭配文字出现各种各样的效果,例如顶部悬浮,背景色变换 文字移动,控件移动等效果,原先 使用CoordinatorLayout 控件监听 移动变化然后再给各个控件设置动画以及属性,来完成实现效果

期望:

1. 背景透明度随滑动变化
2. 名字随滑动变化
3. 头像随滑动变化

思路

CoordinatorLayout+MotionLayout +MotionScene

实现

1. MotionScene scene_coordinator_layout02.xml 布局

2. 页面布局 activity_mothion_coordinator_layout2.xml

3. Activity 代码

package com.wu.material

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import com.google.android.material.appbar.AppBarLayout

/**
 * @author wkq
 *
 * @date 2022年01月24日 13:56
 *
 *@des
 *
 */

class CoordinatorLayout2Activity : AppCompatActivity() {

    @SuppressLint("RestrictedApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_mothion_coordinator_layout2)
        //显示路径
        var motionLayout = findViewById(R.id.ml)
        motionLayout.setDebugMode(MotionLayout.DEBUG_SHOW_PATH)


        var appBarLayout = findViewById(R.id.app_layout)
        appBarLayout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
            override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
                //绑定 MotionLayout偏移量
                motionLayout.progress = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
            }
        })
    }


}

总结

参考Google的 Demo 实现了随着页面滑动顶部背景图,名字以及头像的简单动画

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址