안드로이드 컴포즈는 새로운 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")
}
}
}
|
