Uygulama çubukları

Uygulama çubukları, kullanıcıya temel özelliklere ve gezinme öğelerine erişim sağlayan kapsayıcılardır. İki tür uygulama çubuğu vardır: üst uygulama çubukları ve alt uygulama çubukları. Bu düğmelerin 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.

Ö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. İçerisinde kayan işlem düğmesi bulunan diğer önemli işlemlere de erişim sağlayabilir.
Üst ve alt uygulama çubuğu örneği.
Ş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.

Üst uygulama çubukları

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

Tür

Örnek

Küçük: Çok fazla gezinme veya işlem gerektirmeyen ekranlar için.

 Üstte küçük uygulama çubuğu

Ortaya hizalı: Tek bir birincil işlemi olan ekranlar için.

 Üst uygulama çubuğu ortada hizalanmış

Orta: Orta düzeyde gezinme ve işlem gerektiren ekranlar için.

 Orta üst uygulama çubuğu

Büyük: Çok fazla gezinme ve işlem gerektiren ekranlar için.

 Üstte büyük uygulama çubuğu

API yüzeyi

Dört farklı üst uygulama çubuğunu uygulamanıza olanak tanıyan çeşitli derlenebilirler oldukça benzerdir. Bu iki modelin ortak bazı temel parametreleri 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ıya önemli işlemlere erişim sağlayan simgeler. Bu simgeler, uygulama çubuğunun sağında görünür.
  • scrollBehavior: Üst uygulama çubuğunun, iskeletin 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ı, 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. 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ğı çektiğinde uygulama çubuğu genişler.
  • exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior'e benzer ancak kullanıcı iskeletin 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 birkaçı 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ü için uygulamalar sağlanmaktadır.

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 iletilmez ve bu nedenle 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:

Üstte küçük bir uygulama çubuğu örneği.
Şekil 2. Üstte küçük bir 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 bileşenini kullanın.

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 daraltılı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:

Alternatif metninizi buraya yazın
Ş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 bileşenini 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 hizalanmış bir ü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:

Bir uygulamada, sol tarafta işlem simgelerini barındıran alt uygulama çubuğu ve sağ tarafta yüzen işlem düğmesi bulunan ekran.
Şekil 5. Üstte büyük bir uygulama çubuğu örneği.

Alt uygulama çubuğu

Alt uygulama çubuğu oluşturmak için BottomAppBar bileşenini kullanın. Bu bileşeni kullanma, bu sayfanın önceki bölümlerinde açıklanan üst uygulama çubuğu bileşenlerine oldukça benzer. 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: Ç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:

Bir uygulamada, sol tarafta işlem simgelerini barındıran alt uygulama çubuğu ve sağ tarafta yüzen işlem düğmesi bulunan ekran.
Şekil 6. Alt uygulama çubuğu örneği.

Ek kaynaklar