Chip
bileşeni, küçük ve etkileşimli bir kullanıcı arayüzü öğesidir. Karmaşık
genellikle bir simge ve etiket içeren kişi veya etiket gibi öğeler. Bu,
kontrol edilebilir, kapatılabilir veya tıklanabilir.
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 geçici kullanıcı arayüzü olarak görünür öğesine dönüşür.
- Filtrele: Kullanıcıların bir dizi seçenek arasından içeriği hassaslaştırmasına olanak tanır. Şunları yapabilirler: seçilebilir veya seçimi kaldırılabilir ve seçildiğinde bir onay işareti simgesi bulunabilir.
- Giriş: Kullanıcı tarafından sağlanan bilgileri (ör. bir tıklayın. Bunlar, simge ve metin içerip "X" işareti içerebilir gerekir.
- Ö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.
API yüzeyi
Dört çip türüne karşılık gelen dört composable 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. Bununla birlikte, bunlar aşağıdaki parametreleri paylaşır:
label
: Çipte görünen dize.icon
: Çipin başında gösterilen simge. Bazı belirli composable'ların ayrı birleadingIcon
vetrailingIcon
'sı var parametresinden sonra bir değer girin.onClick
: Kullanıcı bastığında çipin çağırdığı lambda.
Destek ç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) ) } ) }
Bu uygulama aşağıdaki gibi görünür.
![Basit bir yardım çipi.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?authuser=6&hl=tr)
Filtre çipi
FilterChip
composable, çipin bulunup bulunmadığını takip etmenizi gerektirir
seçili olduğundan emin olun. Aşağıdaki örnekte, başarılı bir reklamı nasıl gösterebileceğiniz
"işaretli" simgesi yalnızca kullanıcı çipi seçtiğinde:
@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 }, ) }
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.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?authuser=6&hl=tr)
Ayrıca seçildiğinde aşağıdaki gibi görünür:
![Onay işareti ve renkli arka plan içeren filtre çipi.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=6&hl=tr)
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, zaten durumu belirtir. 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) ) }, ) }
Bu uygulama aşağıdaki gibi görünür.
![Avatar ve altındaki simge içeren bir giriş çipi.](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?authuser=6&hl=tr)
Öneri çipi
SuggestionChip
composable, listelenen composable'lar arasında en temel olanıdır
API tanımında ve yaygın kullanım alanlarında bu sayfada bulabilirsiniz. Öneri
çipler, dinamik olarak oluşturulan ipuçlarını sunar. Örneğin, yapay zeka destekli bir sohbet uygulamasında
en yakın tarihli sorulara olası yanıtları sunmak için öneri çiplerini kullanabilir.
mesajını alırsınız.
Şu SuggestionChip
uygulamasını düşünün:
@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 yardım çipi.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=6&hl=tr)
Yükseltilmiş çip
Bu dokümandaki tüm örneklerde düz bir görünüm. Yükseltilmiş bir çip istiyorsanız şu üç composable: