Membuat daftar di Wear

Daftar memungkinkan pengguna untuk memilih item dengan mudah dari serangkaian pilihan di perangkat Wear OS.

Library UI Wearable menyertakan class WearableRecyclerView yang merupakan implementasi RecyclerView untuk membuat daftar yang dioptimalkan bagi perangkat wearable. Anda dapat menggunakan antarmuka ini dalam aplikasi wearable dengan membuat penampung WearableRecyclerView baru.

Lihat resource terkait berikut:

Anda harus memutuskan untuk menggunakan WearableRecyclerView berdasarkan jenis pengalaman pengguna yang ingin disediakan. Sebaiknya, gunakan WearableRecyclerView untuk daftar panjang item sederhana, seperti peluncur aplikasi, atau kontak daftar. Setiap item mungkin memiliki string pendek dan ikon yang terkait. Atau, setiap item mungkin hanya memiliki satu string atau ikon. Kami tidak menyarankan penggunaan WearableRecyclerView untuk daftar yang sangat pendek atau kompleks. Untuk kasus ini, gunakan RecyclerView atau ListView dari Android support library biasa.

Dengan memperluas class RecyclerView yang ada, WearableRecyclerView API menampilkan daftar item yang dapat di-scroll secara vertikal dalam daftar lurus secara default. Anda dapat menggunakan WearableRecyclerView API untuk memilih tata letak melengkung dan gestur scroll memutar dalam aplikasi wearable.

Gambar 1. Tampilan daftar default di Wear OS.

Tutorial ini menunjukkan cara menggunakan class WearableRecyclerView untuk membuat daftar dalam aplikasi Wear OS. Dokumen ini juga menjelaskan cara memilih tata letak melengkung untuk item yang dapat di-scroll, mengaktifkan gestur scroll memutar, dan menyesuaikan tampilan turunannya saat men-scroll.

Menambahkan WearableRecyclerView pada aktivitas menggunakan XML

Tata letak berikut (seperti yang dimasukkan ke, misalnya, res/layout/activity_main.xml) menambahkan WearableRecyclerView ke aktivitas sehingga daftar ditampilkan dengan benar di perangkat berbentuk lingkaran dan persegi:

    <android.support.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" />
    

Kode berikut menunjukkan WearableRecyclerView karena dapat diterapkan ke aktivitas:

Kotlin

    import android.os.Bundle
    import android.app.Activity
    import android.support.wear.widget.WearableRecyclerView

    class MainActivity : Activity() {

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

        ...
    }
    

Java

    import android.os.Bundle;
    import android.app.Activity;
    import android.support.wear.widget.WearableRecyclerView;

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

        ...
    }
    

Catatan: Class WearableRecyclerView menggantikan class serupa yang tidak digunakan lagi dalam Wearable Support Library.

Membuat tata letak melengkung

Untuk membuat tata letak melengkung bagi item yang dapat di-scroll dalam aplikasi wearable:

  • Gunakan WearableRecyclerView sebagai penampung utama dalam tata letak XML yang relevan.
  • Setel metode setEdgeItemsCenteringEnabled(boolean) ke true. Tindakan ini akan menyelaraskan item pertama dan terakhir pada daftar secara vertikal di tengah layar.
  • Gunakan metode WearableRecyclerView.setLayoutManager() untuk menyetel tata letak item di layar.

Kotlin

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

        layoutManager = WearableLinearLayoutManager(this@MainActivity)
    }
    

Java

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

    wearableRecyclerView.setLayoutManager(
                    new WearableLinearLayoutManager(this));
    

Jika aplikasi Anda memiliki persyaratan spesifik untuk menyesuaikan tampilan turunan saat men-scroll (misalnya, menskalakan ikon dan teks saat item di-scroll dari tengah), perluas class WearableLinearLayoutManager.LayoutCallback dan ganti metode onLayoutFinished.

Cuplikan kode berikut menunjukkan contoh penyesuaian scroll item agar diskalakan menjauh dari tengah dengan memperluas class WearableLinearLayoutManager.LayoutCallback:

Kotlin

    /** 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
            }
        }
    }
    

Java

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

Kotlin

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

Java

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

Menambahkan gestur scroll memutar

Secara default, scroll memutar dinonaktifkan di WearableRecyclerView. Jika ingin mengaktifkan gestur scroll memutar dalam tampilan turunan, gunakan metode WearableRecyclerView setCircularScrollingGestureEnabled(). Anda juga dapat menyesuaikan gestur scroll memutar dengan menentukan salah satu atau kedua hal berikut:

  • Berapa derajat putaran yang harus pengguna lakukan untuk men-scroll dalam satu kali ketinggian layar. Hal ini akan secara efektif memengaruhi kecepatan scroll — setScrollDegreesPerScreen — nilai defaultnya disetel ke 180 derajat.
  • Lebar 'bingkai' virtual di dekat tepi layar tempat gestur akan dikenali — setBezelFraction — nilai defaultnya disetel ke 1. Hal ini dinyatakan sebagai bagian kecil dari radius tampilan.

Cuplikan kode berikut menunjukkan cara menyetel metode ini:

Kotlin

    wearableRecyclerView.apply {
        isCircularScrollingGestureEnabled = true
        bezelFraction = 0.5f
        scrollDegreesPerScreen = 90f
    }
    

Java

    wearableRecyclerView.setCircularScrollingGestureEnabled(true);
    wearableRecyclerView.setBezelFraction(0.5f);
    wearableRecyclerView.setScrollDegreesPerScreen(90);