Uygulama çubukları

Uygulama çubukları, kullanıcının temel özelliklere ve gezinme öğelerine erişmesini sağlayan kapsayıcılardır. İki tür uygulama çubuğu vardır: üst uygulama çubukları ve alt uygulama çubukları. Görünümleri ve amaçları aşağıdaki gibidir:

Tür	Görünüm	Amaç
Üst uygulama çubuğu	Ekranın üst kısmında.	Önemli görevlere ve bilgilere erişim sağlar. Genellikle bir başlık, temel işlem öğeleri ve belirli gezinme öğeleri barındırır.
Alt uygulama çubuğu	Ekranın alt kısmında.	Genellikle temel gezinme öğelerini içerir. Ayrıca, içerdiği kayan işlem düğmesi gibi diğer önemli işlemlere erişim de sağlayabilir.

Şekil 1. Üst uygulama çubuğu (solda) ve alt uygulama çubuğu (sağda).

Üst uygulama çubuğu ve alt uygulama çubuğu uygulamak için sırasıyla TopAppBar ve BottomAppBar composable'larını kullanın. Bu bileşenler, gezinme ve işlem kontrollerini kapsayan ve Materyal Tasarım ilkeleriyle uyumlu tutarlı arayüzler oluşturmanıza olanak tanır.

Önemli: Uygulama çubukları genellikle Scaffold composable'ına iletilir. Bu composable'ın, uygulama çubuklarını almak için belirli parametreleri vardır. Scaffold uygulamasının, uygulamanızı yapılandırmak için nasıl kullanışlı bir yöntem sunduğu hakkında daha fazla bilgi edinmek için Scaffold sayfasını ziyaret edin.

Üst uygulama çubukları

Aşağıdaki tabloda dört tür üst uygulama çubuğu açıklanmaktadır:

Tür	Örnek
Küçük: Çok fazla gezinme veya işlem gerektirmeyen ekranlar için kullanılır.
Ortaya hizalı: Tek bir birincil işlem içeren ekranlar için kullanılır.
Orta: Orta düzeyde gezinme ve işlem gerektiren ekranlar için kullanılır.
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 birbirine oldukça benzer. Bu iki model, bazı temel parametreleri 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 önemli işlemlere erişmesini sağlayan simgeler. Uygulama çubuğunun sağ tarafında görünürler.
• scrollBehavior: Üst uygulama çubuğunun, iskelenin iç içeriğinin kaydırılmasına nasıl yanıt vereceğini belirler.
• colors: Uygulama çubuğunun nasıl görüneceğini belirler.

Kaydırma davranışı

Kullanıcı, verilen iskelenin iç içeriğini kaydırdığında uygulama çubuğunun nasıl yanıt vereceğini kontrol edebilirsiniz. Bunu yapmak için TopAppBarScrollBehavior örneği oluşturun ve 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. Kullanıcı iç içeriği aşağı çekmeye başladığında uygulama çubuğu genişler.
• exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior ile benzerdir ancak uygulama çubuğu yalnızca kullanıcı içeriği tamamen aşağı çektiğinde genişler.
• pinnedScrollBehavior: Uygulama çubuğu yerinde kalır ve kaydırma işlemine 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ğinizle ilgili çeşitli örnekler de dahil olmak üzere dört farklı üst uygulama çubuğu türü için uygulamalar sunulmaktadır.

Küçük

Küçük bir üst uygulama çubuğu oluşturmak için TopAppBar composable'ı kullanın. Aşağıdaki örnekte, yalnızca başlık içeren temel bir üst uygulama çubuğu uygulanmaktadır.

Aşağıdaki örnekte scrollBehavior için bir TopAppBar 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)
    }
}
AppBar.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 2. Küçük bir üst uygulama çubuğu.

Ortaya hizalı

Ortalanmış üst uygulama çubuğu, başlığın bileşen içinde ortalanması dışında küçük uygulama çubuğuyla temelde aynıdır. Bunu uygulamak için özel CenterAlignedTopAppBar composable'ını kullanın.

Bu örnekte, scrollBehavior için ilettiği değeri almak üzere enterAlwaysScrollBehavior() kullanılır. Bu nedenle, 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.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.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 3. Ortaya hizalanmış bir üst uygulama çubuğu.

Orta

Orta boy üst uygulama çubuğu, başlığı diğer simgelerin altına yerleştirir. Oluşturmak için MediumTopAppBar composable'ını 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)
    }
}
AppBar.kt

Bu uygulama aşağıdaki gibi görünür ve enterAlwaysScrollBehavior() öğesindeki kaydırma davranışının nasıl göründüğü gösterilir:

Şekil 4. Kullanıcı yukarı kaydırdığında daralan ve aşağı kaydırdığında genişleyen orta boy bir üst uygulama çubuğu.

Büyük

Büyük üst uygulama çubuğu, orta boyuta benzer ancak başlık ile simgeler arasındaki dolgu daha fazladır ve ekranda daha fazla yer kaplar. Oluşturmak için LargeTopAppBar composable'ını kullanın.

Önceki snippet'lerden farklı olarak bu örnekte, scrollBehavior için ilettiği değeri almak üzere exitUntilCollapsedScrollBehavior() kullanılır. Bu nedenle, kullanıcı iskelenin 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)
    }
}
AppBar.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 5. Büyük üst uygulama çubuğunun örnek bir uygulaması.

Alt uygulama çubuğu

Alt uygulama çubuğu oluşturmak için BottomAppBar composable'ını 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 parametreler için composable'lar iletirsiniz:

• actions: Çubuğun sol tarafında görünen bir dizi simge. Bunlar genellikle ilgili ekranın önemli işlemleri 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."
        )
    }
}
AppBar.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 6. Alt uygulama çubuğunun örnek bir uygulaması.

Not: BottomAppBar işlevini actions ve floatingActionButton için bir değer iletmeden de kullanabilirsiniz. Bu durumda, BottomAppBar öğesini diğer kapsayıcılar gibi içerikle doldurarak özel bir alt uygulama çubuğu oluşturabilirsiniz.

Ek kaynaklar

• Material3 belgeleri - Üst uygulama çubuğu
• Material3 belgeleri - Alt uygulama çubuğu
• Scaffold