Çip

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

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

  • Destek: Bir görev sırasında kullanıcıya rehberlik eder. Genellikle kullanıcı girişine yanıt olarak geçici bir kullanıcı arayüzü öğesi olarak görünür.
  • Filtre: Kullanıcıların içeriği bir dizi seçeneğe göre hassaslaştırmasına olanak tanır. Bunlar seçilebilir veya seçimleri kaldırılabilir ve seçildiğinde bir onay işareti simgesi içerebilir.
  • Giriş: Bir menüdeki seçimler gibi kullanıcı tarafından sağlanan bilgileri temsil eder. Bunlar bir simge ve metin içerebilir ve kaldırılması için bir "X" sağlayabilir.
  • Öneri: Son etkinliğine veya girişine dayalı olarak kullanıcıya ö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 her birinin, benzersiz özelliklerinin vurgulandığı örnek.
Şekil 1. Dört çip bileşeni.

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 aralarındaki fark ayrıntılı olarak açıklanmaktadır. Ancak, aşağıdaki parametreleri paylaşırlar:

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

Yardım ç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 özelliklerinden biri, çipin sol tarafında bir simge görüntülemenize olanak tanıyan leadingIcon parametresidir. Aşağıdaki örnekte, bunu 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 örnekte, yalnızca kullanıcı çipi seçtiğinde önde gelen işaretli bir simgeyi nasıl gösterebileceğiniz gösterilmektedir:

@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çilmediğinde aşağıdaki gibi görünür:

Onay içermeyen ve plan arka planı olan seçili olmayan bir filtre çipi.
Şekil 3. Filtre çipi seçili değil.

Ve seçildiğinde şöyle görünür:

Seçili filtre çipi ile bir onay işareti ve renkli arka plan gösteriliyor.
Şekil 4. Seçili filtre çipi.

Giriş çipi

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

Aşağıdaki uygulamada, zaten seçili durumda olan bir giriş çipi gösterilmektedir. Kullanıcı, 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 sonda simgesi olan 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 arasında en temel olanıdır. Öneri çipleri, dinamik olarak oluşturulan ipuçları sunar. Örneğin, bir AI sohbet uygulamasında en son mesaja verilen olası yanıtları sunmak için öneri çiplerini kullanabilirsiniz.

Şu SuggestionChip uygulamasını göz önünde bulundurun:

@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, düz bir görünüme sahip olan temel composable'lar kullanılmaktadır. Yükseltilmiş görünüme sahip bir çip istiyorsanız aşağıdaki üç composable'dan birini kullanın:

Ek kaynaklar