Uygulama çubukları

Uygulama çubukları, kullanıcının temel özelliklere ve gezinme öğelerine erişmesini sağlayan kapsayıcılardır. Üst uygulama çubuğu ve alt uygulama çubuğu olmak üzere iki tür uygulama çubuğu vardır. 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 ve alt uygulama çubuğu örneği.
Şekil 1. Üst uygulama çubuğu (solda) ve alt uygulama çubuğu (sağ).

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

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

 Küçük üst uygulama çubuğu

Ortaya hizalı: Tek bir birincil işleme sahip ekranlar için.

 Ortaya hizalı üst uygulama çubuğu

Orta: Orta miktarda gezinme ve işlem gerektiren ekranlar için.

 Orta seviye üst uygulama çubuğu

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

 Üst kısımdaki büyük uygulama çubuğu

API yüzeyi

Dört farklı üst uygulama çubuğunu uygulamanıza olanak tanıyan çeşitli composable'lar oldukça benzerdir. Bunlar birkaç temel parametreyi 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 temel işlemlere erişmesini sağlayan simgeler. Uygulama çubuğunun sağında görünür.
  • scrollBehavior: Üst uygulama çubuğunun, iskelenin 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ı, belirtilen iskelenin iç içeriğini kaydırdığında uygulama çubuğunun nasıl tepki vereceğini kontrol edebilirsiniz. Bunu yapmak için bir TopAppBarScrollBehavior örneği oluşturun ve bunu scrollBehavior parametresi için üst uygulama çubuğunuza iletin.

Üç tür TopAppBarScrollBehavior vardır. Bu özellikler şunlardır:

  • enterAlwaysScrollBehavior: Kullanıcı, iskelenin iç içeriğini açtığında üst uygulama çubuğu daralır. Uygulama çubuğu, kullanıcı iç içeriği genişlettiğinde genişler.
  • exitUntilCollapsedScrollBehavior: enterAlwaysScrollBehavior özelliğine benzer. Bununla birlikte, kullanıcı iskelenin 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 bazıları 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üne ilişkin uygulamalar sunulmaktadır.

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 yalnızca bir başlık bulunmaktadır.

Aşağıdaki örnek, scrollBehavior için TopAppBar değerine bir değer iletmediğinden 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)
    }
}
AppBar.kt

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

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

Ortaya hizalı

Başlık bileşenin içinde ortalanmış olsa da ortaya hizalı üst uygulama çubuğu, temelde küçük uygulama çubuğuyla aynıdır. Uygulamak için özel CenterAlignedTopAppBar composable'ı kullanın.

Bu örnekte, scrollBehavior için ilettiği değeri almak amacıyla enterAlwaysScrollBehavior() kullanılmaktadır. Dolayısıyla, 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:

Alternatif metninizi buraya yazın
Şekil 3. Ortaya hizalı üst uygulama çubuğu.

Ortam

Ü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 de scrollBehavior için ilettiği değeri almak amacıyla 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() sayfasındaki kaydırma davranışının nasıl göründüğüyle birlikte aşağıdaki gibi görünür:

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

Büyük

Üst kısımdaki büyük uygulama çubuğu ortama 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 composable'ı kullanın.

Önceki snippet'lerin aksine bu örnek, scrollBehavior için ilettiği değeri almak amacıyla exitUntilCollapsedScrollBehavior() kullanır. Aynı şekilde, kullanıcı iskelenin iç içeriğini kaydırdığında çubuk daralır, ancak kullanıcı sayfayı 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:

Sol tarafta işlem simgelerini tutan alt uygulama çubuğunun, sağ tarafında kayan bir işlem düğmesinin bulunduğu bir uygulama ekranı.
Ş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 composable'ı 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 parametreleri için composable'ları iletirsiniz:

  • actions: Çubuğun sol tarafında görünen bir dizi simge. Bunlar genellikle ilgili ekran veya gezinme öğeleri için temel işlemlerdir.
  • 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:

Sol tarafta işlem simgelerini tutan alt uygulama çubuğunun, sağ tarafında kayan bir işlem düğmesinin bulunduğu bir uygulama ekranı.
Şekil 6. Alt uygulama çubuğunun uygulanmasına bir örnek.

Ek kaynaklar