Rozetler

Başka bir composable'daki durumu veya sayısal değeri belirtmek amacıyla küçük bir görsel öğe göstermek için rozet kullanın. Rozet kullanabileceğiniz bazı yaygın senaryolar şunlardır:

  • Bildirimler: Okunmamış bildirimlerin sayısını uygulama simgesi veya bildirim zilinde görüntüleyin.
  • Mesajlar: Bir sohbet uygulamasındaki yeni veya okunmamış mesajları belirtir.
  • 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ünü şu iki ana parametreyle kontrol edersiniz:

  • content: BadgedBox'un içerdiği birleştirilebilir içerik. Genellikle Icon.
  • badge: İçeriğin üzerindeki rozet olarak görünen kompozisyon. 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 ile çakışan 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 bağımsız değişken 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, bu bir posta simgesidir.

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

İçerik bulunmayan basit bir rozet.
Şekil 2. Minimum rozet uygulaması.

Ayrıntılı örnek

Aşağıdaki snippet'te, rozete kullanıcı işlemlerine yanıt veren değerleri nasıl gösterebileceğiniz gösterilmektedir.

@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'dan fazlaysa gösterilir.
  • containerColor ve contentColor bağımsız değişkenleri rozetin görünümünü kontrol eder.
  • Badge içeriği için Text bileşeni rozet içinde görünür. Bu örnekte, alışveriş sepetindeki öğelerin sayısı gösterilir.

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

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

Ek kaynaklar