Compose radio button - size, padding 변경

라디오 버튼

라디오 버튼은 사용자가 여러 옵션 중 하나를 선택할 수 있게 하는 UI 중 하나 이다.

옵션들이 직관적으로 나타나기 때문에 사용자가 옵션을 간편하게 선택 가능하지만

선택할 옵션이 많은 경우에는 그만큼 공간을 많이 차지하기 때문에 적합하지 않을 수 있다.

그림1. Radio Button

라디오 버튼 구현

먼저 변수 부분을 살펴보면 

items는 라디오 버튼의 항목들이며 selectedItem은 라디오 버튼 선택 시 옵션을 저장할 변수이다.

다음으로 RadioButton 부분을 보면 items를 forEach문을 사용하여 각 Row를 추가해주었다.

여기서 텍스트를 나타내기 위해 Text 컴포저블이 아닌 ClickableText 컴포저블을 사용하였는데

이는 텍스트를 클릭하였을 때도 옵션이 선택되도록 하기 위함이다.

@Composable
fun Main(innerPadding: PaddingValues) {
    val items = listOf("Option 1", "Option 2", "Option 3")
    var selectedItem by remember { mutableStateOf("Option") }

    Column(
        modifier = Modifier
            .padding(innerPadding)
            .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = selectedItem, fontSize = 28.sp)
        Spacer(modifier = Modifier.height(18.dp))
        items.forEach { item ->
            Row(verticalAlignment = Alignment.CenterVertically) {
                RadioButton(
                    selected = (item == selectedItem),
                    onClick = { selectedItem = item },
                    modifier = Modifier
                        .scale(.8f)
                        .size(40.dp)
                        .padding(0.dp)
                )
                ClickableText(text = AnnotatedString(item),
                    modifier = Modifier.padding(end = 4.dp),
                    style = TextStyle(fontSize = 18.sp),
                    onClick = { selectedItem = item })
            }
        }
    }
}

그림2. 실행 화면

추가적으로 RadioButton modifier 부분을 보면 scale과 size를 적용해주는 것을 볼 수 있다.

여기서 scale은 라디오 버튼의 크기를 조절하는데 사용하며

size를 사용하여 라디오 버튼과 텍스트 간 간격(padding)을 조절할 수 있다.

참고

전체 코드 | Github