MotionLayout实现无限滑动ViewPager
ConstraintLayout2.0带来了MotionLayout ，MotionLayout是ConstraintLayout的子类，它具有ConstraintLayout的所有属性，用来处理两个ConstraintSet之间的切换，并且可以通过Transition定义两个ConstraintSet之间的切换动画。
模拟ViewPager
使用MotionLayout可以模拟实现一个无限Item的ViewPager切换效果：
实现思路
-
定义三个子View，分别代表ViewPager当前显示中View以及前后两个View
-
因为无限的Item只能复用这三个子View，所以在切换结束后，要将motion恢复到初始状态，即左右都存在可以进一步切换的子View
代码实现
要使用MotionLayout，必须将ConstraintLayout升级到2.0以上:
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6'
定义MotionScene
用三组ConstraintSet定义三个布局状态：起始状态、左滑后、右滑后
<?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">
<ConstraintSet android:id="@+id/base_state">
<Constraint android:id="@id/centerView">
<Layout
android:layout_width="@dimen/center_size"
android:layout_height="@dimen/center_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/leftView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/rightView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/move_left_to_right">
<Constraint android:id="@id/centerView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/leftView">
<Layout
android:layout_width="@dimen/center_size"
android:layout_height="@dimen/center_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/rightView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/move_right_to_left">
<Constraint android:id="@id/centerView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/leftView">
<Layout
android:layout_width="@dimen/side_size"
android:layout_height="@dimen/side_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
<Constraint android:id="@id/rightView">
<Layout
android:layout_width="@dimen/center_size"
android:layout_height="@dimen/center_size"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</Constraint>
</ConstraintSet>
<Transition
motion:constraintSetEnd="@id/move_left_to_right"
motion:constraintSetStart="@id/base_state">
<OnSwipe
motion:dragDirection="dragRight"
motion:onTouchUp="autoCompleteToStart"
motion:touchAnchorId="@id/centerView"
motion:touchAnchorSide="right" />
</Transition>
<Transition
motion:constraintSetEnd="@id/move_right_to_left"
motion:constraintSetStart="@id/base_state">
<OnSwipe
motion:dragDirection="dragLeft"
motion:onTouchUp="autoCompleteToStart"
motion:touchAnchorId="@id/centerView"
motion:touchAnchorSide="left" />
</Transition>
</MotionScene>
Item切换处理
如前所述，左右滑动导致动画切换结束后，为了调整显示中的View到中间，需要回复视图到初始状态 motionLayout?.progress = 0F
motionLayout.setTransitionListener(object : MotionLayout.TransitionListener {
override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
when (currentId) {
R.id.move_left_to_right -> {
if (currentPosition > 0) {
currentPosition--
} else {
currentPosition = itemList.lastIndex
}
motionLayout?.progress = 0F
updateView()
}
R.id.move_right_to_left -> {
if (currentPosition < itemList.lastIndex) {
currentPosition++
} else {
currentPosition = 0
}
motionLayout?.progress = 0F
updateView()
}
}
}
})
子View的位置虽然恢复初始状态，但是内容必须保持最新状态，所以在updateView中，更新视图内容：
private fun updateView() {
centerTextView.text = "Item\n${itemList[currentPosition]}"
rightTextView.text = if (currentPosition == itemList.lastIndex) {
"Item\n${itemList.first()}"
} else {
"Item\n${itemList[currentPosition + 1]}"
}
leftTextView.text = if (currentPosition == 0) {
"Item\n${itemList.last()}"
} else {
"Item\n${itemList[currentPosition - 1]}"
}
}
最后
MotionLayout可以方便地实现场景切换的动画效果，最新的AndroidStudio 4.0 还专门为MotionLayout提供了MotionEditor功能，无需通过Xml便可以设置视图状态及其过度动画，使用起来更加方便。可以预见未来MotionLayout将在Android应用开发中作为一个重要角色被广泛推广和使用。
代码地址
https://github.com/vitaviva/MotionPager