ConstraintLayout2.0一篇写不完之Carousel

点击上方蓝字关注我，知识会给你力量❝本文译自 https://github.com/androidx/constraintlayout/wiki/Carousel❞Carousel是一个M...

eclipse_xu

821人浏览 · 2021-05-26 08:40:00

eclipse_xu · 2021-05-26 08:40:00 发布

点击上方蓝字关注我，知识会给你力量

❝
本文译自 https://github.com/androidx/constraintlayout/wiki/Carousel
❞

Carousel是一个Motion Helper，它可以轻松构建自定义的Carousel视图，显示用户可以浏览的元素列表。与实现此类视图的其他解决方案相比，Carousel可以利用MotionLayout迅速为轮播创建复杂的动画效果。

Carousel支持带有开始和结束的列表以及循环环绕列表。

概念：轮播如何MotionLayout工作

假设我们要构建一个简单的水平轮播视图，并放大一个居中视图：

我们的基本布局包含几个视图，代表了我们的轮播项目：

通过MotionLayout创建具有三个状态的ConstraintSet（请确保为它们提供ID）：

previous
start
next

如果start状态与该基本布局相对应，则previous的状态则应该表示为轮播项目向右移动一个。

例如，假设我们有5个视图：处于开始状态的A，B，C，D，E。

start时，B，C，D可见，而A和E在屏幕外。我们要设置previous的状态，以使A，B，C，D的位置现在位于B，C，D，E所在的位置，并且视图从左向右移动。

在next状态中，需要相反的情况发生，与B，C，D，E移动到其中A，B，C，D分别为和的观点从从右向左移动。

至关重要的是，start状态必须恰好位于原始视图的起始状态。这种无限轮播的错觉的方式，实际上是将实际视图移回它们的位置，然后使用新的匹配内容将其重新初始化。下图显示了这种机制（请注意“ item＃”值）：

转场Transitions

在ConstraintSet中定义的这三个状态，在start和next，以及start和previous之间创建两个Transitions：向前和向后。让我们添加一个OnSwipe，以通过手势触发Transitions，例如：

    <Transition
        motion:constraintSetStart="@id/start"
        motion:constraintSetEnd="@+id/next"
        motion:duration="1000"
        android:id="@+id/forward">
        <OnSwipe
            motion:dragDirection="dragLeft"
            motion:touchAnchorSide="left" />
    </Transition>

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/previous"
        android:id="@+id/backward">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorSide="right" />
    </Transition>

添加轮播

一旦创建了这个基本的Motion Scene，我们只需要在布局中添加一个Carousel Help并引用这些视图即可（以实现上一个/下一个动画的顺序）。

Carousel Helper还需要设置几个属性：

app:carousel_firstView：表示轮播的第一个元素的视图，在我们的示例中为C，即首先展示默认居中的视图
app:carousel_previousState：ConstraintSet中previous状态的ID
app:carousel_nextState：ConstraintSet中next状态的ID
app:carousel_backwardTransition：Transition在start->previous之间应用的ID
app:carousel_forwardTransition：Transition在start->next之间应用的ID

例如，您的布局XML文件中将包含以下内容：

    <androidx.constraintlayout.motion.widget.MotionLayout ... >

        <ImageView  android:id="@+id/imageView0" .. />
        <ImageView  android:id="@+id/imageView1" .. />
        <ImageView  android:id="@+id/imageView2" .. />
        <ImageView  android:id="@+id/imageView3" .. />
        <ImageView  android:id="@+id/imageView4" .. />

        <androidx.constraintlayout.helper.widget.Carousel
            android:id="@+id/carousel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:carousel_forwardTransition="@+id/forward"
            app:carousel_backwardTransition="@+id/backward"
            app:carousel_previousState="@+id/previous"
            app:carousel_nextState="@+id/next"
            app:carousel_infinite="true"
            app:carousel_firstView="@+id/imageView2"
            app:constraint_referenced_ids="imageView0,imageView1,imageView2,imageView3,imageView4" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

最后，我们还需要在代码中设置一个Carousel适配器：

carousel.setAdapter(object : Carousel.Adapter {
            override fun count(): Int {
              // need to return the number of items we have in the carousel
            }

            override fun populate(view: View, index: Int) {
                // need to implement this to populate the view at the given index
            }

            override fun onNewItem(index: Int) {
                // called when an item is set
            }
        })