JetPack Compose 2편 : Row, Column과 기본 크기 지정

영어 강의라 개어렵다...그래도 정리해보장...

일단 코드부터 첨부해 보자

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        //xml은 setContentView
        setContent {
            Row(
                modifier = Modifier
                    .width(200.dp)
                    .fillMaxHeight(0.7f)
                    .background(Color.Green),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("Hello")
                Text("World")
                Text("Hello")
            }
            //Greeting(name = "Phillip")
        }
    }
}

//UI를 함수로!!
//UI를 컴포넌트들로 나눈다.
//뷰가 어떻게 보일지 정의하고 재사용한다.
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

//미리보기용 함수
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
        Greeting("Android")

}

 Row / Column은 “자식 Composable을 어떻게 배치할지 결정하는 Layout Composable” 이다. 약간 xml에서 리니어레이아웃 같은 느낌이 난다. 하나하나 뜯어보자

Row 

• 가로로 추가하고 싶을 때 사용
•  XML에서 LinearLayout의 orientation="horizontal" 과 유사

Column

• 세로로 추가하고 싶을 때 사용
• XML에서 LinearLayout의 orientation="vertical" 과 유사

이제 인자들을 하나씩 살펴보자. Modifier는 잠시 제껴두고 그 다음 것부터 봐 보자.

Arrangement와 Alignment는 정렬해주는 인자들이다.

정렬을 할 때, 반대 방향으로는 Alignment, 같은 방향으로는 Arrangement를 사용한다. 예를 들면, Row에서는 가로 방향이 main axis이므로 horizontalArrangement를 사용하고, 세로 방향 정렬은 verticalAlignment를 사용한다. Col에서는 세로 방향이 main axis이므로 verticalArrangement를 사용하고, 가로 방향 정렬은 horizontalAlignment를 사용한다.

 

Modifier는 “공간” 개념이다. 여기에는 Composable의 크기, 위치, 배경, 여백 등 ‘공간’에 대한 속성을 정의한다.

위 코드에서는 Row의 너비를 200dp로 제한하고, 화면 높이의 70%만 차지하도록 설정한 뒤 배경색을 초록색으로 지정했다.

 

바바이~~