Navigasi dan tindakan Wear

Tutorial ini menjelaskan cara mengimplementasikan panel tindakan dan navigasi dalam aplikasi Anda.

Sebagai bagian dari Desain untuk Wear OS by Google, tersedia dua panel interaktif:

• Panel navigasi. Anda dapat memungkinkan pengguna beralih antartampilan dalam aplikasi Anda.
  • Panel navigasi multi-halaman. Anda dapat menyajikan konten panel navigasi dalam satu halaman atau menjadi beberapa halaman. Untuk menampilkan konten panel navigasi di beberapa halaman, gunakan atribut app:navigationStyle dengan nilai yang ditetapkan ke multiPage.
• Panel Tindakan. Memungkinkan Anda memberikan akses yang mudah ke tindakan umum di aplikasi Anda. Panel tindakan muncul di bagian bawah layar dan memiliki panel tindakan pengguna spesifik konteks, mirip dengan panel tindakan di ponsel. Panel tindakan muncul ketika pengguna menjangkau bagian atas atau bawah konten scroll.
  • Tetapkan judul: Anda dapat menetapkan judul panel tindakan baik dengan menggunakan metode setTitle() (dari WearableActionDrawerView) atau atribut app:drawerTitle.

Gambar 1. Panel Navigasi dan Tindakan

Untuk informasi detail tentang class yang dijelaskan di halaman ini, lihat referensi API untuk paket androidx.wear.widget.drawer. Class dalam Library Wear UI. Untuk informasi tentang library tersebut dan class yang tidak digunakan lagi (termasuk class yang sebelumnya digunakan untuk panel tindakan dan navigasi) yang digantikan oleh Library Wear UI, lihat Menggunakan Library Wear UI.

Membuat tata letak panel samping

Untuk menambahkan panel tindakan atau navigasi ke aplikasi Anda, deklarasikan antarmuka pengguna dengan objek WearableDrawerLayout sebagai tampilan root tata letak. Di dalam WearableDrawerLayout, jika di-scroll, konten harus mendukung scrolling bertingkat.

Misalnya, tata letak berikut menggunakan WearableDrawerLayout dengan tiga tampilan turunan: A LinearLayout untuk berisi konten utama, panel navigasi, dan panel tindakan.

    <androidx.wear.widget.drawer.WearableDrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:nestedScrollingEnabled="true">
            <LinearLayout
                android:id="@+id/linear_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />
        </ScrollView>
        <android.support.wear.widget.drawer.WearableNavigationDrawerView
            android:id="@+id/top_navigation_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <android.support.wear.widget.drawer.WearableActionDrawerView
            android:id="@+id/bottom_action_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:actionMenu="@menu/action_drawer_menu"/>
    </androidx.wear.widget.drawer.WearableDrawerLayout>
    

Catatan: Class WearableDrawerLayout menggantikan class yang tidak digunakan lagi di Wearable Support Library.

Membuat panel navigasi multi-halaman

Secara default, panel navigasi adalah panel samping halaman tunggal. Namun, panel samping halaman tunggal mungkin tidak cocok untuk aplikasi Anda, terutama jika aplikasi memiliki lebih dari tujuh tampilan, atau tampilan yang tidak mudah disajikan dengan ikon. Untuk membuat panel navigasi multi-halaman, terapkan atribut navigationStyle="multiPage" ke panel samping. Contoh :

    <androidx.wear.widget.drawer.WearableNavigationDrawerView
        android:id="@+id/top_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_red_light"
        app:navigationStyle="multiPage">
    

Melakukan inisialisasi konten panel samping

Sebagai salah satu langkah utama untuk Aktivitas, lakukan inisialisasi daftar item panel samping. Anda harus memperpanjang WearableNavigationDrawerAdapter untuk mengisi konten panel navigasi. Anda dapat mengisi konten panel tindakan dalam file XML tata letak menggunakan atribut app:actionMenu:

    app:actionMenu="@menu/action_drawer_menu"
        

