Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Cara Membuat Kode Navigasi Drawer untuk Sebuah Aplikasi Android

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by AaliyaA (you can also view the original English article)

Final product image
What You'll Be Creating

Tim desain material di Google mendefinisikan fungsionalitas navigasi drawer di Android sebagai berikut:

Navigasi drawer meluncur dari kiri dan berisi tujuan navigasi untuk aplikasi anda.

Contoh aplikasi Android populer yang menerapkan navigasi drawer adalah aplikasi kotak masuk dari Google, yang menggunakan laci navigasi untuk menavigasi ke berbagai bagian aplikasi. Anda dapat memeriksanya sendiri dengan mendownload aplikasi Kotak Masuk dari toko Google Play, jika Anda belum memilikinya di perangkat. Tangkapan layar di bawah menunjukkan Kotak Masuk dengan laci navigasi terbuka.

Google Inbox Android app

Pengguna dapat melihat navigasi drawer saat menggesekkan jari dari tepi kiri aktivitas. Mereka juga dapat menemukannya dari aktivitas rumah (tingkat atas aplikasi), dengan mengetuk ikon aplikasi (juga dikenal sebagai menu "hamburger") di bilah tindakan.

Perhatikan bahwa jika anda memiliki banyak tujuan berbeda (lebih dari enam, katakanlah) di aplikasi anda, disarankan agar anda menggunakan navigasi drawer.

Dalam posting ini, Anda akan belajar bagaimana untuk menampilkan item navigasi di dalam navigasi drawer di Android. Kita akan membahas bagaimana menggunakan DrawerLayout dan NavigationView API untuk melakukan tugas ini. Sebagai bonus, anda juga akan belajar cara menggunakan fitur template Android Studio untuk segera bootstrap proyek anda dengan navigasi drawer.

Contoh proyek (di Kotlin) untuk tutorial ini dapat ditemukan di repo GitHub kami sehingga anda dapat dengan mudah mengikutinya.

Prasyarat

Untuk dapat mengikuti tutorial ini, anda akan memerlukan:

1. Buat Sebuah Proyek Android Studio

Jalankan Android Studio dan buat proyek baru (anda bisa menamainya NavigationDrawerDemo) dengan aktivitas kosong yang disebut MainActivity. Pastikan juga cek kotak Include Kotlin support.

Android Studio new project dialog

2. Menambahkan DrawerLayout dan NavigationView

Untuk mulai menggunakan DrawerLayout dan NavigationView dalam proyek anda, anda harus mengimpor dukungan desain dan juga dukungan Android artefak. Jadi menambahkan ini ke modul anda build.gradle file untuk mengimpornya.

Juga, termasuk DrawerLayout widget dan juga NavigationView widget di file res/layout/activlty_main.xml anda.

Di sini kami menciptakan sebuah widget DrawerLayout dengan id drawer_layout. Properti tools: openDrawer digunakan untuk menampilkan navigasi drawer bila tata letak XML terbuka dalam tampilan design Android Studio.

Dokumentasi resmi mengatakan hal berikut tentang DrawerLayout:

DrawerLayout berfungsi sebagai wadah top-level untuk konten jendela yang memungkinkan untuk pemandangan interaktif "drawer" harus ditarik keluar dari salah satu atau kedua tepi vertikal jendela.

Setelah menambahkan DrawerLayout widget, kami menyertakan sebuah layout anak yang menunjuk ke @layout/app_bar_main.

Berikut ini adalah file sumber app_bar_main.xml saya. File ini hanya memiliki CoordinatorLayout, AppBarLayout, dan Toolbar widget.

Akhirnya, kita menciptakan sebuah widget NavigationView. Dokumentasi resmi mengatakan hal berikut tentang NavigationView:

NavigationView merupakan sebuah menu navigasi standar untuk aplikasi. Menu isinya dapat dihuni oleh menu file sumber.

Dalam NavigationView XML widget, Anda dapat melihat bahwa kita menambahkan atribut android: layout_gravity dengan nilai start. Ini digunakan untuk posisi drawer untuk keluar dari kiri atau kanan yang anda inginkan (awal atau akhir pada versi platform yang mendukung tata letak arah). Dalam kasus kami sendiri, laci akan keluar dari kiri.

Kami juga menyertakan atribut app:headerLayout yang menunjuk ke @layout/nav_header_main. Ini akan menambah View sebagai header dari menu navigasi.

Berikut adalah file sumber tata letak nav_header_main.xml saya:

File tata letak ini hanya memiliki LinearLayout, ImageView, dan TextView.

Android Studio layout preview

