[Android, Kotlin] Compose UI 정리(1)

가장 기본적인 것부터 시작하는 jetpack compose

1. layout

1. Column

하위의 뷰들을 수직 정렬해준다(vertical).

// 텍스트 뷰
@Composable
fun Greeting(name: String) {
    Text(text = name)
}

// 뷰를 그리는 곳(미리보기)
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeUITheme {    // 자동으로 생성되는 테마
        Column() {
            Greeting("Hello")
            Greeting("Android")
        }
    }
}

2. Row

하위의 뷰들을 수평 정렬해준다(horizontal).

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeUITheme {    // 자동으로 생성되는 테마
        Row() {
            Text(text = "Hello Android!")
            Text(text = "Content!")
        }
    }
}

3. box

여러 뷰들을 겹쳐서 놓을 수 있는 레이아웃이다.(framelayout과 비슷하다.)

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeUITheme {    // 자동으로 생성되는 테마
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp),
        ) {
            Text(text = "Hello Android!")
            Text(text = "Content!")
        }
    }
}

modifier를 사용해 box의 크기를 조정할 수 있다.

•  fillMaxWidth(): width를 match_parent로 설정한다.
• fillMaxHeight(): height를 match_parent로 설정한다.

위에 두 개 말고도 (원하는 크기.dp)를 사용해 크기를 자유자재로 조절이 가능하다.

아무 스타일도 적용하지 않은 box

 

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeUITheme {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            Row() {
                Text(text = "Hello Android!")
                Text(text = "Content!")
            }
        }
    }
}

• contentAlignment: 뷰들의 위치를 정해줄 수 있다.

contentAlignment와 row를 적용한 box

 

contentAlignment를 box에 쓰면 하위 뷰의 위치를 모두 정해줄 수 있지만, 개별로 위치를 적용하고 싶을 경우에는

text에 modifier를 사용해 해결 가능하다.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeUITheme {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp),
        ) {
            Text(text = "Hello Android!", modifier = Modifier.align(Alignment.TopStart))
            Text(text = "Content!", modifier = Modifier.align(Alignment.BottomEnd))
        }
    }
}

텍스트 2개를 각각 왼쪽 위, 오른쪽 아래에 배치한 모습이다.

• Start: 오른쪽
• Top: 위쪽
• Center: 가운데
• End: 왼쪽
• Bottom: 아래쪽