使用 MotionLayout 的轮播界面

尝试使用 Compose 方式
Jetpack Compose 是推荐用于 Android 的界面工具包。了解如何在 Compose 中添加轮播界面。
轮播界面 →

Carousel 是一个动作帮助程序对象，用于构建自定义轮播视图，以显示用户可以浏览的元素列表。与其他实现此类 视图的方式相比，此帮助程序可让您快速创建复杂的动作和尺寸变化 ，以便利用 MotionLayout为您的 Carousel。

Carousel 微件支持包含开头和结尾的列表，以及循环环绕列表。

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

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

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

使用以下三种状态创建 MotionLayout，并为其指定 ID：

  • previous
  • start
  • next

如果 start 状态对应于基本布局，则在 previous 状态和 next 状态下，Carousel 项分别向左和向右移动一个位置。

例如，以图 3 中的五个视图为例，假设在 start 状态下，视图 B、C 和 D 可见，而 A 和 E 在屏幕外。设置 previous 状态，使 A、B、C 和 D 的位置与 B、C、D 和 E 的位置相同，视图从左向右移动。在 next 状态下，需要发生相反的情况，即 B、C、D 和 E 移动到 A、B、C 和 D 的位置，视图从右向左移动。如图 4 所示：

至关重要的是，视图最终会停留在原始视图开始的位置。 Carousel 通过将实际视图移回原来的位置，但使用新的匹配内容重新初始化这些视图，从而营造出无限元素集合的错觉。 下图显示了此机制。请注意“item #”值：

转场效果

在动作场景文件中定义这三个约束集后，在 start 和 next 状态之间以及 start 和 previous 状态之间创建两个转场效果（向前和向后）。添加 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 帮助程序设置以下属性：

例如，您的布局 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"

示例

如需查看更多使用 Carousel 帮助程序的示例，请参阅 GitHub 上的示例项目 。