Çip

Chip bileşeni, küçük ve etkileşimli bir kullanıcı arayüzü öğesidir. Genellikle bir simge ve etiketle birlikte, bir kişi veya etiket gibi karmaşık varlıkları temsil eder. Kontrol edilebilir, kapatılabilir veya tıklanabilir olabilir.

Dört çip türü ve bunları kullanabileceğiniz yerler aşağıda açıklanmıştır:

  • Destek: Kullanıcıyı görev sırasında yönlendirir. Genellikle kullanıcı girişine yanıt olarak geçici bir kullanıcı arayüzü öğesi olarak görünür.
  • Filtrele: Kullanıcıların bir dizi seçenek arasından içeriği hassaslaştırmasına olanak tanır. Bunlar seçilebilir veya seçimi kaldırılabilir ve seçildiğinde onay işareti simgesi içerebilir.
  • Giriş: Menüdeki seçimler gibi kullanıcı tarafından sağlanan bilgileri temsil eder. Simge ve metin içerebilir, kaldırma işlemi için ise "X" simgesi olabilir.
  • Öneri: Kullanıcıya son etkinliğine veya girdisine göre öneriler sunar. Genellikle kullanıcı işlemlerini istemek için bir giriş alanının altında görünür.
Dört çip bileşeninden oluşan, benzersiz özellikleri vurgulanmış halde bir örnek.
Şekil 1. Bu dört çip bileşeninden bahsedelim.

API yüzeyi

Dört çip türüne karşılık gelen dört composable vardır. Aşağıdaki bölümlerde, bu composable'lar ve farklılıkları ayrıntılı olarak açıklanmaktadır. Bununla birlikte, bunlar aşağıdaki parametreleri paylaşır:

  • label: Çipte görünen dize.
  • icon: Çipin başında gösterilen simge. Spesifik composable'ların bazılarında ayrı leadingIcon ve trailingIcon parametreleri vardır.
  • onClick: Kullanıcı bastığında çipin çağırdığı lambda.

Destek çipi

AssistChip composable, kullanıcıyı belirli bir yöne yönlendiren bir yardım çipi oluşturmanın basit bir yolunu sunar. Ayırt edici özelliklerden biri, çipin sol tarafında bir simge görüntüleyebilmenizi sağlayan leadingIcon parametresidir. Aşağıdaki örnekte bu özelliği nasıl uygulayabileceğiniz gösterilmektedir:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

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

Basit bir yardım çipi.
Şekil 2. Destek çipi.

Filtre çipi

FilterChip composable, çipin seçili olup olmadığını izlemenizi gerektirir. Aşağıdaki örnek, yalnızca kullanıcı çipi seçtiğinde başındaki işaretli bir simgeyi nasıl gösterebileceğinizi gösterir:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

Bu uygulama, seçim kaldırıldığında aşağıdaki gibi görünür:

İşaretlenmemiş ve plan arka planı olmayan, seçili olmayan bir filtre çipi.
Şekil 3. Filtre çipi seçili değil.

Ayrıca seçildiğinde aşağıdaki gibi görünür:

Onay işareti ve renkli arka plan içeren filtre çipi.
Şekil 4. Filtre çipi seçildi.

Giriş çipi

Kullanıcı etkileşiminden kaynaklanan çipler oluşturmak için composable'ı (InputChip) kullanabilirsiniz. Örneğin, bir e-posta istemcisinde kullanıcı e-posta yazarken giriş çipi, kullanıcının "kime:" alanına adresini girdiği bir kişiyi temsil edebilir.

Aşağıdaki uygulamada, zaten seçili durumda olan bir giriş çipi gösterilmektedir. Kullanıcı çipe bastığında çipi kapatır.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

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

Avatar ve altındaki simge içeren bir giriş çipi.
Şekil 5. Giriş çipi.

Öneri çipi

SuggestionChip composable, hem API tanımı hem de yaygın kullanım alanları açısından bu sayfada listelenen composable'ların en temelidir. Öneri çipleri, dinamik olarak oluşturulan ipuçlarını sunar. Örneğin, bir AI sohbet uygulamasında en son mesaja verilebilecek yanıtları sunmak için öneri çiplerini kullanabilirsiniz.

Şu SuggestionChip uygulamasını düşünün:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

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

Basit bir yardım çipi.
Şekil 6. Destek çipi.

Yükseltilmiş çip

Bu belgedeki tüm örneklerde, sabit görünüm alan temel composable'lar kullanılmaktadır. Yükseltilmiş bir çip istiyorsanız aşağıdaki üç composable'dan birini kullanın:

Ek kaynaklar