使用 MotionLayout 的轮播界面

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

Carousel widget 支持包含起始值和结束值的列表以及圆形环绕列表。

将轮播界面与 MotionLayout 结合使用的工作原理

假设您想要构建一个水平 Carousel 视图,并放大中心项:

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

使用以下三种状态创建一个 MotionLayout,并为其提供 ID:

  • 上一页
  • 开始
  • 下一步

如果开始状态对应于基本布局,在上一个状态和下一个状态下,Carousel 项会分别向左和向右移动 1。

例如,以图 3 中的五个视图为例,假设在启动状态下,视图 B、C 和 D 是可见的,A 和 E 在屏幕之外。设置上一个状态,使 A、B、C 和 D 的位置为 B、C、D 和 E 的位置,并且视图从左向右移动。在下一个状态中,需要发生相反的情况,B、C、D 和 E 移至 A、B、C 和 D 的位置,而视图从右向左移动。如图 4 所示:

请务必确保视图在原始视图的起始位置结束。Carousel 会将实际视图移回原位,但会使用新的匹配内容重新初始化这些视图,从而营造出元素无限集合的假象。下图展示了此机制。注意“商品编号”值):

转场效果

通过在运动场景文件中定义的这三个约束条件集,在开始和下一个状态与开始和上一个状态之间创建两个向前和向后过渡。添加 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:在 startnext 状态之间应用的 Transition 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 适配器:

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 startendCarousel 帮助程序会自动处理此问题。默认情况下,在这些情况下会将这些视图标记为 View.INVISIBLE,使整体布局不会更改。

在另一种模式下,Carousel 帮助程序会改为将这些视图标记为 View.GONE。您可以使用以下属性设置此模式:

app:carousel_emptyViewsBehavior="gone"

示例

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