Alt uygulama çubuğu gösterme

Kullanıcıların uygulamanızda gezinmesine ve işlevlere erişmesine yardımcı olmak için alt uygulama çubuğu oluşturun. BottomAppBar bileşenini kullanarak uygulamanıza alt uygulama çubuğu eklemek için bu kılavuzu uygulayın.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

Alt uygulama çubuğu oluşturma

Dört simge düğmesi ve bir kayan işlem düğmesi içeren bir alt uygulama çubuğu oluşturmak için aşağıdaki kodu kullanın:

@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."
        )
    }
}

Kodla ilgili önemli noktalar

  • bottomBar ayarlanmış bir dış Scaffold.
  • İşlemlerin listesini içeren bir bottomBar uygulaması.
  • Resim ve içerik açıklaması metni için Icon içeren IconButton uygulamalarının işlemleridir. Bu işlemlerin her biri, bu işlemleri gerçekleştirmek için bir onClick lambda içerir.

Aşağıdaki temel parametreler için birleştirilebilir öğeler iletebilirsiniz:

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

Sonuçlar

 Alt uygulama çubuğu örneği
Şekil 1. Alt uygulama çubuğu örneği.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Karmaşık kullanıcı arayüzleri oluşturmak için standartlaştırılmış bir platformu nasıl kullanacağınızı öğrenin. İskelet, kullanıcı arayüzünün farklı bölümlerini bir arada tutarak uygulamalara tutarlı bir görünüm ve tarz kazandırır.
Birleştirilebilir işlevlerin, Materyal Tasarım tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenleri oluşturmanızı nasıl kolaylaştırabileceğini öğrenin.

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.