Compose - Row, Columns, Box - 레이아웃 기본사항

 

 

++ iOS 하던 사람이라서 계속 둘이 비교하면서 하게 되네요.. 하하 참고해주세요

---

기본 컴포넌트

이렇게 3가지 종류가 있고, SwiftU로 따지면 차례로 Vstack, Hstask, Zstack 같은 녀석들이다.

 

- Modifier에서 색이나 크기 등을 지정할 수 있다.

Column 

예시코드

Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround) {
        Text(text = "Hello")
        Text(text = "World")
        Text(text = "Hello")
        Text(text = "World")
}

 

horizontalAlignment는 SwiftUI에서처럼 이렇게 3종류가 있었는데, End Start라는 이름이 신기방긔..

 

vertivalArrangement의 경우에는 종류가 너무 많았고, 매번 찾아보기 어려울 것 같아서 구글링하는 중 너무 잘 정리해놓은 게 있어서 겟합니다. SwiftUI보다 훨씬 친절하고 종류가 다양한 거 같았어요

https://damon-911.tistory.com/entry/Android-Compose-Layout

 

Row

Column이랑 비슷한 맥락...

    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Green),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.CenterVertically) {
        Text(text = "Hello")
        Text(text = "World")
        Text(text = "Hello")
        Text(text = "World")
    }

https://damon-911.tistory.com/entry/Android-Compose-Layout

 

Box - SwiftUI에서 zstack  같은 거

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Green),
        contentAlignment = Alignment.TopEnd) {
        Text(modifier = Modifier.align(Alignment.Center), text = "Hi")
        Text("Hi2")
        Text("Gaeun")
    }

Size

Row(
        modifier = Modifier
        // 1) .fillMaxSize() 
        // 2) .fillMaxSize(fraction = 0.5f) // 화면의 퍼센트로 채우기
        // 3) .width(400.dp).height(100.dp) 
        // +) .fillMaxHeight 등등 다양하게 있음
            .background(Color.Green),
        horizontalArrangement = Arrangement.SpaceAround,
        verticalAlignment = Alignment.CenterVertically) {
        Text(text = "Hello")
        Text(text = "World")
        Text(text = "Hello")
        Text(text = "World")
    }

 

출처

Compose 레이아웃 기본사항  |  Jetpack Compose  |  Android Developers

 

Android Compose 튜토리얼  |  Jetpack Compose  |  Android Developers

 

[Android] Compose - Layout