简单的自述一下MotionLayout的用法:这个是个很好用的动画布局,可以做一些看起来很高大上的布局交互
- Transition:位移标签
- motion:constraintSetStart:开始时的布局(我这用的是layout,也可以用id)
- motion:constraintSetEnd:结束时的布局
- motion:duration:秒
- KeyFrameSet:关键帧标签
- KeyPosition:关键的位置标签
- motion:framePosition:帧的位置(例如可以理解为一条直线的50%的位置)
- motion:motionTarget:要移动的布局的id(@layout/start和@layout/end布局里有的id)
- motion:keyPositionType:算是叫样式吧
- motion:percentY:Y轴相对于父布局原点坐标轴的高度偏移
- motion:percentX:X轴相对于父布局原点坐标轴的宽度偏移
- OnSwipe滑动标签
- motion:touchAnchorId:控制该滑动的id
- motion:touchAnchorSide:触摸的一边或一侧
- motion:dragDirection:运动方向
- OnClick点击标签
- 这个很简单可以自己尝试一下,我没写出来
如下是为MotionLayout所需的app:layoutDescription属性的文件:
res/xml/activity_main_scene.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:constraintSetStart="@layout/start"
motion:constraintSetEnd="@layout/end"
motion:duration="3000">
<KeyFrameSet>
<KeyPosition
motion:framePosition="50"
motion:motionTarget="@id/layout1"
motion:keyPositionType="parentRelative"
motion:percentY="0.3"
motion:percentX="0.5" />
<KeyPosition
motion:framePosition="50"
motion:motionTarget="@id/layout2"
motion:keyPositionType="parentRelative"
motion:percentY="0.3"
motion:percentX="0.5" />
<KeyPosition
motion:framePosition="50"
motion:motionTarget="@id/layout3"
motion:keyPositionType="parentRelative"
motion:percentY="0.3"
motion:percentX="0.5" />
</KeyFrameSet>
<OnSwipe
motion:touchAnchorId="@+id/layout3"
motion:touchAnchorSide="top"
motion:dragDirection="dragUp" />
</Transition>
</MotionScene>
我用的为9个Button,每3个嵌套在一个LinearLayout里,MotionLayout继承自拘束布局,版本的话最低好像是可以支持到Android18。MotionLayout每个子View记得加上ID哦,不然会报bug!
- MotionLayout标签
- app:showPaths:是否展示路径,默认是关闭,调试的时候开开来
- app:layoutDescription:布局变化的文件,使用请看上一个的介绍
layout资源布局
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:showPaths="true"
android:id="@+id/motionLayout"
app:layoutDescription="@xml/activity_main_scene">
<LinearLayout
android:id="@+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout3"
android:alpha="1"
app:layout_constraintTop_toBottomOf="@id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
MotionLayout的每个子view的ID需要和end.xml一一对应才能得出效果哦!
layout资源布局
res/layout/start.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout2"
android:layout_marginTop="200px"
app:layout_constraintTop_toBottomOf="@id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout3"
android:alpha="1"
android:layout_marginTop="200px"
app:layout_constraintTop_toBottomOf="@id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:text="1"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="2"
android:layout_weight="1"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:text="3"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
layout资源布局
res/layout/end.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/layout1"
android:layout_width="350px"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toStartOf="@id/layout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="1" />
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="2" />
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout2"
android:layout_width="350px"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/layout1"
app:layout_constraintTop_toTopOf="parent">
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="1" />
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="2" />
<Button
android:layout_width="70px"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:padding="5px"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout3"
android:layout_width="1px"
android:layout_height="wrap_content"
android:alpha="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@id/layout2">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
