Panel aplikasi adalah penampung yang memberi pengguna akses ke fitur utama dan item navigasi. Ada dua jenis panel aplikasi, panel aplikasi atas dan aplikasi bawah batang. Tampilan dan tujuannya masing-masing adalah sebagai berikut:
Jenis |
Tampilan |
Tujuan |
---|---|---|
Panel aplikasi atas |
Di bagian atas layar. |
Menyediakan akses ke tugas dan informasi utama. Umumnya menghosting judul, item tindakan inti, dan item navigasi tertentu. |
Panel aplikasi bawah |
Di bagian bawah layar. |
Biasanya mencakup item navigasi inti. Dapat juga memberikan akses ke tindakan utama lainnya, seperti melalui tombol tindakan mengambang yang dimuat. |
Untuk menerapkan panel aplikasi atas dan panel aplikasi bawah, gunakan TopAppBar
dan
BottomAppBar
yang dapat disusun. Memungkinkan Anda membuat
antarmuka yang mengenkapsulasi kontrol navigasi dan tindakan, dan yang
sesuai dengan prinsip Desain Material.
Panel aplikasi atas
Tabel berikut menguraikan empat jenis panel aplikasi atas:
Jenis |
Contoh |
---|---|
Kecil: Untuk layar yang tidak memerlukan banyak navigasi atau tindakan. |
|
Rata tengah: Untuk layar yang memiliki satu tindakan utama. |
|
Sedang: Untuk layar yang memerlukan sedikit navigasi dan tindakan. |
|
Besar: Untuk layar yang memerlukan banyak navigasi dan tindakan. |
|
Platform API
Berbagai composable yang memungkinkan Anda menerapkan empat aplikasi teratas yang berbeda batang sangat mirip. Parameter ini berbagi beberapa parameter utama:
title
: Teks yang muncul di seluruh panel aplikasi.navigationIcon
: Ikon utama untuk navigasi. Muncul di di sebelah kiri panel aplikasi.actions
: Ikon yang memberi pengguna akses ke tindakan utama. Mereka tampaknya di sebelah kanan panel aplikasi.scrollBehavior
: Menentukan cara panel aplikasi atas merespons scroll konten dalam scaffold.colors
: Menentukan cara panel aplikasi muncul.
Perilaku scroll
Anda dapat mengontrol bagaimana panel aplikasi merespons saat pengguna men-scroll
konten dalam scaffold. Untuk melakukannya, buat instance
TopAppBarScrollBehavior
dan teruskan ke panel aplikasi atas untuk
Parameter scrollBehavior
.
Ada tiga jenis TopAppBarScrollBehavior
. Atribut ini mencakup:
enterAlwaysScrollBehavior
: Saat pengguna menarik bagian dalam scaffold konten, panel aplikasi atas akan diciutkan. Panel aplikasi akan diperluas saat pengguna menarik ke bawah konten yang ada di dalamnya.exitUntilCollapsedScrollBehavior
: Serupa denganenterAlwaysScrollBehavior
, meskipun bilah aplikasi juga meluas ketika pengguna mencapai akhir bilah konten dalam scaffold.pinnedScrollBehavior
: Panel aplikasi tetap berada di tempatnya dan tidak bereaksi terhadap untuk men-scroll.
Contoh berikut menerapkan beberapa opsi ini.
Contoh
Bagian berikut ini menyediakan implementasi untuk empat jenis panel aplikasi atas, termasuk berbagai contoh tentang cara mengontrol perilaku scroll.
Kecil
Untuk membuat panel aplikasi atas yang kecil, gunakan composable TopAppBar
. Ini adalah
panel aplikasi atas yang paling sederhana dan dalam contoh ini hanya berisi judul.
Contoh berikut tidak meneruskan nilai ke TopAppBar
scrollBehavior
sehingga tidak bereaksi terhadap scroll bagian dalam
saat ini.
@Composable fun SmallTopAppBarExample() { Scaffold( topBar = { TopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Small Top App Bar") } ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Implementasi ini muncul sebagai berikut:
![Contoh panel aplikasi atas yang kecil.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-small.png?authuser=6&hl=id)
Rata tengah
Panel aplikasi atas yang rata tengah
pada dasarnya sama dengan panel aplikasi kecil,
meskipun judul berada di tengah komponen. Untuk menerapkannya, gunakan
composable CenterAlignedTopAppBar
khusus.
Contoh ini menggunakan enterAlwaysScrollBehavior()
untuk mendapatkan nilai yang diteruskannya
untuk scrollBehavior
. Dengan demikian, bilah akan diciutkan bila pengguna menggulir
konten dalam scaffold.
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Centered Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior, ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Implementasi ini muncul sebagai berikut:
![Tulis {i>alt text<i} Anda di sini](/static/develop/ui/compose/images/components/appbar-centered.png)
Sedang
Panel aplikasi atas sedang menempatkan judul di bawah ikon tambahan. Untuk membuat
satu, gunakan composable MediumTopAppBar
.
Seperti cuplikan sebelumnya, contoh ini menggunakan enterAlwaysScrollBehavior()
untuk
dapatkan nilai yang diteruskan untuk scrollBehavior
.
@Composable fun MediumTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { MediumTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Medium Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Implementasi ini muncul sebagai berikut, dengan demonstrasi cara scroll
perilaku dari enterAlwaysScrollBehavior()
muncul:
Besar
Panel aplikasi atas yang besar mirip dengan media, meskipun padding di antara
judul dan ikon lebih besar dan menempati
lebih banyak ruang di layar secara keseluruhan. Kepada
buat composable tersebut, gunakan composable LargeTopAppBar
.
Tidak seperti cuplikan sebelumnya, contoh ini menggunakan
exitUntilCollapsedScrollBehavior()
untuk mendapatkan nilai yang diteruskannya
scrollBehavior
. Dengan demikian, bilah akan diciutkan bila pengguna menggulir
konten dalam scaffold, tetapi kemudian diperluas ketika pengguna men-scroll ke akhir
konten internal.
@Composable fun LargeTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { LargeTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text( "Large Top App Bar", maxLines = 1, overflow = TextOverflow.Ellipsis ) }, navigationIcon = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Localized description" ) } }, actions = { IconButton(onClick = { /* do something */ }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Localized description" ) } }, scrollBehavior = scrollBehavior ) }, ) { innerPadding -> ScrollContent(innerPadding) } }
Implementasi ini muncul sebagai berikut:
![Layar dalam aplikasi dengan panel aplikasi bawah yang menampung ikon tindakan di sisi kiri, dan tombol tindakan mengambang di sebelah kanan.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-large.png?authuser=6&hl=id)
Panel aplikasi bawah
Untuk membuat panel aplikasi bawah, gunakan composable BottomAppBar
. Dengan menggunakan
composable ini sangat mirip dengan composable panel aplikasi atas yang dijelaskan dalam
bagian sebelumnya dari halaman ini. Anda meneruskan composable untuk kunci berikut
parameter:
actions
: Rangkaian ikon yang muncul di sisi kiri panel. Ini umumnya merupakan tindakan utama untuk layar tertentu, atau item navigasi.floatingActionButton
: Tombol tindakan mengambang yang muncul di sisi kanan bilah.
@Composable fun BottomAppBarExample() { Scaffold( bottomBar = { BottomAppBar( actions = { IconButton(onClick = { /* do something */ }) { Icon(Icons.Filled.Check, contentDescription = "Localized description") } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Edit, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Mic, contentDescription = "Localized description", ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Filled.Image, contentDescription = "Localized description", ) } }, floatingActionButton = { FloatingActionButton( onClick = { /* do something */ }, containerColor = BottomAppBarDefaults.bottomAppBarFabColor, elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() ) { Icon(Icons.Filled.Add, "Localized description") } } ) }, ) { innerPadding -> Text( modifier = Modifier.padding(innerPadding), text = "Example of a scaffold with a bottom app bar." ) } }
Implementasi ini muncul sebagai berikut:
![Layar dalam aplikasi dengan panel aplikasi bawah yang menampung ikon tindakan di sisi kiri, dan tombol tindakan mengambang di sebelah kanan.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=6&hl=id)