컴포즈에서 chip group은 어떻게 만들지?

MSU·2025년 2월 7일

Android

목록 보기
32/36

프로젝트 중 xml에서 컴포즈로 전환하는 작업을 하고 있는데
아래와 같이 chip을 사용하는 화면이 있었다.
</>

xml에서는 chip을 감쌀 수 있는 chip group을 제공해주고 있지만, 컴포즈에서는 chip group이라는 요소가 따로 없는 것 같았다.

Row나 Column으로 감싸면 되겠지만 보시다시피 chip의 내용물 및 개수에 따라서 가로로 늘어서다가 화면 끝에 도달하면 다음줄로 늘어서는 방식으로 chip이 정렬이 되기 때문에 한 방향으로만 셋팅해주는 Row나 Column을 사용하면 구현이 어려울 것 같았다.

그래서 chip에 따라 동적으로 줄을 내려주는 방법이 있나 찾아보니 FlowRow로 chip을 감싸주면 chip group과 똑같은 역할을 해줄 수 있는 것 같았다!

참고 링크 : https://stackoverflow.com/questions/68979046/how-to-do-multiline-chip-group-in-jetpack-compose

FlowRow를 사용해 작성한 코드

        FlowRow(
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            Interest.entries.forEach {
                ElevatedAssistChip(
                    onClick = {
                       
                    },
                    label = {
                        Text(it.str)
                    }
                )
            }
        }

xml 뷰와 동일하게 구현할 수 있었다!

</>

다만 주의할점은 FlowRow(Column)가 @ExperimentalLayoutApi 이기 때문에 언제든지 사라질 수 있다는 것이다.

FlowRow를 사용하는 방법 외에도 다른 방법으로 chip group처럼 구현할 방법을 찾아봐야겠다.

profile
안드로이드공부

0개의 댓글