使用 MotionLayout 的轮播界面

Carousel是 动作辅助对象，用于构建显示元素列表的自定义轮播视图 便于用户浏览与其他 这个辅助程序可以快速创建复杂的动画和尺寸更改 为您的Carousel MotionLayout。

<ph type="x-smartling-placeholder">

Carousel widget 支持使用开始和结束以及圆形的列表 封装列表。

使用 MotionLayout 的轮播界面的工作原理

假设您想要构建一个水平 Carousel 视图，并且中心项为 放大：

此基本布局包含多个表示 Carousel 项的视图：

创建具有以下三种状态的 MotionLayout，并为其提供 ID：

  • 上一个
  • 开始
  • 下一页

如果 start 状态对应于基本布局，则是前一个状态中的 如果是 next 状态，则 Carousel 项向左偏移 1， 分别为

例如，以图 3 中的五个视图为例，并假设在 start 状态，则视图 B、C 和 D 是可见的，并且视图 A 和视图 E 在屏幕之外。设置 使 A、B、C 和 D 的位置成为 B， C、D 和 E 的顺序，视图从左向右移动。在下里 状态需反过来，即 B、C、D 和 E 移动到 A、B C 和 D 的位置，以及从右向左移动的视图。如图所示 4：

观看次数应精确到原始观看次数的起始位置。 Carousel 赋予了无限元素集合的错觉， 将实际视图移回原来的位置，但是重新进行初始化 新的匹配内容触发。下图展示了此机制。付款 关注“item #”值）：

转场效果

在您的运动场景文件中定义这三个约束条件集后，创建两个 以及启动状态和先前状态。将 OnSwipe 处理程序 触发转场以响应手势，如下所示 示例：

    <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>

创建此基本运动场景后，向布局添加 Carousel 辅助程序 然后按照您实现上一个和下一个 动画。

为 Carousel 帮助程序设置以下属性：

  • app:carousel_firstView：表示 Carousel - 在本示例中为 C。
  • app:carousel_previousState：上一个上一个的 ConstraintSet ID 状态。
  • app:carousel_nextState：下一个状态的 ConstraintSet ID。
  • app:carousel_backwardTransition： Transition 在起始状态和之前状态之间应用的 ID。
  • app:carousel_forwardTransition：Transition start 和 next 状态。

例如，您的布局 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 适配器：

Kotlin

carousel.setAdapter(object : Carousel.Adapter {
            override fun count(): Int {
              // Return the number of items in the Carousel.
            }

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

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

Java

carousel.setAdapter(new Carousel.Adapter() {
            @Override
            public int count() {
                // Return the number of items in the Carousel.
            }

            @Override
            public void populate(View view, int index) {
                // Populate the view at the given index.
            }

            @Override
            public void onNewItem(int index) {
                 // Called when an item is set.
            }
        });

其他说明

根据当前“已选择”的项在 Carousel 中，视图 代表项之前或之后的内容可能需要隐藏起来， 说明 Carousel start 和 end 的值。Carousel 帮助程序负责处理 。默认情况下，它会在以下位置将这些视图标记为 View.INVISIBLE： 因此整体布局不会改变

我们还提供了替代模式，在该模式下，Carousel 帮助程序改为将标记 将这些视图标记为View.GONE。您可以使用以下属性设置此模式：

app:carousel_emptyViewsBehavior="gone"

示例

如需查看使用轮播界面帮助程序的更多示例，请参阅 示例项目 。