Rozetler

Başka bir composable'da durumu veya sayısal değeri belirtmek için küçük bir görsel öğe görüntülemek üzere badge kullanın. Rozet kullanabileceğiniz bazı yaygın senaryolar şunlardır:

  • Bildirimler: Okunmamış bildirimlerin sayısını uygulama simgesinde veya bildirim zilinde gösterir.
  • Mesajlar: Bir sohbet uygulamasındaki yeni veya okunmamış mesajları gösterir.
  • Durum güncellemeleri: Bir görevin durumunu gösterir (ör. "tamamlandı", "devam ediyor" veya "başarısız oldu").
  • Sepet miktarı: Kullanıcının alışveriş sepetindeki öğe sayısını gösterin.
  • Yeni içerik: Kullanıcının erişebileceği yeni içerikleri veya özellikleri vurgulayın.
Rozet bileşeninin farklı bir örneği.
1. Şekil. Rozet örnekleri

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox composable'ını kullanın. Sonuçta bir kapsayıcıdır. Görünümünü şu iki temel parametreyle kontrol edebilirsiniz:

  • content: BadgedBox öğesinin içerdiği birleştirilebilir içerik. Normalde Icon.
  • badge: İçeriğin üzerinde rozet olarak görünen composable. Genellikle özel Badge composable'dır.

Temel örnek

Bu kod snippet'i, BadgedBox'nın temel bir uygulamasını gösterir:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

Bu örnekte, sağlanan Icon composable'ı kaplayan bir rozet gösterilmektedir. Koddaki aşağıdaki noktaları göz önünde bulundurun:

  • BadgedBox genel kapsayıcı olarak kullanılır.
  • BadgedBox işlevinin badge parametresinin bağımsız değişkeni Badge. Badge'nın kendi bağımsız değişkenleri olmadığı için uygulamada küçük bir kırmızı daire olan varsayılan rozet gösterilir.
  • Icon, BadgedBox işlevinin content parametresinin bağımsız değişkeni olarak kullanılır. Rozetin üzerinde göründüğü simgedir. Bu durumda, posta simgesi gösterilir.

Bu özellik şu şekilde görünür:

İçerik barındırmayan basit bir rozet.
Şekil 2. Minimum düzeyde rozet uygulaması.

Ayrıntılı örnek

Aşağıdaki snippet, rozetteki değerleri kullanıcı işlemlerine yanıt verecek şekilde nasıl gösterebileceğinizi gösterir.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

Bu örnekte, kullanıcının sepetindeki öğe sayısını gösteren bir rozet içeren alışveriş sepeti simgesi uygulanmaktadır.

  • BadgedBox yalnızca öğe sayısı 0'dan fazla olduğunda gösterilir.
  • containerColor ve contentColor bağımsız değişkenleri, rozetin görünümünü kontrol eder.
  • Badge içerik alanının Text composable'ı rozetin içinde görünür. Bu durumda, alışveriş sepetindeki öğelerin sayısı gösterilir.

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

Alışveriş sepetindeki öğe sayısını içeren bir rozet uygulaması.
3.şekil Alışveriş sepetindeki öğe sayısını gösteren rozet.

Ek kaynaklar