MotionLayout实现无限滑动ViewPager

ゞ浴缸里的玫瑰 2023-02-15 15:55 21阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]ConstraintLayout2.0带来了MotionLayout ，MotionLayout是ConstraintLayout的子类，它具有ConstraintLayout的所有属性，用来处理两个ConstraintSet之间的切换，并且可以通过Transition定义两个ConstraintSet之间的切换动画。

# 模拟ViewPager #

--------------------

使用MotionLayout可以模拟实现一个无限Item的ViewPager切换效果：  
![20200606151925812.gif][]

## 实现思路 ##

*  定义三个子View，分别代表ViewPager当前显示中View以及前后两个View  
    ![20200606143506282.png][]
 *  因为无限的Item只能复用这三个子View，所以在切换结束后，要将motion恢复到初始状态，即左右都存在可以进一步切换的子View  
    ![20200606143849635.png][]

# 代码实现 #

--------------------

要使用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>

`<Transition/>`中定义了左滑、右滑的切换

## 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][https_github.com_vitaviva_MotionPager]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606143233500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70
[20200606151925812.gif]: https://img-blog.csdnimg.cn/20200606151925812.gif
[20200606143506282.png]: https://img-blog.csdnimg.cn/20200606143506282.png
[20200606143849635.png]: https://img-blog.csdnimg.cn/20200606143849635.png
[AndroidStudio 4.0]: https://android-developers.googleblog.com/2020/05/android-studio-4.html
[https_github.com_vitaviva_MotionPager]: https://github.com/vitaviva/MotionPager