MotionLayout으로 캐러셀

Carousel은(는) 요소 목록을 표시하는 맞춤 캐러셀 뷰를 빌드하는 모션 도우미 객체 사용자가 훑어볼 수 있습니다. 이러한 기능을 구현하는 다른 방법과 비교하면 이 도우미를 사용하면 복잡한 모션 및 크기를 빠르게 변경할 수 있습니다. Carousel 동안 다음을 활용해 보세요. MotionLayout

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

Carousel 위젯은 시작과 끝이 있는 목록과 원형 목록을 지원합니다. 목록을 만들 수 있습니다

MotionLayout으로 캐러셀의 작동 방식

가운데 항목이 있는 가로 Carousel 뷰를 빌드한다고 가정해 보겠습니다. 확대:

이 기본 레이아웃에는 Carousel 항목을 나타내는 여러 뷰가 포함되어 있습니다.

다음 세 가지 상태가 있는 MotionLayout를 만들고 ID를 제공합니다.

  • 이전
  • 시작
  • 다음

start 상태가 이전 상태인 기본 레이아웃과 일치하는 경우 다음 상태에서는 Carousel 항목이 왼쪽으로 1씩 이동하며 각각 오른쪽에 위치합니다.

예를 들어, 그림 3의 5개 뷰를 사용하여 start 뷰 B, C, D가 표시되고 A와 E는 화면 외부에 있습니다. 설정 A, B, C, D의 위치가 B가 되도록 이전 상태를 위로 올립니다. C, D, E가 나타났고, 뷰가 왼쪽에서 오른쪽으로 이동함 다음 반대가 되어야 하고 B, C, D, E가 A, B, C, D가 올랐고, 뷰가 오른쪽에서 왼쪽으로 이동했습니다. 이 내용은 다음 그림에 나와 있습니다. 4:

보기가 원래 보기의 시작과 정확하게 일치하도록 끝나야 합니다. Carousel는 실제 뷰를 원래 위치로 다시 이동하지만 다시 초기화함 표시됩니다. 다음 다이어그램은 이 메커니즘을 보여줍니다. 결제 '항목 번호'에 주의 값):

화면전환

모션 장면 파일에 세 개의 제약 조건 세트를 정의하여 두 개의 start와 next 간 전환을 앞뒤로 시작 및 이전 상태로 전환할 수 있습니다. 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 ID는 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.
            }
        })

자바

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, 뷰는 URL이 제대로 작동하려면 Carousel start 및 end를 처리합니다. Carousel 도우미는 자동으로 이 작업을 수행합니다 기본적으로 이러한 뷰를 다음 위치에서 View.INVISIBLE로 표시합니다. 전체 레이아웃이 변경되지 않습니다.

Carousel 도우미가 대신 다음을 표시하는 대체 모드를 사용할 수 있습니다. 해당 뷰를 View.GONE로 표시합니다. 이 모드는 다음 속성을 사용하여 설정할 수 있습니다.

app:carousel_emptyViewsBehavior="gone"

예

캐러셀 도우미를 사용하는 더 많은 예는 다음을 참조하세요. 예시 프로젝트 를 참조하세요.