Uygulama çubukları

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.

Ş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 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.

Önemli: Uygulama çubukları genellikle, bunları alacak belirli parametrelere sahip Scaffold bileşenine iletilir. Scaffold'ün, uygulamanızı kolayca yapılandırmanıza nasıl yardımcı olduğu hakkında daha fazla bilgi edinmek için Scaffold sayfasını ziyaret edin.

Ü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 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 bileşenler 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ıya önemli işlemlere erişim 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 iskeletin 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. 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 yerinde kalır ve kaydırmaya tepki vermez.

Aşağıdaki örneklerde bu seçeneklerden birkaçı 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

Ü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)
    }
}
AppBar.kt

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

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

Ortaya hizalı

Ortaya hizalanmış üst uygulama çubuğu, başlık bileşen içinde ortalanmasına rağmen temel olarak küçük uygulama çubuğuyla aynıdır. Bunu uygulamak için, özel CenterAlignedTopAppBar composable.

Bu örnekte, scrollBehavior için ilettiği değeri almak üzere enterAlwaysScrollBehavior() kullanılır. Bu nedenle, kullanıcı iskeletin 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)
    }
}
AppBar.kt

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

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

Orta

Orta üst uygulama çubuğu, başlığı ek 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 ü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, enterAlwaysScrollBehavior()'teki kaydırma davranışının nasıl göründüğünü gösteren bir gösterimle birlikte aşağıdaki gibi görünür:

Şekil 4. Ortaya hizalı üst uygulama çubuğu.

Büyük

Büyük üst uygulama çubuğu, orta boy uygulama çubuğuna 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)
    }
}
AppBar.kt

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

Şekil 5. Büyük bir üst uygulama çubuğunun uygulanması örneği.

Alt uygulama çubuğu

Alt uygulama çubuğu oluşturmak için BottomAppBar bileşenini kullanın. Bunu kullanma composable, bölümlerine göz atabilirsiniz. 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: 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."
        )
    }
}
AppBar.kt

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

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

Not: actions ve floatingActionButton için bir değer iletmeden de BottomAppBar kullanabilirsiniz. Bu durumda, BottomAppBar, diğer kapsayıcılarda yaptığınız gibi içerikle doldurulur.

Ek kaynaklar

• Material3 docs - Top app bar
• Material3 dokümanları - Alt uygulama çubuğu
• Destekleyici