분류된 버튼

분할 버튼을 사용하면 사용자가 여러 옵션 중에서 나란히 선택할 수 있습니다. 세그먼트 버튼에는 두 가지 유형이 있습니다.

• 단일 선택 버튼: 사용자가 하나의 옵션을 선택할 수 있습니다.
• 다중 선택 버튼: 사용자가 2~5개의 항목 중에서 선택할 수 있습니다. 선택사항이 더 복잡하거나 항목이 5개를 초과하는 경우 칩을 사용하세요.

그림 1. 단일 선택 버튼 (1)과 다중 선택 버튼 (2)

API 노출 영역

SingleChoiceSegmentedButtonRow 및 MultiChoiceSegmentedButtonRow 레이아웃을 사용하여 분할된 버튼을 만듭니다. 이러한 레이아웃은 SegmentedButton가 올바르게 배치되고 크기가 조절되도록 하며 다음과 같은 주요 매개변수를 공유합니다.

• space: 버튼 간의 겹침을 조정합니다.
• content: 세그먼트화된 버튼 행의 콘텐츠를 포함하며 일반적으로 SegmentedButton의 시퀀스입니다.

단일 선택 세그먼트 버튼 만들기

이 예에서는 단일 선택 세그먼트 버튼을 만드는 방법을 보여줍니다.

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

코드 관련 핵심 사항

• remember 및 mutableIntStateOf를 사용하여 selectedIndex 변수를 초기화하여 현재 선택된 버튼 색인을 추적합니다.
• 버튼 라벨을 나타내는 options 목록을 정의합니다.
• SingleChoiceSegmentedButtonRow는 버튼을 하나만 선택할 수 있도록 합니다.
• forEachIndexed 루프 내에서 각 옵션의 SegmentedButton를 만듭니다.
  • shape는 색인을 기준으로 버튼의 모양을 정의하고 SegmentedButtonDefaults.itemShape를 사용하여 옵션의 총 개수를 정의합니다.
  • onClick는 클릭된 버튼의 색인으로 selectedIndex를 업데이트합니다.
  • selected는 selectedIndex를 기반으로 버튼의 선택 상태를 설정합니다.
  • label는 Text 컴포저블을 사용하여 버튼 라벨을 표시합니다.

결과

그림 2. 하나의 옵션이 선택된 단일 선택 버튼

다중 선택 세그먼트 버튼 만들기

이 예에서는 사용자가 여러 옵션을 선택할 수 있는 아이콘이 있는 객관식 분할 버튼을 만드는 방법을 보여줍니다.

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

코드 관련 핵심 사항

• 이 코드는 remember 및 mutableStateListOf를 사용하여 selectedOptions 변수를 초기화합니다. 이렇게 하면 각 버튼의 선택된 상태가 추적됩니다.
• 이 코드는 MultiChoiceSegmentedButtonRow를 사용하여 버튼을 포함합니다.
• forEachIndexed 루프 내에서 코드는 각 옵션에 대해 SegmentedButton를 만듭니다.
  • shape는 색인과 옵션의 총 개수를 기반으로 버튼의 도형을 정의합니다.
  • checked는 selectedOptions의 해당 값을 기반으로 버튼의 선택 상태를 설정합니다.
  • onCheckedChange는 버튼을 클릭할 때 selectedOptions에서 상응하는 항목의 선택 상태를 전환합니다.
  • icon는 SegmentedButtonDefaults.Icon 및 버튼의 선택 상태를 기반으로 아이콘을 표시합니다.
  • label는 적절한 이미지 벡터와 콘텐츠 설명이 포함된 Icon 컴포저블을 사용하여 라벨에 해당하는 아이콘을 표시합니다.

결과

그림 2. 두 가지 옵션이 선택된 다중 선택 세그먼트 버튼

추가 리소스

• 자료 3: 분류된 버튼