Uygulama çubukları, kullanıcının temel özelliklere ve gezinme öğelerine erişmesini sağlayan kapsayıcılardır. Üst uygulama çubukları ve alt uygulama çubukları olmak üzere iki tür uygulama çubuğu vardır. İlgili görünüm ve amaç 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, içerilen kayan işlem düğmesi gibi diğer temel işlemlere erişim sağlayabilir. |
Üst uygulama çubuğu ve alt uygulama çubuğu eklemek için sırasıyla TopAppBar ve BottomAppBar composable'larını kullanın. Gezinme ve işlem kontrollerini kapsayan ve Materyal Tasarım ilkeleriyle uyumlu arayüzler oluşturmanızı sağlarlar.
En iyi uygulama çubukları
Aşağıdaki tabloda dört üst uygulama çubuğu türü özetlenmektedir:
Tür |
Örnek |
|---|---|
Küçük: Çok fazla gezinme veya işlem gerektirmeyen ekranlar için. |
|
Ortaya hizalanmış: Tek, birincil işlemi olan ekranlar için. |
|
Orta: Kısmen 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. Ortak birkaç parametre vardı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. Bunlar, uygulama çubuğunun sağında görünür.scrollBehavior: Üst uygulama çubuğunun, yapı iskelesinin içindeki içeriğin 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ı, iskelenin içindeki içeriği kaydırdığında uygulama çubuğunun nasıl tepki vereceğini kontrol edebilirsiniz. Bunu yapmak için bir TopAppBarScrollBehavior örneği oluşturup 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 açtığında üst uygulama çubuğu daralır. Kullanıcı içerideki içeriği çektiğinde uygulama çubuğu genişler.exitUntilCollapsedScrollBehavior:enterAlwaysScrollBehaviorile benzerdir, ancak kullanıcı yapı iskelesindeki içeriğin sonuna ulaştığında uygulama çubuğu daha 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 dört farklı üst uygulama çubuğu türü için uygulamalar ve kaydırma davranışını nasıl kontrol edebileceğinize dair çeşitli örnekler verilmiştir.
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 sadece bir başlık bulunmaktadır.
Aşağıdaki örnek, TopAppBar için bir scrollBehavior değeri iletmez ve bu nedenle 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 küçük uygulama çubuğuyla aynıdır. Bu özelliği uygulamak için özel CenterAlignedTopAppBar composable'ı kullanın.
Bu örnekte, scrollBehavior için geçirilen değeri almak amacıyla enterAlwaysScrollBehavior() kullanılmıştır. Bu nedenle, kullanıcı yapı iskelesinin içindeki içeriği kaydırdığında çubuk daralır.
@Composable
fun CenterAlignedTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
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.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 orta kısımdaki uygulama çubuğu, başlığı diğer simgelerin altına yerleştirir. Fotoğraf oluşturmak için MediumTopAppBar composable'ı kullanın.
Önceki snippet'te olduğu gibi bu örnekte de scrollBehavior için iletilen değeri almak amacıyla enterAlwaysScrollBehavior() kullanılmıştı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.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() kaynağı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 taraftaki geniş uygulama çubuğu, aracıya benzer. Ancak başlık ile simgeler arasındaki dolgu daha fazladır ve ekranda genel olarak daha fazla yer kaplar. Oluşturmak için LargeTopAppBar composable'ı kullanın.
Önceki snippet'lerden farklı olarak bu örnekte scrollBehavior için iletilen değeri almak amacıyla exitUntilCollapsedScrollBehavior() kullanılır. Bu şekilde, kullanıcı yapı iskelesinin içindeki içeriği kaydırdığında çubuk daralır, ancak kullanıcı iç kısımdaki içeriğin sonuna geldiğinde 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.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'ı kullanmak, bu sayfanın önceki bölümlerinde açıklanan üst uygulama çubuğu composable'larına oldukça benzer. Aşağıdaki temel parametreler için composable'ları geçirirsiniz:
actions: Çubuğun sol tarafında görünen bir dizi simge. Bunlar, genellikle belirtilen ekran için temel 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
- Yönlendirici destek