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.
Ü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ğunu uygulamak için TopAppBar ve BottomAppBar composable, Tutarlı içerikler üretmenize gezinme ve işlem kontrollerini kapsayan arayüzler ile ve Materyal Tasarım ilkeleriyle uyumludur.

Ü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ı popüler uygulamayı kullanmanıza olanak tanıyan çeşitli composable'lar çubuklar 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ının temel işlemlere erişmesini 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 öğeyi kaydırdığında uygulama çubuğunun nasıl yanıt vereceğini kontrol edebilirsiniz. tasarımıyla ilgilidir. Bunu yapmak için TopAppBarScrollBehavior simgesine dokunun ve scrollBehavior parametresi.

Üç 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 sabit kalır ve kaydırır.

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

Küçük bir üst uygulama çubuğu oluşturmak için TopAppBar composable'ı kullanın. Bu, basit bir üst uygulama çubuğu var. Bu örnekte sadece bir başlık var.

Aşağıdaki örnek, TopAppBar ürününe scrollBehavior ve dolayısıyla iç kısımdaki kaydırma işlemine tepki vermez içerik.

@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ı

Ortaya hizalı üst uygulama çubuğu, temelde küçük uygulama çubuğuyla aynıdır. başlık, bileşenin içinde ortalanmış olsa bile. Bunu uygulamak için, özel CenterAlignedTopAppBar composable.

Bu örnekte, aktardığı değeri elde etmek için enterAlwaysScrollBehavior() kullanılır (scrollBehavior için). Dolayısıyla, kullanıcı sayfayı kaydırdığında çubuk daralır tasarımıyla ilgilidir.

@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 hizalı üst uygulama çubuğu.

Orta

Ü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 aşağıdaki işlemler için enterAlwaysScrollBehavior() kullanılmıştır: scrollBehavior için geçen değeri alın.

@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 gibidir ve kaydırma işleminin nasıl enterAlwaysScrollBehavior() davranışı görünüyor:

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

Büyük

Büyük bir üst uygulama çubuğu aracıya benzer ancak daha büyük olduğunu ve genel olarak ekranda daha fazla yer kapladığını gösterir. Alıcı: LargeTopAppBar composable'ı kullanın.

Önceki snippet'lerin aksine, bu örnek Geçtiği değeri elde etmek için exitUntilCollapsedScrollBehavior() scrollBehavior. Dolayısıyla, kullanıcı sayfayı kaydırdığında çubuk daralır iç içeriği kaplar, ancak sonra kullanıcı sayfayı sonuna kadar kaydırdığında genişler içsel içeriği ele alacağız.

@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. Bunu kullanma composable, bölümlerine göz atabilirsiniz. Aşağıdaki anahtar için composable'ları iletiyorsunuz parametre:

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

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.
ziyaret edin.

Ek kaynaklar