Rozetler

Durumu veya başka bir composable'daki sayısal değeri belirtmek için küçük bir görsel öğe görüntülemek üzere rozet kullanın. Rozet kullanabileceğiniz birkaç yaygın senaryo aşağıda verilmiştir:

  • 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ı örnekleri.
Şekil 1. 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 ana 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"
        )
    }
}

Bu örnekte, sağlanan Icon composable'ı kaplayan bir rozet gösterilmektedir. Koddaki aşağıdaki noktalara dikkat edin:

  • BadgedBox genel kapsayıcı olarak kullanılır.
  • BadgedBox parametresinin badge bağımsız değişkeni Badge'dir. Badge'ün kendi bağımsız değişkenleri olmadığından uygulama, küçük kırmızı bir daire olan varsayılan rozeti gösterir.
  • Icon, BadgedBox öğesinin content parametresinin bağımsız değişkeni olarak işlev görü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 { mutableIntStateOf(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")
        }
    }
}

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ı.
Şekil 3. Alışveriş sepetindeki öğe sayısını gösteren rozet.

Ek kaynaklar