当前位置：网站首页>Use of MotionLayout

Use of MotionLayout

2022-08-04 07:32:00 【Mr_Tony】

文章目录

一、前言
二、基本用法
三、参考链接

一、前言

MotionLayoutCan manage the animation of motion tracks and controls in the app.因为是ConstraintLayout的子类,So many properties are andConstraintLayout一样的.This animation is compared to property animation、Frame-by-frame animation has more features,And it can also be expanded,并且可以和CoordinatorLayout进行配合使用.And it will be much simpler to use,Some animation effects are fully functionalMotionLayoutinstead of customizingView.Part of the work efficiency can be improved,The basic usage is recorded here,Do a simple understanding.The rest of the usage can be viewed in the official documentation at the end of the article

二、基本用法

需要添加依赖

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

First create a layout here,让里面的TextView做动画效果,注意其id

activity_montion.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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" app:layoutDescription="@xml/scene_01" tools:context=".MotionActivity">
    <TextView android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标题" android:layout_marginTop="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>

创建res/xml/scene_01.xml,内容如下,pay attention to its movementidwith the above layout movementid保持一致

<?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:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000">
        <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

</MotionScene>

以下来自官方文档

请注意以下几点：
<Transition> 包含运动的基本定义.
motion:constraintSetStart 和 motion:constraintSetEnd 指的是运动的端点.这些端点在 MotionScene 后面的 <ConstraintSet> 元素中定义.
motion:duration 指定完成运动所需的毫秒数.
<OnSwipe> Allows you to control movement with a touch.
motion:touchAnchorId 指的是您可以滑动并拖动的视图.
motion:touchAnchorSide 表示我们从右侧拖动视图.
motion:dragDirection 表示拖动的进度方向.例如,motion:dragDirection="dragRight" 表示当您向右拖动时,进度会增加.
<ConstraintSet> is where the various constraints that describe your movement are defined.在此示例中,We define one for each endpoint of the motion ConstraintSet.These endpoints are centered vertically（通过 app:layout_constraintTop_toTopOf="parent" 和 app:layout_constraintBottom_toBottomOf="parent"）.在水平方向上,The endpoints are on the far left and far right of the screen.