Android Jetpack Compose - Column, Row, Box, Compose함수 Naming

Compose 표준 레이아웃 구성요소

기존의 XML방식에서 Linear Layout이나 Frame Layout처럼 레이아웃을 사용해 View객체들을 담아 관리했던 것처럼 Compose에서도 각 객체들을 담을 Container역할을 하는 레이아웃 3가지가 표준으로 제공된다.

레이아웃없이 @Composable객체를 사용해서 화면을 구성할 경우 객체들은 모두 같은 위치에 출력된다. 예를들어 다음과 같이 Text객체를 생성할 경우 레이아웃을 사용하지 않으면 모두 같은 위치에 Text객체가 출력된다.

@Composable
fun test() {
    DefalutTheme {
        Text(text = "This is text 1")
        Text(text = "Visible text 2")
    }
}

이를 관리하기 위해 Coulmn, Row, Box 같은 레이아웃을 사용해 화면을 구성한다. 세가지의 레이아웃 모두 내부 요소의 정렬에 대한 구성을 지원한다.

기본적으로 모든 레이아웃은 ()내부에 레이아웃의 속성을 지정하고 {}블럭 내부에 들어가야할 객체들을 선언해서 사용하는 방식이다.

Column

안드로이드 기기가 대부분 세로로 길쭉하기 때문에 가장 많이 사용하게 되는 레이아웃의 하나인 것 같다.

Column 레이아웃 내부의 객체들을 위에서 아래방향으로 순서대로 출력한다. Vertical Linear Layout과 같이 이해하면 편하다.

@Composable
fun TestColumn() {
	Coulumn() {
        Text(text = "This is text 1")
        Text(text = "Visible text 2")
    }
}

Row

Coulmn과 반대로 내부의 객체들을 가로로 정렬한다.

@Composable
fun TestRow() {
	Row() {
        Text(text = "This is text 1")
        Text(text = "Visible text 2")
    }
}

Box

Frame Layout과 같이 객체들이 겹쳐져 출력되며 , 해당 객체들을 원하는대로 정렬하는게 가능하다.

Box(
	contentAlignment = Alignment.BottomCenter // 하단 중앙을 기준으로 내부요소를 정렬
) {
	Image(painter = painterResource(id = R.drawable.poby), "poby")
	Text(text = "Name: Poby")
}

@Composable 함수 Naming 규칙

@Composable함수는 기존의 함수들과는 다른 방식으로 네이밍 할것을 권장한다.

기본적으로 안드로이드에서 사용되는 함수의 형우 camelCase로 작성하기를 권당하며, 동사로 시작해 행동을 나타내는 방식으로 네이밍했었다.

하지만 @Composable함수는 반대로 동사가 아닌 명사로 네이밍하기를 권장하며 형용사를 사용할 경우 실제 영문법처럼 명사의 앞에 사용하길 권장한다.

또한 camelCase가 아닌 PascalCase를 사용하는 것을 권장한다. 이를 바탕으로 예시를 살펴보면 다음과 같다.

✅ Good Case

// 이 함수는 시각적인 UI요소로 파스칼 케이스로 네이밍 되었으며, 명사이다.
@Composable
fun FancyButton(text: String, onClick: () -> Unit) { ... }

// 보이지 않는 요소로 파스칼 케이스로 네이밍 되었고, 해당 요소를 서술하고 있는 형태가 포함된 명사다.
@Composable
fun BackButtonHandler(onBackPressed: () -> Unit) { ... }

❌Bad Case

// 파스칼 케이스로 작성 안됨.
@Composable
fun fancyButton(text: String, onClick: () -> Unit) { ... }

// 파스칼 케이스지만 동사가 앞에와서 명사형태가 아님.
@Composable
fun RenderFancyButton(text: String, onClick: () -> Unit) { ... }

// 파스칼 케이스도 아니고 명사도 아님!
@Composable
fun drawProfileImage(image: ImageAsset) { ... }