Berikut ini adalah cara melakukan inisialisasi konten panel samping Anda:

    class MainActivity : Activity(), MenuItem.OnMenuItemClickListener {

        private lateinit var wearableDrawerLayout: WearableDrawerLayout
        private lateinit var wearableNavigationDrawer: WearableNavigationDrawerView
        private lateinit var wearableActionDrawer: WearableActionDrawerView
        ...
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            ...
            // Top navigation drawer
            wearableNavigationDrawer = findViewById(R.id.top_navigation_drawer)
            wearableNavigationDrawer.setAdapter(YourImplementationNavigationAdapter(this))
            // Peeks navigation drawer on the top.
            wearableNavigationDrawer.controller.peekDrawer()
            // Bottom action drawer
            wearableActionDrawer =
                    findViewById<WearableActionDrawerView>(R.id.bottom_action_drawer).apply {
                        // Peeks action drawer on the bottom.
                        controller.peekDrawer()
                        setOnMenuItemClickListener(this@MainActivity)
                    }
        }
    }
    

    public class MainActivity extends Activity implements
            OnMenuItemClickListener {
        private WearableDrawerLayout wearableDrawerLayout;
        private WearableNavigationDrawerView wearableNavigationDrawer;
        private WearableActionDrawerView wearableActionDrawer;
        ...
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ...
            // Top navigation drawer
            wearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer);
            wearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this));
            // Peeks navigation drawer on the top.
            wearableNavigationDrawer.getController().peekDrawer();
            // Bottom action drawer
            wearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer);
            // Peeks action drawer on the bottom.
            wearableActionDrawer.getController().peekDrawer();
            wearableActionDrawer.setOnMenuItemClickListener(this);
        }
    }
    

Membuat tampilan panel samping kustom

Untuk menggunakan tampilan kustom di panel samping, tambahkan WearableDrawerView ke WearableDrawerLayout. Untuk menetapkan tampilan cuplikan dan konten panel, tambahkan keduanya sebagai turunan dari WearableDrawerView dan tentukan ID masing-masing di atribut peekView dan drawerContent. Tentukan juga posisi panel samping menggunakan nilai top atau bottom untuk atribut android:layout_gravity (hanya top dan bottom yang didukung).

Tampilan cuplikan kustom harus menentukan padding bagian atas dan bawahnya.

Contoh berikut menentukan panel atas dengan tampilan cuplikan dan konten panel samping:

    <androidx.wear.widget.drawer.WearableDrawerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:background="@color/red"
        app:drawerContent="@+id/drawer_content"
        app:peekView="@+id/peek_view">
        <FrameLayout
            android:id="@id/drawer_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!-- Drawer content goes here.  -->
        </FrameLayout>
        <LinearLayout
            android:id="@id/peek_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:orientation="horizontal">
            <!-- Peek view content goes here.  -->
        </LinearLayout>
    </androidx.wear.widget.drawer.WearableDrawerView>
    

Memproses peristiwa panel samping

Untuk memproses peristiwa panel samping, panggil setDrawerStateCallback() di WearableDrawerLayout dan teruskan implementasi WearableDrawerLayout.DrawerStateCallback. Class abstrak ini menyediakan callback untuk peristiwa panel samping seperti onDrawerOpened(), onDrawerClosed(), dan onDrawerStatechanged().

Panel cuplikan

Untuk membuat panel menampilkan cuplikan, panggil getController() untuk mengakses ke peekDrawer(), closeDrawer(), dan openDrawer().

Contoh:

    wearableActionDrawer.controller.peekDrawer()
    

    wearableActionDrawer.getController().peekDrawer();
    

Secara default, panel tindakan akan menampilkan tindakan pertama dengan chevron ketika terdapat beberapa tindakan. Jika Anda hanya ingin menampilkan ikon tambahan (tiga titik vertikal) tanpa tindakan pertama, ganti perilaku default dengan menyetel tanda showOverflowInPeek ke true. Contoh:

    <androidx.wear.widget.drawer.WearableActionDrawerView
        android:id="@+id/bottom_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_dark"
        app:showOverflowInPeek="true"/>
    

Secara default, panel tindakan akan muncul ketika pengguna mencapai bagian atas atau bawah konten scroll utama (yaitu, tampilan yang menerapkan NestedScrollingChild), baik dari scroll normal maupun dari secara fling. Jika menginginkannya, Anda dapat membuat panel menampilkan cuplikan kapan pun pengguna menggulir ke bawah, dengan menyetel metode actionDrawer.setPeekOnScrollDownEnabled() ke true.

Panel navigasi secara default akan muncul ketika pengguna tiba di bagian atas konten, baik dengan scroll normal maupun fling.