Untuk memasukkan item menu untuk navigasi drawer, kita dapat menggunakan app:menu atribut dengan nilai yang menunjuk ke file sumber menu.

Berikut adalah file sumber res/menu/activity_main_drawer.xml menu:

Di sini kita telah mendefinisikan sebuah Menu dengan menggunakan <menu> yang berfungsi sebagai wadah untuk item menu. <item> Menciptakan MenuItem, yang mewakili sebuah item dalam menu.

Kita kemudian mendefinisikan kelompok menu pertama kita menggunakan <group>. A <group> berfungsi sebagai wadah terlihat untuk <item> elemen-item menu dalam kasus kami. Masing-masing elemen <item> memiliki sebuah id, sebuah ikon dan judul. Perhatikan bahwa garis horizontal akan digambar pada akhir setiap <group> bagi kita ketika ditampilkan di laci navigasi.

<item> Juga dapat berisi elemen bersarang <menu> untuk menciptakan submenu — kita telah melakukannya di <item> tadi. Perhatikan yang terakhir ini <item> memiliki properti judul.

Perhatikan bahwa saat menampilkan item daftar navigasi dari sumber menu, kita bisa menggunakan ListView. Tapi, dengan mengonfigurasi navigasi drawer dengan menu resource, kita mendapatkan styling desain material pada navigasi drawer secara gratis! Jika Anda menggunakan ListView, anda harus mempertahankan daftar dan juga menaranya untuk memenuhi spesifikasi desain material yang direkomendasikan untuk navigasi drawer.

3. Inisialisasi Komponen

Selanjutnya, kita akan untuk menginisialisasi instance DrawerLayout dan ActionBarDrawerToggle. Inisialisasi akan terjadi di dalam onCreate() di MainActivity.kt.

ActionBarDrawerToggle menyiapkan ikon aplikasi yang terletak di sebelah kiri bilah tindakan atau bilah alat untuk membuka dan menutup navigasi drawer. Agar bisa membuat instance dari ActionBarDrawerToggle, kita harus menyediakan parameter berikut:

  • konteks orangtua — misalnya, Activity anda menggunakan this, sementara dalam Fragment anda memanggil getActivity()
  • sebuah instance dari widget DrawerLayout untuk terhubung ke aktivitas ActionBar
  • ikon untuk menempatkan di atas ikon app untuk menunjukkan bahwa ada beralih
  • sumber string untuk operasi terbuka dan tutup masing-masing (untuk aksesibilitas)

Kami meminta metode addDrawerListener() pada DrawerLayout untuk menghubungkan ActionBarDrawerToggle dengan DrawerLayout.

Perhatikan bahwa kita juga mengaktifkan ikon apl melalui setHomeButtonEnabled() dan mengaktifkannya untuk navigasi "up" melalui setDisplayHomeAsUpEnabled().

Kami kemudian meneruskan metode callback aktivitas onPostCreate(), onConfigurationChanged(), dan onOptionsItemSelected() pada to toggle:

Berikut adalah apa itu syncState() , menurut dokumentasi resmi:

Menyinkronkan keadaan indikator drawer / kelayakan dengan DrawerLayout yang terkait ... Ini harus dipanggil dari metode onPostCreate Activity anda untuk melakukan sinkronisasi setelah keadaan contoh DrawerLayout telah dipulihkan, dan waktu lain ketika negara mungkin telah menyimpang sedemikian rupa bahwa ActionBarDrawerToggle tidak diberitahu. (Misalnya, jika Anda berhenti meneruskan aksi drawer yang sesuai untuk jangka waktu tertentu.)

4. Menguji App

Pada titik ini, kita dapat menjalankan app!

First app demo

Seperti yang Anda lihat, meluncurkan app akan menampilkan ikon navigasi drawer "hamburger" dalam tindakan bar. Cobalah menekan ikon aplikasi ini, membuka drawer. Selain itu, mengklik item navigasi drawer tidak akan melakukan apa-apa-kita akan menangani bagian itu di bagian berikutnya.

5. Penanganan Acara Klik

Sekarang, mari kita lihat bagaimana menangani acara klik untuk masing-masing item di navigasi drawer. Perhatikan bahwa mengklik item apapun seharusnya membawa anda ke Aktivitas atau Fragment baru-itulah mengapa disebut navigasi drawer!

Pertama, aktivitas anda perlu menerapkan NavigationView.OnNavigationItemSelectedListener.

Dengan menerapkan kontrak atau antarmuka ini, sekarang kita harus mengganti satu-satunya metode: onNavigationItemSelected().

Metode ini dipanggil saat item pada menu navigasi dipilih. Kami menggunakan ekspresi when untuk melakukan tindakan yang berbeda berdasarkan item menu yang diklik - id item menu berfungsi sebagai konstanta untuk ekspresi when itu.

