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 untuk beralih antara tampilan dalam aplikasi Anda.
    • Panel navigasi multihalaman. Anda dapat menyajikan konten panel navigasi dalam satu halaman atau menjadi beberapa halaman. Untuk menampilkan konten panel navigasi dalam beberapa halaman, gunakan atribut app:navigationStyle dengan nilai yang disetel ke multiPage.
  • Panel Tindakan. Memungkinkan Anda memberi akses mudah ke tindakan umum dalam aplikasi Anda. Panel tindakan muncul di bagian bawah layar dan memiliki tindakan pengguna spesifik konteks, serupa dengan bar tindakan pada ponsel. Panel tindakan muncul ketika pengguna menjangkau bagian atas atau bawah konten scroll.

Gambar 1. Panel Navigasi dan Tindakan

Untuk informasi mendetail tentang class yang dijelaskan pada halaman ini, lihat referensi API untuk paket android.support.wear.widget.drawer. Class dalam Library UI Wear. 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 UI Wear, lihat Menggunakan Library UI Wear.

Membuat tata letak panel samping

Untuk menambahkan panel tindakan atau navigasi ke aplikasi Anda, beri tahu pengguna tentang antarmuka dengan objek WearableDrawerLayout sebagai tampilan root tata letak. Di dalam WearableDrawerLayout, jika konten di-scroll, konten harus mendukung.scroll yang disarangkan.

Contohnya, tata letak berikut menggunakan WearableDrawerLayout dengan tiga tampilan turunan: Satu LinearLayout berisi konten utama, satu panel navigasi, dan satu panel tindakan.

    <android.support.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"/>
    </android.support.wear.widget.drawer.WearableDrawerLayout>
    

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

Membuat panel navigasi multihalaman

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 multihalaman, terapkan atribut navigationStyle="multiPage" ke panel samping. Contoh :

    <android.support.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 memperluas WearableNavigationDrawerAdapter untuk mengisi konten panel navigasi. Anda dapat mengisi konten panel tindakan dalam file XML tata letak Anda menggunakan atribut app:actionMenu:

    app:actionMenu="@menu/action_drawer_menu"
        

Berikut ini menunjukkan cara melakukan inisialisasi konten panel samping Anda:

Kotlin

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

Java

    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 dalam panel samping, tambahkan WearableDrawerView ke WearableDrawerLayout. Untuk menyetel tampilan cuplikan dan konten panel samping, tambahkan sebagai turunan WearableDrawerView dan tentukan ID keduanya masing-masing dalam atribut peekView dan drawerContent. Selain itu, tentukan posisi panel samping menggunakan nilai top ataupun bottom untuk atribut android:layout_gravity (hanya top dan bottom yang didukung).

Tampilan panel khusus harus menentukan padding bagian atas dan bawah milik sendiri.

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

    <android.support.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>
    </android.support.wear.widget.drawer.WearableDrawerView>
    

Memproses peristiwa panel samping

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

Panel samping cuplikan

Agar panel samping muncul, panggil getController() untuk akses ke peekDrawer(), closeDrawer(), dan openDrawer().

Contoh:

Kotlin

    wearableActionDrawer.controller.peekDrawer()
    

Java

    wearableActionDrawer.getController().peekDrawer();
    

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

    <android.support.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 muncul ketika pengguna menjangkau bagian atas atau bawah konten scroll utama (yaitu tampilan yang mengimplementasikan NestedScrollingChild), baik dari scroll normal maupun dari fling. Jika menginginkannya, Anda dapat membuat cuplikan panel samping kapan pun pengguna men-scroll 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 karena fling.