Android新控件之MotionLayout 个人主页页面悬浮

效果.gif

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

期望:

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

思路

CoordinatorLayout+MotionLayout +MotionScene

实现

1. MotionScene scene_coordinator_layout02.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">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:motionInterpolator="linear" />


    <ConstraintSet android:id="@+id/start">
        <!-- 背景透明度变化 alpha  -->
        <Constraint
            android:id="@+id/backgroundIcon"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleX="1.1"
            android:scaleY="1.1"
            android:alpha="1.0" />

        <Constraint
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名"
            android:textColor="#FFF"
            android:textSize="16dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.26" />

        <Constraint
            android:id="@+id/icon"
            android:layout_width="64dp"
            android:layout_height="64dp"

            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:background="@mipmap/roard"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/name"
            motion:shapeAppearanceOverlay="@style/circleImageStyle" />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@id/backgroundIcon"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:translationY="100dp"
            android:translationX="0dp"
            android:alpha="0.2" />
        <!-- 文字靠左展示 -->
        <Constraint
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="用户名"
            android:textColor="#FFF"
            android:textSize="16dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
        <!-- 头像靠右展示 -->
        <Constraint
            android:id="@+id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@mipmap/roard"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:shapeAppearanceOverlay="@style/circleImageStyle" />
    </ConstraintSet>


</MotionScene>

2. 页面布局 activity_mothion_coordinator_layout2.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="false">

    <!-- 顶部布局   -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="180dp">

        <!--      minHeight: 最小高度  -->
        <!--      background: 背景色  -->
        <!--      layoutDescription : 配置文件-->
        <androidx.constraintlayout.motion.widget.MotionLayout

            android:id="@+id/ml"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:fitsSystemWindows="false"
            android:minHeight="40dp"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:layoutDescription="@xml/scene_coordinator_layout02"
            app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed"
            tools:ignore="MotionLayoutInvalidSceneFileReference">


            <ImageView
                android:id="@+id/backgroundIcon"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/sea" />

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="用户名"
                android:textColor="#FFF"
                android:textSize="16dp" />

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/icon"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:background="@mipmap/roard"
                app:shapeAppearanceOverlay="@style/circleImageStyle" />


        </androidx.constraintlayout.motion.widget.MotionLayout>

    </com.google.android.material.appbar.AppBarLayout>
    <!-- 移动的控件 -->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollable"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="@string/large_text" />

    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

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<MotionLayout>(R.id.ml)
        motionLayout.setDebugMode(MotionLayout.DEBUG_SHOW_PATH)


        var appBarLayout = findViewById<AppBarLayout>(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. 源码地址