Rozetler

Başka bir composable'daki durumu veya sayısal değeri göstermek üzere küçük bir görsel öğe görüntülemek 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ı belirtin.
  • Durum güncellemeleri: Bir görevin "tamamlandı", "devam ediyor" veya "başarısız" gibi durumunu gösterin.
  • Alışveriş sepeti miktarı: Bir kullanıcının alışveriş sepetindeki öğe sayısını gösterir.
  • Yeni içerik: Kullanıcıya sunulan yeni içeriği veya özellikleri öne çıkarın.
Rozet bileşeninin farklı örneği.
Şekil 1. Rozet örnekleri

API yüzeyi

Uygulamanızda rozetleri uygulamak için BadgedBox composable'ı kullanın. Nihayetinde bir container'dır. Görünümünü şu iki ana 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 composable'dır.

Temel örnek

Bu kod snippet'i, BadgedBox temel 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 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 kendi bağımsız değişkeni olmadığından, uygulama varsayılan rozeti (küçük kırmızı bir daire) gösterir.
  • Icon, BadgedBox öğesinin content parametresinin bağımsız değişkeni olarak kullanılır. Bu, rozetin üzerinde göründüğü simgedir. Bu durumda, bu bir posta simgesidir.

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

İçerik bulunmayan 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ö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 bir alışveriş sepeti simgesi uygulanmıştır.

  • BadgedBox yalnızca öğe sayısı 0'ın üzerinde olduğunda görüntülenir.
  • containerColor ve contentColor için bağımsız değişkenler, rozetin görünümünü kontrol eder.
  • Badge içerik alanı için composable (Text), rozette 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ş 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