안드로이드 컴포즈(Compose) 컬럼 Row Box

Posted on Edited on In , Word count in article: 261 Reading time ≈ 1 mins.

안드로이드 컴포즈는 새로운 UI 만드는 방법

안드로이드 컴포즈(Compose) 는 기존의 xml 로 화면을 만드는 방식 대신
프로그래밍으로 화면을 만드는 방식

Compose 사용

Activity 내에서 setContent 를 사용하면 setContent 안에서는 Compose 를 사용할 수 있습니다

1
2
3
4
5
6
7
8
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DrawContent("Text")
        }
    }
}

Compose 는 대문자 사용

DrawContent 라는 컴포즈를 만들었는데 fun 임에도 @Composable 어노테이션을 사용하면
첫글자를 대문자로 사용하라고 합니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DrawContent("Text")
        }
    }
}

@Composable
fun DrawContent(name: String) {
    Text("$name Hello")
    Text("$name World")
}

Preview 사용

@Preview 어노테이션을 이용해서 컴포즈 단위로 미리보기가 가능합니다
DrawContent 컴포즈가 어떻게 보이는지 TextHelloWorld 미리보기 컴포즈 함수를 만들었습니다

1
2
3
4
5
6
7
8
9
@Preview(showBackground = true)
@Composable
fun TextHelloWorld() {
    RallyTheme {
        Surface {
            DrawContent(name = "Text")
        }
    }
}

Text 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DrawContent("Text")
        }
    }
}

@Composable
fun DrawContent(name: String) {
    Text("$name Hello")
    Text("$name World")
}

@Preview(showBackground = true)
@Composable
fun TextHelloWorld() {
    RallyTheme {
        Surface {
            DrawContent(name = "Text")
        }
    }
}

텍스트는 여러 개가 겹쳐서 출력이 됩니다
컴포즈 Text

해결방법은 Column, Row, Box 중에 하나를 사용해서 배열해줍니다

컴포즈 Text Column Row Box 비교

Column 사용

1
2
3
4
5
6
7
@Composable
fun ColumnDrawContent(name: String) {
    Column {
        Text("$name Hello")
        Text("$name World")
    }
}

Row 사용

1
2
3
4
5
6
7
@Composable
fun RowDrawContent(name: String) {
    Row {
        Text("$name Hello")
        Text("$name World")
    }
}

Box 사용

Box 안에 여러가지 컴포넌트들을 배열하려면 Box 안에 Box 를 사용하는 방식으로
하나하나 배치를 시켜야 합니다

Box 안에 그냥 넣으면 겹쳐서 출력됩니다

1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun BoxDrawContent(name: String) {
    Box (modifier = Modifier.width(150.dp).height(height = 100.dp)){
        Text("$name Hello")
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.BottomEnd,
        ){
            Text("$name World")
        }

    }
}