Tạo danh sách trên Wear OS

Danh sách cho phép người dùng dễ dàng chọn một mục trong một tập hợp các lựa chọn trên thiết bị Wear OS.

Thư viện giao diện người dùng thiết bị đeo bao gồm lớp WearableRecyclerView, đây là phương thức triển khai RecyclerView để tạo danh sách được tối ưu hoá cho thiết bị đeo. Bạn có thể sử dụng giao diện này trong ứng dụng cho thiết bị đeo bằng cách tạo một vùng chứa WearableRecyclerView mới.

Quyết định có sử dụng WearableRecyclerView hay không dựa trên loại trải nghiệm người dùng mà bạn muốn cung cấp. Bạn nên sử dụng WearableRecyclerView cho một danh sách dài các mục đơn giản, chẳng hạn như trình chạy ứng dụng hoặc danh sách liên hệ. Mỗi mục có thể có một chuỗi ngắn và một biểu tượng liên kết. Ngoài ra, mỗi mục có thể chỉ có một chuỗi hoặc một biểu tượng.

Lưu ý: Tránh các bố cục phức tạp. Người dùng chỉ cần xem nhanh một mục để biết đó là mục gì, đặc biệt là đối với kích thước màn hình giới hạn của thiết bị đeo.

Bằng cách mở rộng lớp RecyclerView hiện có, các API WearableRecyclerView sẽ hiển thị danh sách các mục có thể cuộn theo chiều dọc theo mặc định. Bạn có thể sử dụng các API WearableRecyclerView để chọn sử dụng bố cục cong và cử chỉ cuộn tròn trong các ứng dụng cho thiết bị đeo.

Hình 1. Chế độ xem danh sách mặc định trên Wear OS.

Bài học này sẽ hướng dẫn bạn cách sử dụng lớp WearableRecyclerView để tạo danh sách trong các ứng dụng Wear OS. Tài liệu này cũng mô tả cách chọn bố cục cong cho các mục có thể cuộn, bật cử chỉ cuộn tròn và tuỳ chỉnh giao diện của phần tử con trong khi cuộn.

Thêm WearableRecyclerView vào một hoạt động bằng cách sử dụng XML

Bố cục sau (như chèn vào, ví dụ: res/layout/activity_main.xml) sẽ thêm WearableRecyclerView vào một hoạt động, nhờ đó danh sách được hiển thị đúng cách trên cả thiết bị tròn lẫn thiết bị vuông:

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_launcher_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

Phần sau đây cho thấy WearableRecyclerView khi nó có thể được áp dụng cho một hoạt động:

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    ...
}

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    ...
}

Tạo bố cục cong

Cách tạo bố cục cong cho các mục có thể cuộn được trong ứng dụng dành cho thiết bị đeo:

• Dùng WearableRecyclerView làm vùng chứa chính trong bố cục XML có liên quan.
• Đặt phương thức setEdgeItemsCenteringEnabled(boolean) thành true. Thao tác này sẽ căn chỉnh các mục đầu tiên và cuối cùng trong danh sách theo chiều dọc ở giữa màn hình.
• Sử dụng phương thức WearableRecyclerView.setLayoutManager() để đặt bố cục của các mục trên màn hình.

wearableRecyclerView.apply {
    // To align the edge children (first and last) with the center of the screen
    isEdgeItemsCenteringEnabled = true
    ...

    layoutManager = WearableLinearLayoutManager(this@MainActivity)
}

// To align the edge children (first and last) with the center of the screen
wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
...

wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this));

Nếu ứng dụng của bạn có các yêu cầu cụ thể để tuỳ chỉnh giao diện của thành phần con khi cuộn (ví dụ: điều chỉnh tỷ lệ các biểu tượng và văn bản trong khi các mục cuộn ra khỏi khu vực trung tâm), hãy mở rộng lớp WearableLinearLayoutManager.LayoutCallback và ghi đè phương thức onLayoutFinished.

Đoạn mã sau đây là một ví dụ về cách tuỳ chỉnh thao tác cuộn các mục để điều chỉnh tỷ lệ ra xa trung tâm hơn bằng cách mở rộng lớp WearableLinearLayoutManager.LayoutCallback:

/** How much should we scale the icon at most.  */
private const val MAX_ICON_PROGRESS = 0.65f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter
            scaleY = 1 - progressToCenter
        }
    }
}

public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
    /** How much should we scale the icon at most. */
    private static final float MAX_ICON_PROGRESS = 0.65f;

    private float progressToCenter;

    @Override
    public void onLayoutFinished(View child, RecyclerView parent) {

        // Figure out % progress from top to bottom
        float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
        float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

        // Normalize for center
        progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
        // Adjust to the maximum scale
        progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

        child.setScaleX(1 - progressToCenter);
        child.setScaleY(1 - progressToCenter);
    }
}

wearableRecyclerView.layoutManager =
        WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())

CustomScrollingLayoutCallback customScrollingLayoutCallback =
                new CustomScrollingLayoutCallback();
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this, customScrollingLayoutCallback));