Uygulama çubukları, kullanıcıların temel özelliklere ve gezinme öğelerini görebilirsiniz. Üst uygulama çubuğu ve alt uygulama olmak üzere iki tür uygulama çubuğu vardır çubuklar. 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ğunu uygulamak için TopAppBar
ve
BottomAppBar
composable, Tutarlı içerikler üretmenize
gezinme ve işlem kontrollerini kapsayan arayüzler ile
ve Materyal Tasarım ilkeleriyle uyumludur.
Ü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ı popüler uygulamayı kullanmanıza olanak tanıyan çeşitli composable'lar çubuklar oldukça benzerdir. Bunlar birkaç temel parametreyi paylaşır:
title
: Uygulama çubuğunda görünen metin.navigationIcon
: Gezinme için birincil simge. Göründüğü yer: solunu tıklayın.actions
: Kullanıcının temel işlemlere erişmesini sağlayan simgeler. Görünür simgesini tıklayın.scrollBehavior
: Üst uygulama çubuğunun kaydırma işlemine nasıl tepki vereceğini belirler. içsel bir hazne oluştururlar.colors
: Uygulama çubuğunun nasıl görüneceğini belirler.
Kaydırma davranışı
Kullanıcı belirli bir öğeyi kaydırdığında uygulama çubuğunun nasıl yanıt vereceğini kontrol edebilirsiniz.
tasarımıyla ilgilidir. Bunu yapmak için
TopAppBarScrollBehavior
simgesine dokunun ve
scrollBehavior
parametresi.
Üç tür TopAppBarScrollBehavior
vardır. Bu özellikler şunlardır:
enterAlwaysScrollBehavior
: Kullanıcı, iskelenin iç kısmını çektiğinde üst uygulama çubuğu daralır. Kullanıcı daha sonra yeniden etkileşime girdiğinde uygulama çubuğu içsel içeriği aşağı çeker.exitUntilCollapsedScrollBehavior
:enterAlwaysScrollBehavior
ile benzer, Bununla birlikte, kullanıcı reklam öğesinin sonuna ulaştığında uygulama çubuğu da tasarımıyla ilgilidir.pinnedScrollBehavior
: Uygulama çubuğu sabit kalır ve kaydırır.
Aşağıdaki örneklerde bu seçeneklerden bazıları uygulanmaktadır.
Örnekler
Aşağıdaki bölümlerde dört farklı dönüşüm türü için uygulama çubuklarını ve kaydırma davranışını nasıl kontrol edebileceğinizi gösteren çeşitli örnekleri içerir.
Küçük
Küçük bir üst uygulama çubuğu oluşturmak için TopAppBar
composable'ı kullanın. Bu,
basit bir üst uygulama çubuğu var. Bu örnekte sadece bir başlık var.
Aşağıdaki örnek, TopAppBar
ürününe
scrollBehavior
ve dolayısıyla iç kısımdaki kaydırma işlemine tepki vermez
içerik.
@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:
![Küçük üst uygulama çubuğu örneği.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-small.png?authuser=0000&hl=tr)
Ortaya hizalı
Ortaya hizalı üst uygulama çubuğu, temelde küçük uygulama çubuğuyla aynıdır.
başlık, bileşenin içinde ortalanmış olsa bile. Bunu uygulamak için,
özel CenterAlignedTopAppBar
composable.
Bu örnekte, aktardığı değeri elde etmek için enterAlwaysScrollBehavior()
kullanılır
(scrollBehavior
için). Dolayısıyla, kullanıcı sayfayı kaydırdığında çubuk daralır
tasarımıyla ilgilidir.
@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:
![Alternatif metninizi buraya yazın](https://developer.android.com/static/develop/ui/compose/images/components/appbar-centered.png?authuser=0000&hl=tr)
Orta
Ü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 aşağıdaki işlemler için enterAlwaysScrollBehavior()
kullanılmıştır:
scrollBehavior
için geçen değeri alın.
@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 aşağıdaki gibidir ve kaydırma işleminin nasıl
enterAlwaysScrollBehavior()
davranışı görünüyor:
Büyük
Büyük bir üst uygulama çubuğu aracıya benzer ancak
daha büyük olduğunu ve genel olarak ekranda daha fazla yer kapladığını gösterir. Alıcı:
LargeTopAppBar
composable'ı kullanın.
Önceki snippet'lerin aksine, bu örnek
Geçtiği değeri elde etmek için exitUntilCollapsedScrollBehavior()
scrollBehavior
. Dolayısıyla, kullanıcı sayfayı kaydırdığında çubuk daralır
iç içeriği kaplar, ancak sonra kullanıcı sayfayı sonuna kadar kaydırdığında genişler
içsel içeriği ele alacağız.
@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:
![Sol tarafta işlem simgelerini tutan alt uygulama çubuğunun, sağ tarafında kayan bir işlem düğmesinin bulunduğu bir uygulama ekranı.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-large.png?authuser=0000&hl=tr)
Alt uygulama çubuğu
Alt uygulama çubuğu oluşturmak için BottomAppBar
composable'ı kullanın. Bunu kullanma
composable,
bölümlerine göz atabilirsiniz. Aşağıdaki anahtar için composable'ları iletiyorsunuz
parametre:
actions
: Çubuğun sol tarafında görünen bir dizi simge. Bu genellikle ilgili ekran veya gezinme öğeleri için temel işlemlerdir.floatingActionButton
: Ekranda görünen kayan işlem düğmesi yer alır.
@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:
![Sol tarafta işlem simgelerini tutan alt uygulama çubuğunun, sağ tarafında kayan bir işlem düğmesinin bulunduğu bir uygulama ekranı.](https://developer.android.com/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=0000&hl=tr)
Ek kaynaklar
- Material3 dokümanları - Üst uygulama çubuğu
- Material3 dokümanları - Alt uygulama çubuğu
- Yönlendirici destek