Uygulama çubukları, kullanıcının temel özelliklere ve gezinme öğelerine erişmesini sağlayan kapsayıcılardır. Üst uygulama çubuğu ve alt uygulama çubuğu olmak üzere iki tür uygulama çubuğu vardır. Bunların 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. Ayrıca, bulunan bir kayan işlem düğmesi aracılığıyla gibi 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
composable'ları kullanın. Gezinme ve işlem kontrollerini kapsayan, Materyal Tasarım ilkeleriyle uyumlu tutarlı arayüzler oluşturmanıza olanak tanır.
Üstteki uygulama çubukları
Aşağıdaki tabloda, en iyi performans gösteren dört uygulama çubuğu türü özetlenmiştir:
Tür |
Örnek |
---|---|
Küçük: Çok fazla gezinme veya işlem gerektirmeyen ekranlar için. |
|
Ortaya hizalı: Tek bir birincil işleme sahip ekranlar için. |
|
Orta: Orta miktarda 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 composable'lar 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ının temel işlemlere erişmesini sağlayan simgeler. Uygulama çubuğunun sağında görünür.scrollBehavior
: Üst uygulama çubuğunun, iskelenin 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ı, belirtilen iskelenin iç içeriğini kaydırdığında uygulama çubuğunun nasıl tepki 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. Bu özellikler şunlardır:
enterAlwaysScrollBehavior
: Kullanıcı, iskelenin iç içeriğini açtığında üst uygulama çubuğu daralır. Uygulama çubuğu, kullanıcı iç içeriği genişlettiğinde genişler.exitUntilCollapsedScrollBehavior
:enterAlwaysScrollBehavior
özelliğine benzer. Bununla birlikte, kullanıcı iskelenin iç içeriğinin sonuna ulaştığında uygulama çubuğu da genişler.pinnedScrollBehavior
: Uygulama çubuğu yerinde kalır ve kaydırmaya tepki vermez.
Aşağıdaki örneklerde bu seçeneklerden bazıları 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üne ilişkin uygulamalar sunulmaktadır.
Küçük
Küçük bir üst uygulama çubuğu oluşturmak için TopAppBar
composable'ı kullanın. Bu, mümkün olan en basit üst uygulama çubuğudur ve bu örnekte yalnızca bir başlık bulunmaktadır.
Aşağıdaki örnek, scrollBehavior
için TopAppBar
değerine bir değer iletmediğinden iç içeriğin kaydırılmasına tepki vermez.
@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. Uygulamak için özel CenterAlignedTopAppBar
composable'ı kullanın.
Bu örnekte, scrollBehavior
için ilettiği değeri almak amacıyla enterAlwaysScrollBehavior()
kullanılmaktadı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:
Ortam
Üst kısımdaki orta uygulama çubuğu, başlığı diğer simgelerin altına yerleştirir. Oluşturmak için MediumTopAppBar
composable'ı kullanın.
Önceki snippet'te olduğu gibi bu örnekte de scrollBehavior
için ilettiği değeri almak amacıyla 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
composable'ı kullanın.
Önceki snippet'lerin aksine bu örnek, scrollBehavior
için ilettiği değeri almak amacıyla exitUntilCollapsedScrollBehavior()
kullanır. Aynı şekilde, kullanıcı iskelenin iç içeriğini kaydırdığında çubuk daralır, ancak kullanıcı sayfayı 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
composable'ı kullanın. Bu composable'ın kullanımı, bu sayfanın önceki bölümlerinde açıklanan üst uygulama çubuğu composable'larına oldukça benzer. Aşağıdaki anahtar parametreleri için composable'ları iletirsiniz:
actions
: Çubuğun sol tarafında görünen bir dizi simge. Bunlar genellikle ilgili ekran veya gezinme öğeleri için temel işlemlerdir.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
- Yönlendirici destek