Selanjutnya, kita harus menginisialisasi NavigationView kita dan menetapkan pendengar ini dalam onCreate() aktivitas kita.

Menjalankan proyek lagi!

App demo with navigation item clicks configuration

Ketika anad klik pada beberapa item, pesan toast ditampilkan — hanya apa yang kami harapkan. Tapi ingat bahwa mengklik pada item harus mengambil pengguna ke aktivitas baru atau fragmen (kita mengabaikan ini di sini untuk singkatnya).

Anda akan melihat bahwa bila anda mengklik pada item, drawer masih tetap. Akan lebih baik jika itu ditutup secara otomatis kapan saja item diklik. Mari kita lihat bagaimana untuk melakukannya.

Untuk menutup drawer setelah link telah diklik, cukup memanggil closeDrawer() pada contoh DrawerLayout dan lewati GravityCompat.START metode.

Menjalankan proyek sekali lagi dan lihat hasilnya!

6. Penanganan Tombol Kembali Ditekan

Bila drawer terbuka, ini akan menjadi pengalaman pengguna yang lebih baik untuk tidak menutup aktivitas di home jika tombol Back ditekan. Ini adalah aplikasi cara populer seperti Google Inbox app bekerja.

Jadi, saat drawer terbuka dan tombol Back ditekan, tutup saja laci bukan aktivitas home saat ini. Kemudian, jika pengguna menekan tombol Back lagi, aktivitas home harus ditutup.

Berikut adalah bagaimana kita dapat mencapai hal ini:

Menjalankan proyek lagi dan mengujinya!

7. bonus: Menggunakan Template Android Studio

Sekarang setelah anda mengetahui tentang API yang terlibat untuk membuat navigasi drawer, saya akan menunjukkan jalan pintas yang akan membuatnya lebih cepat di lain waktu. Anda bisa menggunakan template bukan coding navigasi drawer Activity dari awal.

Android Studio menyediakan kode template yang mengikuti Android desain dan pengembangan praktik terbaik. Template kode yang ada ini (tersedia di Java dan Kotlin) dapat membantu anda memulai proyek anda dengan cepat. Salah satu template tersebut dapat digunakan untuk membuat aktivitas navigasi drawer.

Saya akan menunjukkan cara menggunakan fitur praktis ini di Android Studio.

Untuk proyek baru, jalankan Android Studio.

Create Android Project dialog

Masukkan nama aplikasi dan klik tombol Next.

Anda dapat meninggalkan defaultnya seperti pada dialog Target Android Devices. Klik tombol Next lagi.

Add an Activity to Mobile dialog

Dalam dialog Add an Activity to Mobile, gulir ke bawah dan pilih Navigation Drawer Activity. Klik tombol Next setelah itu.

Configure Activity dialog

Pada dialog terakhir, anda bisa mengganti nama Activity, nama atau judul layout jika anda mau. Terakhir, klik tombol Finish untuk menerima semua konfigurasi.

Android Studio kini telah membantu kita membuat proyek dengan aktivitas navigasi drawer. Benar-benar keren!

Anda sangat disarankan untuk mengeksplorasi kode yang dihasilkan.

Anda juga bisa menggunakan template untuk proyek Android Studio yang sudah ada. Cukup masuk ke File> New> Activity> Navigation Drawer Activity.

Navigation from file menu too Navigation Drawer Activity

Template yang disertakan dengan Android Studio bagus untuk tata letak sederhana dan membuat aplikasi dasar, namun jika anda ingin memulai aplikasi anda lebih jauh lagi, Anda mungkin mempertimbangkan beberapa template aplikasi yang tersedia dari Pasar Envato.

Mereka menghemat waktu untuk pengembang berpengalaman, membantu mereka memotong seluk beluk pembuatan aplikasi dari nol dan memfokuskan bakat mereka alih-alih pada bagian unik dan disesuaikan untuk membuat aplikasi baru.

Kesimpulan

Dalam tutorial ini, anda belajar membuat navigasi drawer di Android menggunakan API DrawerLayout dan NavigationView dari awal. Kami juga menjajaki cara mudah dan cepat menggunakan template Android Studio untuk membuat laci navigasi.

Saya sangat menyarankan untuk memeriksa pedoman desain material resmi untuk navigasi drawer untuk mempelajari lebih lanjut tentang bagaimana mendesain dan menggunakan navigasi drawer di Android dengan benar.

Untuk mempelajari lebih lanjut tentang coding untuk Android, Periksa beberapa kursus kami dan tutorial di Envato Tuts +!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.