Çip

Chip bileşeni, kompakt ve etkileşimli bir kullanıcı arayüzü öğesidir. Kişi veya etiket gibi karmaşık varlıkları temsil eder ve genellikle bir simge ile etiket içerir. İşaretlenebilir, kapatılabilir veya tıklanabilir olabilir.

Dört çip türü ve bunları kullanabileceğiniz yerler şunlardı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 şeklinde görünür.
  • Filtre: Kullanıcıların bir dizi seçenek arasından içeriği daraltmasına olanak tanır. Seçilebilir veya seçimleri kaldırılabilir. Seçildiklerinde onay işareti simgesi gösterilebilir.
  • Giriş: Menüdeki seçimler gibi kullanıcı tarafından sağlanan bilgileri temsil eder. Simge ve metin içerebilir ve kaldırma için X simgesi sunabilirler.
  • Öneri: Kullanıcıya son etkinliğine veya girişine 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şeninin her birinin benzersiz özelliklerinin vurgulandığı bir ö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 farklar 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ında ayrı bir leadingIcon ve trailingIcon parametresi bulunur.
  • 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östermenize olanak tanıyan 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(
                painter = rememberVectorPainter(AppIcons.Settings),
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}

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

Başta bir simge ve metin etiketi gösteren basit bir yardım çipi.
Şekil 2. Yardım çipi.

Filtre çipi

FilterChip composable'ı, çipin seçilip seçilmediğini takip etmenizi gerektirir. Aşağıdaki örnekte, yalnızca kullanıcı çipi seçtiğinde başta gösterilen işaretli simgeyi nasıl gösterebileceğiniz açıklanmaktadır:

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

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    painter = rememberVectorPainter(AppIcons.Done),
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}

Bu uygulama, seçilmediğinde aşağıdaki gibi görünür:

Seçilmemiş bir filtre çipi. Onay işareti yoktur ve arka planı düzdür.
Şekil 3. Filtre çipinin seçimi kaldırıldı.

Seçildiğinde ise şu şekilde görünür:

Seçili filtre çipi, onay işareti ve renkli arka planla gösterilir.
Şekil 4. Seçili filtre çipi.

Giriş çipi

Kullanıcı etkileşimiyle oluşturulan çipleri oluşturmak için InputChip composable'ını kullanabilirsiniz. Örneğin, bir e-posta istemcisinde kullanıcı e-posta yazarken giriş çipi, kullanıcının "Kime:" alanına eklediği bir kişiyi temsil edebilir.

Aşağıdaki uygulamada, seçili durumda olan bir giriş çipi gösterilmektedir. Kullanıcı, çipe bastığında çip kapatılı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(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}

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

Avatar ve sondaki simgeyi 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ı sunar. Örneğin, bir yapay zeka sohbet uygulamasında, en son mesaja verilebilecek olası yanıtları sunmak için öneri çiplerini kullanabilirsiniz.

SuggestionChip için şu uygulamayı inceleyin:

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

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

Basit bir öneri çipi.
Şekil 6. Öneri çipi.

Yüksek çip

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

Ek kaynaklar