Menampilkan panel aplikasi atas

Buat panel aplikasi atas untuk membantu pengguna menavigasi dan mengakses fungsi di aplikasi Anda, menggunakan composable TopAppBar.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Membuat composable untuk panel aplikasi atas

Buat panel aplikasi atas menggunakan composable MediumTopAppBar yang diciutkan saat pengguna men-scroll area konten ke bawah, dan diperluas saat pengguna men-scroll kembali ke bagian atas konten:

Poin-poin penting tentang kode

  • Scaffold luar dengan TopBar yang ditetapkan.
  • Judul yang terdiri dari satu elemen Text.
  • Panel atas dengan satu tindakan yang ditentukan.
  • Tindakan IconButton dengan lambda onClick untuk melakukan tindakan.
  • IconButton yang berisi Icon yang memiliki gambar ikon dan teks deskripsi konten.
  • Perilaku scroll untuk konten dalam Scaffold ditentukan sebagai enterAlwaysScrollBehavior(). Tindakan ini akan menciutkan panel aplikasi saat pengguna menarik konten bagian dalam ke atas, dan meluaskan panel aplikasi saat pengguna menarik konten bagian dalam ke bawah.
  • Selain MediumTopBar, yang berisi judul, Anda juga dapat menggunakan:
    • TopAppBar: digunakan untuk layar yang tidak memerlukan banyak navigasi atau tindakan.
    • CenterAlignedTopAppBar: digunakan untuk layar yang memiliki satu tindakan utama.Judul dipusatkan dalam komponen.
    • MediumTopAppBar: digunakan untuk layar yang memerlukan navigasi dan tindakan dalam jumlah sedang.
    • LargeTopAppBar: gunakan untuk layar yang memerlukan banyak navigasi dan tindakan. Menggunakan lebih banyak padding daripada MediumTopAppBar dan menempatkan judul di bawah ikon tambahan.

Hasil

Gambar 1. Panel aplikasi atas berukuran sedang.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Cari tahu cara menggunakan platform standar untuk membuat antarmuka pengguna yang kompleks. Scaffold menggabungkan berbagai bagian UI, sehingga memberikan tampilan dan nuansa yang koheren pada aplikasi.
Koleksi panduan cepat
Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan