Chip
구성요소는 입력이나 속성, 작업을 나타내는 대화형 압축 요소입니다.
분석
![](https://developer.android.google.cn/static/wear/images/components/chips-anatomy.png?authuser=2&hl=ko)
A. 기본 라벨
B. 보조 라벨(선택사항)
C. 아이콘(선택사항)
D. 컨테이너
디자인 권장사항
![](https://developer.android.google.cn/static/wear/images/components/chips-image.png?authuser=2&hl=ko)
이미지 칩에는 선택한 이미지와 관련된 작업이 포함됩니다. 이미지 칩은 좀 더 구체적인 디자인과 분위기를 전달하는 데 효과적입니다.
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
![](https://developer.android.google.cn/static/wear/images/components/chip-avatar.png?authuser=2&hl=ko)
선택한 아바타와 관련된 작업에 아바타 칩을 사용합니다. 아바타 칩에는 연락처 ID 사진과 같이 아바타를 더 쉽게 인식되도록 하는 데 사용되는 아이콘도 포함될 수 있습니다. 아바타 아이콘은 32x32dp입니다.
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
관련 구성요소
![](https://developer.android.google.cn/static/wear/images/components/chip-compact.png?authuser=2&hl=ko)
관련 구성요소인 CompactChip은 칩 구성요소의 변형으로, 더 작게 표시되고 공간이 적은 사용 사례에 맞게 설계되었습니다. 압축 칩에는 아이콘용 슬롯과 한 줄 텍스트 라벨용 슬롯이 있습니다. 압축 칩에는 높이가 48dp인 탭 가능 영역이 있습니다.
계층 구조
![](https://developer.android.google.cn/static/wear/images/components/chip-hierarchy.png?authuser=2&hl=ko)
다양한 색상 채우기를 사용하여 칩 계층 구조를 표시합니다. 주요 작업을 위해 눈에 잘 띄는 단일 칩을 포함하도록 각 화면을 설계합니다.
높은 강조페이지의 주요 작업에 높은 강조 칩을 사용합니다. 높은 강조 칩을 채울 때는 기본 색상을 사용하세요.
중간 강조
주요 작업보다 덜 중요한 작업에는 중간 강조 칩을 사용합니다. 중간 강조 칩을 채울 때는 보조 색상을 사용하세요.
또는 맞춤 OutlinedChip 구성요소를 사용합니다. 윤곽선이 있는 칩에는 투명한 배경, 불투명도 60%의 기본 변형 색상 스트로크, 기본 색상 콘텐츠가 있습니다.
낮은 강조
낮은 강조 칩은 투명색 채우기와 텍스트 라벨만 있습니다. 낮은 강조 칩을 사용하여 기본 또는 보조 칩과의 하위 관계를 나타낼 수 있습니다.
크기
![](https://developer.android.google.cn/static/wear/images/components/chip-size1.png?authuser=2&hl=ko)
기본 칩
아이콘: 24dp
높이: 52dp
![](https://developer.android.google.cn/static/wear/images/components/chip-size2.png?authuser=2&hl=ko)
압축 칩
아이콘: 20dp
높이: 32dp
탭 가능 영역: 48dp
사용
설정의 표준 칩과 운동 앱의 이미지 칩과 같은 칩 사용 예를 참고하세요.