參考官方文檔桐猬,手敲一份代碼:
https://developer.android.com/training/constraint-layout/motionlayout?hl=zh-cn
滑動效果如下:
首先需要導包,注意是android還是androidx. androidx是
dependencies {
implementation"androidx.constraintlayout:constraintlayout:2.0.0-beta4"
}
注意:beta2會報錯:
AAPT: error: resource attr/flow_horizontalSeparator not found
參考
https://github.com/android/views-widgets-samples/issues/37 改為beta4
android 則是:
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta1'
}
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:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/test_motion_scene"
app:showPaths="false"
app:motionDebug="SHOW_ALL"
app:motionProgress="0.5"
tools:context=".MainActivity">
<TextView
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@color/purple_700"
android:text="Button" />
</androidx.constraintlayout.motion.widget.MotionLayout>
[圖片上傳中...(image.png-64183b-1606878949252-0)]
res/xml/test_motion_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:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="bounce">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@+id/button"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:alpha="50"
android:rotation="90"
android:scaleX="1"
android:scaleY="1"
android:elevation="2dp"
android:translationY="0dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#D81B60"/>
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
android:alpha="100"
android:rotation="270"
android:scaleX="0.5"
android:scaleY="0.5"
android:elevation="1dp"
android:translationY="30dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#1BD8AC"/>
</Constraint>
</ConstraintSet>
</MotionScene>
其他 MotionLayout 屬性
除了上述示例中的屬性之外胎许,MotionLayout 還包含您可能想要指定的其他屬性:
app:applyMotionScene="boolean" 表示是否應用 MotionScene煌恢。此屬性的默認值為 true。
app:showPaths="boolean" 表示在運動進行時是否顯示運動路徑。此屬性的默認值為 false世剖。
app:progress="float" 可讓您明確指定轉換進度埠胖。您可以使用從 0(轉換開始)到 1(轉換結束)之間的任意浮點值糠溜。
app:currentState="reference" 可讓您指定具體的 ConstraintSet。
app:motionDebug 可讓您顯示與運動有關的其他調試信息押袍∷忻埃可能的值為“SHOW_PROGRESS”凯肋、“SHOW_PATH”或“SHOW_ALL”谊惭。
可以看到:
- showPaths的效果就是虛線和起始、結束的點侮东。app發(fā)布需要取消顯示Path.
- 設置2端顏色圈盔,可以看到顏色是漸變過來的。設置自定義屬性悄雅,使用CustomAttribute驱敲, 必須設置motion:attributeName 和自定義屬性值。屬性名稱必須是具備getr 和set方法的宽闲。
- 設置手勢众眨,可以看到手指左滑、右滑可以響應動畫(從start到end和從end到start)容诬。同樣也可以設置上下滑動娩梨。
- 2種狀態(tài)不可中斷,要么變成另一種狀態(tài)览徒,要么狀態(tài)恢復狈定。
- 可以同時設置動畫 縮放、旋轉习蓬、透明纽什、移動,以及部分屬性:可見性躲叼、透明度芦缰、投影范圍。
插入的屬性
在 MotionScene 文件中枫慷,ConstraintSet 元素可包含在轉換期間插入的其他屬性让蕾。除了位置和邊界之外,MotionLayout 還插入以下屬性:
alpha
visibility
elevation
rotation流礁、rotationX涕俗、rotationY
translationX、translationY神帅、translationZ
scaleX再姑、scaleY
6.app:motionDebug="SHOW_ALL" 顯示 debug 信息。數據格式:
61.77 fps start->end(progress:38.00) state=undefined
- app:motionProgress="0.5" 設置初始進度找御,在這個案例中元镀,就是一進去就在屏幕中間位置绍填。
- motion:motionInterpolator 還可以設置動畫的interpolator.
說句題外話:
簡書markdown 模式,不能上傳MP4栖疑,只能用gif代替讨永。
解決辦法:將mp4在線轉換成gif并下載(搜索:mp4在線轉換gif),然后將gif文件拖到文檔中遇革,復制只能復制png圖片卿闹。