Android新控件之MotionLayout效果:仿京东顶部搜索框变化效果<十>

搜索框效果.gif

近年来越来越多的App首页搜索控件添加了动画 什么SVG展示搜索图标动画,以及滑动中变化搜索框的动画.本文就是MotionLayout 简单实现收拾框的简单平移,背景缩放,搜索框尺寸变化的效果

目标

• 背景缩放,渐变
• 搜索框尺寸变成置顶宽度
• 搜索框悬浮

思路

CoordinatorLayout+MotionLayout +ScrollView,CoordinatorLayout关联滑动,MotionLayout 实现关联滑动中的动画.滑动中修改背景的缩放大小从 1.2 变成 1.0 透明度从 1.0 到0.2 变化 咋此期间动态控制 搜索控件的宽度

实现

1.MotionScene 配置动画效果 scene_search.xml(xml包下)

2.页面布局 activity_search_layout.xml

3.页面代码

package com.wu.material.activity

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
import com.wu.material.R

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

class SearchLayoutActivity : AppCompatActivity() {

    @SuppressLint("RestrictedApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_layout)
        //显示路径
        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()!!
            }
        })
    }


}

总结

滑动搜索框动画简单实现,有兴趣的可以多搞几个控件实现关联动画,什么头像移动,索索图标切换什么的

注意!!!
MotionScene 文件放在新建的../res/xml文件夹下

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址