[Android] ComposeUI 알아보기

ComposeUI란?

ComposeUI는 jetpack의 일종으로 UI를 쉽고 편하게 만들수 있도록 도와주는 방식으로 구성된다.
흔히 개발을 할때, UI부분은 XML로 레이아웃과 뷰들을 만들어서 배치하고 id를 바인딩하여 이벤트를 사용하는 방식으로 사용되었다. 이전의 방식과는 다르게 선언형 프로그래밍 방식으로 UI를 그릴 수 있게 된다. 이전에는 액티비티에서 UI를 바인딩으로 컨트롤하였기 때문에 불필요한 코드도 많아지고 수정해야할일이 생기면 액티비티도 바꿔줘야하고 XML파일도 수정을 해줘야 했기에 생산적이지 않았는데, 이걸 해결해줄 방식인 Compose가 등장한 것이다.

기본적으로 kotlin으로 제작이 되었기에 코틀린 특징인 선언형으로 ui를 만든다. 선언형 프로그래밍으로 UI를 만든다고 하면 감이 오지 않기때문에 예시를 보면서 이해해보자.

@Composable
fun Greeting() {
    Text(text = "Hello world!")
}

hello world를 출력하는 기본적인 텍스트뷰이다. 따로 xml에 텍스트뷰를 만들어서 설정하고 바인딩해서 가져올 필요없이 바로 mainactivity에 저렇게 작성하면 hello world라는 텍스트뷰가 생성되는 것이다.

Compose의 각종 기능

위에서 설명한 textview외에도 xml에서 레이아웃을 구성할때 쓰던 것들을 대부분 구현할 수 있다.

modifier

이 modifier는 compose에서 아주 중요한 역할을 한다. 어떤 기능을 사용하던 그 기능의 background나 사이즈 등 중요한 설정값들을 modifier를 통해서 사용할 수 있게된다. 아래에서 타기능들을 사용하며 쓰이는 modifier를 보면서 직접 익혀보는것이 이해에 더 도움이 될 것 같다.

column

@Composable
fun ShapeContainer() {
    Column(
        modifier = Modifier
             // modifier 선언후 background와 size를 조정한다.
            .background(Color.White)
            .fillMaxSize(),
        // 개체간의 간격을 조정
        verticalArrangement = Arrangement.SpaceEvenly,
        // 개체들의 위치 조정
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        DummyBox(modifier = Modifier
            .clip(RectangleShape)
        )
        DummyBox(modifier = Modifier
            .clip(CircleShape)
        )
        DummyBox(modifier = Modifier
            .clip(RoundedCornerShape(10.dp))
        )
        DummyBox(modifier = Modifier
            .clip(CutCornerShape(10.dp))
        )
        DummyBox(modifier = Modifier
            .clip(TriangleShape())
        )
    }
}

Column은 익히 알던 행렬의 열이 맞다. 이렇게 Column 안에 도형 5개를 넣어놓은 상태에서 디바이스를 실행시키면 어떤 화면이 나올까

다음과 같이 Column=열 이기때문에 열처럼 도형이 배열되서 나온다.

Row

@Composable
fun ShapeContainer() {
    Row(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        DummyBox(modifier = Modifier
            .clip(RectangleShape)
        )
        DummyBox(modifier = Modifier
            .clip(CircleShape)
        )
        DummyBox(modifier = Modifier
            .clip(RoundedCornerShape(10.dp))
        )
        DummyBox(modifier = Modifier
            .clip(CutCornerShape(10.dp))
        )
        DummyBox(modifier = Modifier
            .clip(TriangleShape())
        )
    }
}

이번엔 Row다 행렬이 Row-Column이기에 Row는 행이다. 위에서 Column을 설명했기때문에
어떤식으로 나올지는 벌써부터 예상이 간다.

이외 다른 기능들

위에서 언급한 row, column이 가장 주로 사용되는 기능들이고 그 외에도 Box, BoxwithConstraint, shape, text, Button, checkbox, snackbar, textfield 등 유용한 기능들이 많이 존재한다.

모두 xml방식의 레이아웃 설계에서 많이 봐오던 이름들이고 사용하는데 크게 어려움이 없을 것이다. 오늘은 컴포즈에 대한 간단한 설명과 주요기능에 대한 정리를 해보았고, 다음 글에서 추가적인 기능들에 대해 정리를 해볼 생각이다.