Çip

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

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

  • Yardım: Bir görev sırasında kullanıcıya yol gösterir. 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. Bunlar seçilebilir veya seçimi kaldırılabilir ve seçildiğinde onay işareti simgesi içerebilir.
  • Giriş: Kullanıcı tarafından sağlanan bilgileri (ör. menüdeki seçimler) temsil eder. Simge ve metin içerebilirler ve kaldırma için X simgesi sunarlar.
  • Öneri: Kullanıcının son etkinliğine veya girişine göre öneriler sunar. Genellikle bir giriş alanının altında görünerek kullanıcı işlemlerini ister.
Dört çip bileşeninin her birine ait, benzersiz özelliklerinin vurgulandığı bir örnek.
1. Şekil. Dört çip bileşeni.

API yüzeyi

Dört tür çipe 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 parametreler her ikisinde de bulunur:

  • label: Çipte görünen dize.
  • icon: Çipin başında gösterilen simge. Bazı composable'larda 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 yardım çipleri oluşturmak için basit bir yol sunar. Bu işlevin ayırt edici özelliklerinden biri, çipin sol tarafında bir simge görüntülemenize 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(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

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

Önde gelen 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 izlemenizi gerektirir. Aşağıdaki örnekte, yalnızca kullanıcı çipi seçtiğinde nasıl önde gelen bir işaretli simge 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:

Seçilmemiş bir filtre çipi, onay işareti yok ve düz bir arka plan.
3. şekil. Filtre çipinin seçimi kaldırıldı.

Seçildiğinde ise aşağıdaki gibi görünür:

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

Giriş çipi

Kullanıcı etkileşiminden kaynaklanan ç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 "Alıcı:" alanına eklediği bir kişiyi temsil edebilir.

Aşağıdaki uygulama, zaten seçili durumda olan bir giriş çipini gösterir. 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(
                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 sondaki simge içeren bir giriş çipi.
5. şekil. 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şturulmuş ipuçları sunar. Örneğin, bir yapay zeka sohbet uygulamasında, en son mesaja olası yanıtları sunmak için öneri çipleri kullanabilirsiniz.

SuggestionChip için aşağıdaki uygulamayı 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 öneri çipi.
6.şekil Öneri çipi.

Yükseltilmiş çip

Bu belgedeki tüm örneklerde, düz bir görünüm sağlayan temel composable'lar kullanılır. Görünümü yükseltilmiş bir çip istiyorsanız aşağıdaki üç composable'dan birini kullanın:

Ek kaynaklar