motion filter
In this tutorial, we’ll be discussing and implementing the MotionLayout in our android application.
在本教程中,我们将在Android应用程序中讨论和实现MotionLayout。
Android MotionLayout (Android MotionLayout)
Android MotionLayout is introduced with Constraint Layout 2.0. The idea is to create interactive fluid motion like UI layouts with ease.
Android MotionLayout是在Constraint Layout 2.0中引入的。 想法是轻松创建类似于UI布局的交互式流体运动。
Previously, we used to use the following things to animate components in our application.
以前,我们曾经使用以下内容为应用程序中的组件制作动画。
- PropertyAnimation PropertyAnimation
- Animated Vector Drawable 动画矢量可绘制
- CoordinatorLayout 协调器布局
- Layout Transitions 布局过渡
Motion Layout aims to make it better and easier to animate layouts.
Motion Layout旨在使动画制作变得更好,更容易。
To use motion layouts, add the following dependency:
要使用动作布局,请添加以下依赖项:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'
A MotionLayout can be used in place of ConstraintLayout. This is because a MotionLayout has all the properties of a ConstraintLayout(and much more as well shall see!).
可以使用MotionLayout代替ConstraintLayout。 这是因为MotionLayout具有ConstraintLayout的所有属性(还会看到更多!)。
A MotionLayout comprises of three core things:
MotionLayout包含三项核心内容:
- Starting layout 开始布局
- Ending layout that has the ending constraints 具有结尾约束的结尾布局
- Motion scene 运动场景
Starting and ending layouts are basic xml layout.
起始和结束布局是基本的xml布局。
A motion scene is where we define the underlying motion.
We do so inside a <MotionScene/>
tag.
运动场景是我们定义基础运动的地方。
我们在<MotionScene/>
标记内执行此操作。
It can contain a Transition, ConstraintSet, KeyFrameSet, Touch Handling.
它可以包含Transition,ConstraintSet,KeyFrameSet,Touch Handling。
In this tutorial, we’ll focus on Transitions and Touch Handling.
在本教程中,我们将重点介绍过渡和触摸处理。
Let’s look at a sample android application in which we will implement a swipe function on a button on the basis of which the layout would swap its content. We call it SwipeToSwap Application
让我们看一个示例android应用程序,在该应用程序中我们将在按钮上实现滑动功能,在此基础上布局将交换其内容。 我们称它为SwipeToSwap应用程序
项目结构 (Project Structure)
The motion scene is defined in the res | xml folder
运动场景在res | xml文件夹
码 (Code)
The code for the activity_main_start.xml layout is given below:
下面给出了activity_main_start.xml布局的代码:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/motion_scene"
tools:context=".MainActivity">
<TextView
android:id="@+id/textOne"
android:text="Constraint Layout 2.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/button"
android:text="SWIPE TO SWAP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_marginTop="16dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="@+id/textOne"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/textTwo"
android:text="Hello Motion Layouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
app:layoutDescription
is where we set the motion scene on the MotionLayout.
app:layoutDescription
是我们在MotionLayout上设置运动场景的地方。
The code for the activity_main_end.xml
layout is given below. It represents the end state after the transition.
下面给出了activity_main_end.xml
布局的代码。 它表示过渡后的结束状态。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textTwo"
android:text="Hello Motion Layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/button"
android:text="SWIPE TO SWAP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:layout_marginTop="16dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="@+id/textTwo"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="@+id/textOne"
android:text="Constraint Layout 2.0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.motion.widget.MotionLayout>
The code for the motion_scene.xml
file is given below:
下面给出了motion_scene.xml
文件的代码:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:motion="https://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@layout/activity_main_start"
motion:constraintSetEnd="@layout/activity_main_end"
motion:duration="1000">
<OnSwipe
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="top"
motion:dragDirection="dragRight"/>
</Transition>
<Transition
motion:constraintSetStart="@layout/activity_main_end"
motion:constraintSetEnd="@layout/activity_main_start"
motion:duration="1000">
<OnSwipe
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="top"
motion:dragDirection="dragLeft"/>
</Transition>
</MotionScene>
OnSwipe is a type of gesture performed on the UI component.
The UIComponent is specified in the touchAnchorId
along with the swipe direction.
OnSwipe是在UI组件上执行的一种手势。
UIComponent与滑动方向一起在touchAnchorId
指定。
Note: Other interactive gestures such as click can also be set in the following way:
注意:还可以通过以下方式设置其他交互手势,例如单击。
<OnClick
app:target="@+id/button"
app:mode="transitionToEnd"/>
The output when the above application is run on an emulator is given below:
上面的应用程序在模拟器上运行时的输出如下:
That sums up this introductory tutorial on MotionLayout.
总结了有关MotionLayout的入门教程。
You can download the AndroidMotionLayout project from the link below or view the full source code in our Github Repository.
您可以从下面的链接下载AndroidMotionLayout项目,或在我们的Github存储库中查看完整的源代码。
motion filter