Chip
구성요소는 간단한 대화형 UI 요소입니다. 복잡함을 나타냅니다.
엔터티(예: 연락처, 태그)로 구성되며 아이콘 및 라벨이 있는 경우가 많습니다. 가능
선택 가능, 닫을 수 있음 또는 클릭 가능
네 가지 유형의 칩과 이를 사용할 수 있는 위치는 다음과 같습니다.
- 지원: 작업을 진행하는 동안 사용자를 안내합니다. 종종 임시 UI로 표시됨 요소가 입력될 때 사용됩니다.
- 필터: 사용자가 옵션 모음에서 콘텐츠를 미세 조정할 수 있습니다. 사용자는 할 수 있습니다. 가 선택 또는 선택 해제되며, 선택되면 체크 표시 아이콘이 포함될 수 있습니다.
- 입력: 사용자가 제공한 정보(예: 선택합니다. 아이콘과 텍스트를 포함할 수 있으며 'X'를 제공할 수 있습니다. 삭제해야 합니다.
- 추천: 사용자의 최근 활동을 기반으로 추천을 제공합니다. 합니다. 일반적으로 사용자에게 메시지를 표시하기 위해 입력란 아래에 표시됩니다. 있습니다.
API 노출 영역
4가지 유형의 칩에 상응하는 컴포저블이 4개 있습니다. 이 다음 섹션에서는 이러한 컴포저블과 그 차이점을 자세히 설명합니다. 그러나 다음 매개변수를 공유합니다.
label
: 칩에 표시되는 문자열입니다.icon
: 칩의 시작 부분에 표시되는 아이콘입니다. 일부 특정 컴포저블에는 별도의leadingIcon
와trailingIcon
가 있습니다. 매개변수 값으로 사용됩니다.onClick
: 사용자가 칩을 눌렀을 때 칩에서 호출하는 람다입니다.
지원 칩
AssistChip
컴포저블을 사용하면 간단하게
특정 방향으로 사용자를 조금씩 유도하는 지원 칩이 있습니다. 가장 차별화되는
기능은 왼쪽에 아이콘을 표시할 수 있는 leadingIcon
매개변수입니다.
있습니다. 다음 예는 구현 방법을 보여줍니다.
@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) ) } ) }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![간단한 지원 칩](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-assist.png?authuser=3&hl=ko)
필터 칩
FilterChip
컴포저블을 사용하면 칩이
선택합니다. 다음 예는 선행
사용자가 칩을 선택한 경우에만 체크표시 아이콘을 선택합니다.
@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 }, ) }
선택 해제하면 이 구현이 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![선택 해제된 필터 칩으로, 선택 항목이 없고 계획 배경이 있습니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter.png?authuser=3&hl=ko)
선택하면 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![선택된 필터 칩, 체크표시와 색상 배경입니다.](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=3&hl=ko)
입력 칩
InputChip
컴포저블을 사용하여 다음에서 발생하는 칩을 만들 수 있습니다.
사용자 상호작용입니다. 예를 들어 이메일 클라이언트에서 사용자가
입력 칩은 사용자가 입력한 주소를 가진 사람을 나타낼 수 있습니다.
'to:'에 입력합니다. 필드를 확인합니다.
다음 구현은 이미 입력 칩을 보여줍니다. 선택 상태가 됩니다. 사용자가 칩을 닫으면 닫습니다.
@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) ) }, ) }
이 구현은 다음과 같이 표시됩니다.
![아바타와 후행 아이콘이 있는 입력 칩](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-input.png?authuser=3&hl=ko)
추천 칩
SuggestionChip
컴포저블은 나열된 컴포저블 중 가장 기본적인 컴포저블입니다.
API 정의 및 일반적인 사용 사례를
확인할 수 있습니다 추천
칩은 동적으로 생성된 힌트를 제공합니다. 예를 들어 AI 채팅 앱에서
추천 쿼리 칩을 사용하여 가장 최근의
메시지가 표시됩니다.
다음과 같은 SuggestionChip
구현을 생각해 보세요.
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
이 구현은 다음과 같이 표시됩니다.
![간단한 지원 칩](https://developer.android.google.cn/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=3&hl=ko)
높아진 칩
이 문서의 모든 예에서는 평면을 사용하는 기본 컴포저블을 사용합니다. 있습니다. 상승된 모양이 있는 칩을 원하는 경우 다음 세 가지 컴포저블이 있습니다.