Uygulama çubukları, kullanıcıya temel özelliklere ve gezinme öğelerine erişim sağlayan kapsayıcılardır. İki tür uygulama çubuğu vardır: üst uygulama çubukları ve alt uygulama çubukları. Bu düğmelerin görünümü ve amacı aşağıdaki gibidir:
Tür |
Görünüm |
Amaç |
---|---|---|
Üst uygulama çubuğu |
Ekranın üst kısmında. |
Temel görevlere ve bilgilere erişim sağlar. Genellikle bir başlık, temel işlem öğeleri ve belirli gezinme öğelerini barındırır. |
Alt uygulama çubuğu |
Ekranın alt kısmında. |
Genellikle temel gezinme öğelerini içerir. İçerisinde kayan işlem düğmesi bulunan diğer önemli işlemlere de erişim sağlayabilir. |
Üst uygulama çubuğu ve alt uygulama çubuğu uygulamak için sırasıyla TopAppBar
ve BottomAppBar
bileşenlerini kullanın. Bu bileşenler, gezinme ve işlem denetimlerini kapsayan ve Materyal Tasarım ilkelerine uygun tutarlı arayüzler oluşturmanıza olanak tanır.
Üst uygulama çubukları
Aşağıdaki tabloda dört tür üst uygulama çubuğu özetlenmiştir:
Tür |
Örnek |
---|---|
Küçük: Çok fazla gezinme veya işlem gerektirmeyen ekranlar için. |
|
Ortaya hizalı: Tek bir birincil işlemi olan ekranlar için. |
|
Orta: Orta düzeyde gezinme ve işlem gerektiren ekranlar için. |
|
Büyük: Çok fazla gezinme ve işlem gerektiren ekranlar için. |
API yüzeyi
Dört farklı üst uygulama çubuğunu uygulamanıza olanak tanıyan çeşitli derlenebilirler oldukça benzerdir. Bunlar birkaç temel parametreyi paylaşır:
title
: Uygulama çubuğunda görünen metin.navigationIcon
: Gezinme için birincil simge. Uygulama çubuğunun solunda görünür.actions
: Kullanıcıya önemli işlemlere erişim sağlayan simgeler. Bu simgeler, uygulama çubuğunun sağında görünür.scrollBehavior
: Üst uygulama çubuğunun, iskeletin iç içeriğinin kaydırılmasına nasıl tepki vereceğini belirler.colors
: Uygulama çubuğunun nasıl görüneceğini belirler.
Kaydırma davranışı
Kullanıcı, belirli bir iskeletin iç içeriğini kaydırdığında uygulama çubuğunun nasıl yanıt vereceğini kontrol edebilirsiniz. Bunu yapmak için bir TopAppBarScrollBehavior
örneği oluşturun ve bunu scrollBehavior
parametresi için üst uygulama çubuğunuza iletin.
Üç tür TopAppBarScrollBehavior
vardır. Bunlar aşağıdaki gibidir:
enterAlwaysScrollBehavior
: Kullanıcı iskelenin iç içeriğini yukarı çektiğinde üst uygulama çubuğu daralır. Uygulama çubuğu, kullanıcı iç içeriği genişlettiğinde genişler.exitUntilCollapsedScrollBehavior
:enterAlwaysScrollBehavior
'e benzer ancak kullanıcı iskeletin iç içeriğinin sonuna ulaştığında uygulama çubuğu da genişler.pinnedScrollBehavior
: Uygulama çubuğu sabit kalır ve kaydırmaya tepki vermez.
Aşağıdaki örneklerde bu seçeneklerden birkaçı uygulanmaktadır.
Örnekler
Aşağıdaki bölümlerde, kaydırma davranışını nasıl kontrol edebileceğinize dair çeşitli örnekler de dahil olmak üzere dört farklı üst uygulama çubuğu türü için uygulamalar sağlanmaktadır.
Küçük
Üstte küçük bir uygulama çubuğu oluşturmak için TopAppBar
bileşenini kullanın. Bu, mümkün olan en basit üst uygulama çubuğudur ve bu örnekte yalnızca bir başlık içerir.
Aşağıdaki örnekte, TopAppBar
için scrollBehavior
değeri iletilmediğinden iç içeriğin kaydırılmasına tepki verilmez.
@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) } }
Bu uygulama aşağıdaki gibi görünür:
Ortaya hizalı
Başlık bileşenin içinde ortalanmış olsa da ortaya hizalı üst uygulama çubuğu, temelde küçük uygulama çubuğuyla aynıdır. Bunu uygulamak için özel CenterAlignedTopAppBar
bileşenini kullanın.
Bu örnekte, scrollBehavior
için ilettiği değeri almak üzere enterAlwaysScrollBehavior()
kullanılır. Dolayısıyla, kullanıcı iskelenin iç içeriğini kaydırdığında çubuk daralır.
@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) } }
Bu uygulama aşağıdaki gibi görünür:
Orta
Orta üst uygulama çubuğu, başlığı ek simgelerin altına yerleştirir. Oluşturmak için MediumTopAppBar
bileşenini kullanın.
Önceki snippet'te olduğu gibi bu örnekte de scrollBehavior
için ilettiği değeri almak üzere enterAlwaysScrollBehavior()
kullanılır.
@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) } }
Bu uygulama, enterAlwaysScrollBehavior()
sayfasındaki kaydırma davranışının nasıl göründüğüyle birlikte aşağıdaki gibi görünür:
Büyük
Üst kısımdaki büyük uygulama çubuğu ortama benzer, ancak başlık ile simgeler arasındaki dolgu daha büyüktür ve genel olarak ekranda daha fazla yer kaplar. Oluşturmak için LargeTopAppBar
bileşenini kullanın.
Önceki snippet'lerin aksine bu örnekte, scrollBehavior
için ilettiği değeri almak üzere exitUntilCollapsedScrollBehavior()
kullanılır. Bu nedenle, kullanıcı iskeletin iç içeriğini kaydırdığında çubuk daralır, ancak kullanıcı iç içeriğin sonuna kaydırdığında genişler.
@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) } }
Bu uygulama aşağıdaki gibi görünür:
Alt uygulama çubuğu
Alt uygulama çubuğu oluşturmak için BottomAppBar
bileşenini kullanın. Bu bileşeni kullanma, bu sayfanın önceki bölümlerinde açıklanan üst uygulama çubuğu bileşenlerine oldukça benzer. Aşağıdaki temel parametreler için birleştirilebilir öğeler iletirsiniz:
actions
: Çubuğun sol tarafında görünen bir dizi simge. Bunlar genellikle belirli bir ekrandaki önemli işlemler veya gezinme öğeleridir.floatingActionButton
: Çubuğun sağ tarafında görünen kayan işlem düğmesi.
@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." ) } }
Bu uygulama aşağıdaki gibi görünür:
Ek kaynaklar
- Material3 dokümanları - Üst uygulama çubuğu
- Material3 dokümanları - Alt uygulama çubuğu
- Destekleyici