Băng chuyền có MotionLayout

Carousel là một đối tượng trợ giúp chuyển động để tạo khung hiển thị băng chuyền tuỳ chỉnh cho thấy danh sách các phần tử mà người dùng có thể đọc lướt qua. So với những cách khác để triển khai, chế độ xem, trình trợ giúp này cho phép bạn nhanh chóng tạo các thay đổi về chuyển động và kích thước phức tạp cho Carousel của bạn bằng cách tận dụng MotionLayout.

Tiện ích Carousel hỗ trợ các danh sách có điểm bắt đầu và kết thúc cũng như hình tròn danh sách tổng hợp.

Cách hoạt động của Băng chuyền với MotionLayout

Giả sử bạn muốn tạo khung hiển thị Carousel theo chiều ngang, với mục nằm giữa phóng to:

Bố cục cơ bản này chứa một số khung hiển thị đại diện cho các mục Carousel:

Tạo MotionLayout có 3 trạng thái sau đây và cung cấp mã nhận dạng cho các trạng thái đó:

  • trước
  • bắt đầu
  • tiếp theo

Nếu trạng thái start (bắt đầu) tương ứng với bố cục cơ sở, thì ở trạng thái trước và trạng thái tiếp theo, các mục Carousel được dịch chuyển sang trái và sang phải.

Ví dụ: hãy lấy 5 chế độ xem trong hình 3 và giả định rằng trong phần bắt đầu trạng thái, thành phần hiển thị B, C và D hiển thị, còn A và E ở bên ngoài màn hình. Đặt tăng trạng thái trước để vị trí của A, B, C và D là tại đó B, C, D và E là, với các chế độ xem di chuyển từ trái sang phải. Trong phần tiếp theo thì điều ngược lại cần xảy ra, với B, C, D và E chuyển đến vị trí A, B, C, D là và các chế độ xem di chuyển từ phải sang trái. Thông tin này được thể hiện trong hình 4:

Điều quan trọng là lượt xem phải xuất hiện chính xác ở nơi mà lượt xem gốc bắt đầu. Carousel tạo ảo giác về một tập hợp vô hạn các phần tử bằng cách di chuyển chế độ xem thực tế về vị trí cũ, nhưng khởi tạo lại chúng với nội dung phù hợp mới. Sơ đồ dưới đây thể hiện cơ chế này. Thanh toán chú ý đến "mục #" giá trị):

Kiểu chuyển cảnh

Với 3 tập hợp quy tắc ràng buộc này đã xác định trong tệp cảnh chuyển động, hãy tạo chuyển đổi — tiến và lùi — giữa bắt đầu và tiếp theo cùng các trạng thái start (bắt đầu) và previous (Trước). Thêm một Trình xử lý OnSwipe cho kích hoạt hiệu ứng chuyển đổi để phản hồi một cử chỉ, như minh hoạ sau đây ví dụ:

    <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>

Sau khi tạo cảnh chuyển động cơ bản này, hãy thêm trình trợ giúp Carousel vào bố cục và tham chiếu các chế độ xem theo cùng thứ tự mà bạn triển khai trước đó và tiếp theo ảnh động.

Thiết lập các thuộc tính sau cho trình trợ giúp Carousel:

  • app:carousel_firstView: thành phần hiển thị đại diện cho phần tử đầu tiên của Carousel – trong ví dụ này là C.
  • app:carousel_previousState: mã nhận dạng ConstraintSet của trước trạng thái.
  • app:carousel_nextState: mã nhận dạng ConstraintSet của trạng thái tiếp theo.
  • app:carousel_backwardTransition: Transition Giá trị nhận dạng được áp dụng giữa trạng thái bắt đầu và trước.
  • app:carousel_forwardTransition: mã nhận dạng Transition được áp dụng giữa Trạng thái start (bắt đầu) và next (tiếp theo).

Ví dụ: bạn có dạng như sau trong tệp XML bố cục:

    <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>

Thiết lập bộ chuyển đổi Carousel trong mã:

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.
            }
        });

Ghi chú khác

Tuỳ thuộc vào mục hiện tại "đã chọn" trong Carousel, chế độ xem biểu thị các mục ở trước hoặc sau có thể cần được ẩn để chính xác tài khoản cho Carousel bắt đầu và kết thúc. Trình trợ giúp Carousel sẽ xử lý điều này một cách tự động. Theo mặc định, hệ thống sẽ đánh dấu các chế độ xem đó là View.INVISIBLE trong trong các trường hợp này, vì vậy bố cục tổng thể sẽ không thay đổi.

Có một chế độ thay thế, trong đó trình trợ giúp Carousel đánh dấu các chế độ xem đó dưới dạng View.GONE. Bạn có thể đặt chế độ này bằng cách sử dụng thuộc tính sau:

app:carousel_emptyViewsBehavior="gone"

Ví dụ

Để biết thêm các ví dụ về cách sử dụng trình trợ giúp Băng chuyền, hãy xem dự án mẫu trên GitHub.