ภาพสไลด์ที่มี MotionLayout

Carousel เป็น ออบเจ็กต์ตัวช่วยด้านการเคลื่อนไหวเพื่อสร้างมุมมองภาพหมุนแบบกำหนดเองที่แสดงรายการองค์ประกอบ ที่ผู้ใช้สามารถอ่านผ่านๆ ได้ เมื่อเทียบกับวิธีอื่นๆ ในการดำเนินการดังกล่าว เครื่องมือช่วยเหลือนี้จะช่วยคุณสร้างการเปลี่ยนแปลง การเคลื่อนไหวและมิติข้อมูลที่ซับซ้อนได้อย่างรวดเร็ว สำหรับ Carousel ของคุณโดยใช้ประโยชน์จาก MotionLayout

วิดเจ็ต Carousel รองรับรายการที่มีจุดเริ่มต้นและจุดสิ้นสุด ตลอดจนเป็นวงกลม ที่ครบถ้วนสมบูรณ์

วิธีการทำงานของภาพสไลด์ที่มี MotionLayout

สมมติว่าคุณต้องการสร้างมุมมอง Carousel แนวนอนโดยมีรายการตรงกลาง ขยายใหญ่ขึ้น:

เลย์เอาต์พื้นฐานนี้จะมีมุมมองหลายแบบที่แสดงถึง Carousel รายการ ดังนี้

สร้าง MotionLayout ที่มี 3 สถานะต่อไปนี้และมอบรหัสให้

  • ก่อนหน้า
  • เริ่ม
  • ถัดไป

หากสถานะ start สอดคล้องกับเลย์เอาต์ฐาน ให้อยู่ในสถานะก่อนหน้า และสถานะถัดไป ระบบจะเลื่อน Carousel รายการไปทางซ้ายและ ทางด้านขวาตามลำดับ

ตัวอย่างเช่น ลองพิจารณาการดู 5 ครั้งในรูปที่ 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 ให้ภาพลวงตาเกี่ยวกับคอลเล็กชันธาตุต่างๆ ที่ไม่จำกัดโดย ย้ายการดูจริงกลับไปยังจุดเดิม แต่เริ่มต้นอีกครั้ง ด้วยเนื้อหาที่ตรงกัน แผนภาพต่อไปนี้จะแสดงกลไกนี้ ชำระเงิน ให้ความสำคัญกับ "รายการที่ #" ค่า)

ทรานซิชัน

ด้วยชุดข้อจำกัดทั้ง 3 ชุดที่กำหนดไว้ในไฟล์ฉากเคลื่อนไหว ให้สร้าง การเปลี่ยน - ไปข้างหน้าและย้อนกลับระหว่าง 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 ของก่อนหน้า
  • app:carousel_nextState: รหัส ConstraintSet ของรัฐถัดไป
  • app:carousel_backwardTransition: Transition รหัสที่ใช้ระหว่างสถานะเริ่มต้นและก่อนหน้า
  • 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 เริ่มต้นและสิ้นสุด ผู้ช่วย Carousel จะจัดการ โดยอัตโนมัติ โดยค่าเริ่มต้น ระบบจะทำเครื่องหมายการดูเหล่านั้นเป็น View.INVISIBLE ใน เหล่านี้ ดังนั้นเค้าโครงโดยรวมจึงไม่เปลี่ยนไป

มีโหมดอื่นซึ่งตัวช่วยเหลือ Carousel ทำเครื่องหมายแทน การดูเหล่านั้นเป็น View.GONE คุณสามารถตั้งค่าโหมดนี้โดยใช้คุณสมบัติต่อไปนี้

app:carousel_emptyViewsBehavior="gone"

ตัวอย่าง

ดูตัวอย่างอื่นๆ ในการใช้ตัวช่วยภาพหมุนได้ที่ โปรเจ็กต์ตัวอย่าง ใน GitHub