Android新控件之MotionLayout+DrawerLayout 实现页面侧滑+博客页面联动滑动效果<七>

效果.gif

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

效果:

1. 侧滑菜单实现+子View动画效果实现
2. 博客页面联动动画实现

实现方案

DrawerLayout+MotionLayout +MotionScene

思路:

1. DrawerLayout+ MotionLayout 实现侧滑效果
2. CoordinatorLayout +MotionLayout 实现博客页面效果(参考上篇文章)
3. MotionScene动画配置,联动动画实现

1. MotionScene文件 scene_drawer_layout_menu.xml (放在xml文件夹下)

2.主页面xml activity_drawer_layout.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 SidePanelActivity : AppCompatActivity() {

    @SuppressLint("RestrictedApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_side_panel)
    }


}

总结

实现了侧滑菜单的效果,其中包含了侧滑效果,centent页面缩放效果 menu页面子控件缩放旋转效果.又复杂的效果可以根据业务需求动态配置自己想要的动画效果

注意!!!
部分代码未贴出 详细代码参见源码,部分功能参考博客页面效果

参考文献

1.Google的MotionLayout介绍说明

2.MotionLayout的文档简介

3.MotionLayout 源码地址

4. 源码地址