MotionLayout を使用したカルーセル

Carousel: 要素のリストを表示するカスタム カルーセル ビューを作成するためのモーション ヘルパー オブジェクト 目を通すこともできますこのような他の実装方法と比べると、 このヘルパーを使用すると、複雑なモーションやディメンションの変更をすばやく作成できます。 のCarouselを次のポイントで獲得: MotionLayout。

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

Carousel ウィジェットは、開始と終了のリストと円形のリストをサポートしています ラップアラウンド リストを使用できます。

MotionLayout を使用したカルーセルの仕組み

中央にアイテムがある、横向きの Carousel ビューを作成するとします。 拡大:

この基本的なレイアウトには、Carousel アイテムを表す複数のビューが含まれています。

次の 3 つの状態を持つ MotionLayout を作成し、ID を指定します。

  • 前へ
  • スタート
  • 次へ

開始状態がベース レイアウトに対応している場合、前の状態 next 状態では、Carousel 項目が 1 つ左にシフトされ、 表示されます。

たとえば、図 3 の 5 つのビューを、 ビュー B、C、D が表示され、A と E が画面の外側にあります。セット 前の状態をアップして、A、B、C、D の位置を B とします。 C、D、E とし、ビューが左から右へと移動しました。次の 逆に、B、C、D、E が C と D が変化し、視聴が右から左に変化しました。これを図に示します。 4:

ビューは、元のビューの開始位置で終了させることが重要です。 Carousel は、要素が無限にあるように見える 実際のビューを元の場所に戻し、初期化し直す 新しい一致コンテンツを生成します次の図は、このメカニズムを示しています。お支払い 「item #」に注目してください値）:

切り替え効果

モーション シーン ファイルで定義したこの 3 つの制約セットを使用して、2 つの start と next の間の遷移（順方向と逆方向） start と previous の状態の 2 種類があります。追加 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"

例

カルーセル ヘルパーを使用するその他の例については、 サンプル プロジェクト ご覧ください。