Android新控件之MotionLayout+DrawerLa

效果.gif

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

效果:

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

实现方案

DrawerLayout+MotionLayout +MotionScene

思路:

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

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

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    <!-- 控制动画属性  duration时间  motionInterpolator 动画插值器  constraintSetStart和constraintSetEnd  开始和技术的的ConstraintSet -->
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="250"
        motion:motionInterpolator="linear" />

    <!--    配置开始时控件的位置  控件通过id 属性关联布局中的属性-->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="-90"
            android:scaleX="0.8"
            android:scaleY="0.8"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>
    <!--    配置结束时控件的位置  控件通过id 属性关联布局中的属性-->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleX="1.0"
            android:scaleY="1.0"
            android:translationY="200dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>
</MotionScene>

2.主页面xml activity_drawer_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:fitsSystemWindows="false">
    <!--  background 背景颜色 -->
    <!-- 展示内容  -->
    <include layout="@layout/layout_drawer_content" />
    <!-- 菜单内容  -->
    <include layout="@layout/layout_drawer_menu" />


</androidx.drawerlayout.widget.DrawerLayout>

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. 源码地址