Rozetler

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

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

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox bileşenini kullanın. Sonuçta bir kapsayıcıdır. Görünümü, aşağıdaki iki temel parametreyle kontrol edersiniz:

  • content: BadgedBox öğesinin içerdiği composable içerik. Genellikle Icon.
  • badge: İçeriğin üzerinde rozet olarak görünen composable. Genellikle özel Badge bileşenidir.

Temel örnek

Bu kod snippet'inde BadgedBox işlevinin temel bir uygulaması gösterilmektedir:

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

Bu örnekte, sağlanan Icon composable öğesiyle örtüşen bir rozet gösterilmektedir. Kodda aşağıdakilere dikkat edin:

  • BadgedBox, genel kapsayıcı görevi görür.
  • BadgedBox öğesinin badge parametresi için argüman Badge. Badge bağımsız değişkeninin kendi bağımsız değişkenleri olmadığından uygulama, küçük bir kırmızı daire olan varsayılan rozeti gösterir.
  • Icon, BadgedBox öğesinin content parametresi için argüman görevi görür. Rozetin gösterildiği simgedir. Bu durumda, posta simgesi gösterilir.

Şu şekilde görünür:

İçerik içermeyen basit bir rozet.
Şekil 2. Rozet kullanımı minimum düzeydedir.

Ayrıntılı örnek

Aşağıdaki snippet, kullanıcı işlemlerine yanıt veren rozette değerleri nasıl görüntüleyebileceğinizi göstermektedir.

@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 bir alışveriş sepeti simgesi uygulanmaktadır.

  • BadgedBox yalnızca öğe sayısı 0'ın üzerinde 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ı için composable (Text), rozette görünür. Bu durumda, alışveriş sepetindeki öğelerin sayısını gösterir.

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

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

Ek kaynaklar