Çip

Chip bileşeni, küçük ve etkileşimli bir kullanıcı arayüzü öğesidir. Genellikle simge ve etiketle birlikte kişi veya etiket gibi karmaşık öğeleri temsil eder. Bu düğmeler işaretlenebilir, 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.
  • Filtre: Kullanıcıların bir dizi seçenek arasından içerikleri hassaslaştırmalarına olanak tanır. Bu öğeler seçilebilir veya seçimi kaldırılabilir. Seçildiğinde onay işareti simgesi içerebilir.
  • Giriş: Kullanıcı tarafından sağlanan bilgileri (ör. menüdeki seçimler) temsil eder. Bu düğmeler simge ve metin içerebilir ve kaldırmak için bir "X" sunabilir.
  • Öneri: Kullanıcıya son zamanlarına dayalı olarak öneriler sunar olabilir. Genellikle kullanıcıya istem göndermek için giriş alanının altında görünür işlemlerdir.
Dört çip bileşeninin her birinin, benzersiz özelliklerinin vurgulandığı bir örneği.
Şekil 1. Dört çip bileşeni.

API yüzeyi

Dört çip türüne karşılık gelen dört bileşen vardır. İlgili içeriği oluşturmak için kullanılan aşağıdaki bölümlerde, bu composable'lar ve farklılıkları ayrıntılı olarak açıklanmaktadır. Ancak aşağıdaki parametreleri paylaşırlar:

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

Yardım çipi

AssistChip composable, bir yardım çipidir. Ayırt edici tek bir Bu özellik, sol tarafta bir simge görüntülemenize olanak sağlayan leadingIcon parametresidir yer alır. 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. Yardım çipi.

Filtre çipi

FilterChip bileşeni, çipin seçilip seçilmediğini izlemenizi gerektirir. Aşağıdaki örnekte, yalnızca kullanıcı çipi seçtiğinde önceden işaretlenmiş 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:

İşaretli olmayan ve plan arka planına sahip seçilmemiş bir filtre çipi.
Şekil 3. Seçilmemiş filtre çipi.

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

İşaret ve renkli arka plan içeren seçili filtre çipi.
Şekil 4. Filtre çipi seçildi.

Giriş çipi

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

Aşağıdaki uygulamada, halihazırda 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. Çipi girin.

Öneri çipi

SuggestionChip bileşeni, hem API tanımı hem de yaygın kullanım alanları açısından bu sayfada listelenen bileşenler arasında en temel olanıdır. Öneri çipler, dinamik olarak oluşturulan ipuçlarını sunar. Örneğin, bir yapay zeka sohbet uygulamasında, en son mesaja verilecek olası yanıtları sunmak için öneri çiplerini kullanabilirsiniz.

SuggestionChip için aşağıdaki uygulamayı 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ımcı çip.
Şekil 6. Yardım çipi.

Yükseltilmiş çip

Bu dokümandaki tüm örneklerde düz bir görünüm. Gelişmiş bir görünüme sahip bir çip istiyorsanız aşağıdaki üç bileşenden birini kullanın:

Ek kaynaklar