컴포즈 공부 3일차

Row/Column 이용하여 레이아웃 구성

@Composable
fun TextCell(text: String, modifier: Modifier = Modifier) {
    val cellModifier = Modifier
        .padding(4.dp)
        .size(100.dp, 100.dp)
        .border(width = 4.dp, color = Color.Black)

    Text(
        text = text,
        cellModifier.then(modifier),
        fontSize = 70.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center
    )
}

Row, Column을 통한 레이아웃 정렬을 위의 컴포저블을 통해서 확인할 예정이니 먼저 선언해놓는다.

Row

Row 컴포저블은 자식 컴포저블들을 수평 방향으로 나열한다.

@Composable
fun MainScreen() {
    Row {
        TextCell(text = "1")
        TextCell(text = "2")
        TextCell(text = "3")
    }
}

위의 코드처럼 Row로 컴포저블을 나열하면 다음과 같이 자식 컴포저블들이 수평 방향으로 나열되는 것을 확인할 수 있다.

Column

Column 컴포저블은 자식 컴포저블들을 수직 방향으로 나열한다.

@Composable
fun MainScreen() {
    Column {
        TextCell(text = "1")
        TextCell(text = "2")
        TextCell(text = "3")
    }
}

위의 코드처럼 Column로 컴포저블을 나열하면 다음과 같이 자식 컴포저블들이 수직 방향으로 나열되는 것을 확인할 수 있다.

레이아웃 정렬

Row나 Column의 verticalAlignment 또는 horizontalAlignment 의 인자로 정렬 파라미터를 전달하여 레이아웃을 정렬할 수 있다.

Row인 경우

Alignment.Top : Row 영역의 수직 방향 맨 위에 정렬

Alignment.CenterVertically: Row 영역의 수직 방향 가운데 위치에 정렬

Alignment.Bottom : Row 영역의 수직 방향 맨 밑에 정렬

ex)

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.size(width = 400.dp, height = 200.dp)
) {
    TextCell(text = "1")
    TextCell(text = "2")
    TextCell(text = "3")
}

Column인 경우

Alignment.Start : Column 영역의 수평 방향 맨 왼쪽에 정렬

Alignment.CenterHorizontally: Column 영역의 수평 방향 가운데 위치에 정렬

Alignment.End : Column 영역의 수평 방향 맨 오른쪽 정렬

ex)

Column(
    horizontalAlignment = Alignment.End,
    modifier = Modifier.size(width = 200.dp, height = 400.dp)
) {
    TextCell(text = "1")
    TextCell(text = "2")
    TextCell(text = "3")
}

 

레이아웃 배열 위치 조정하기

Arrangement는 자식의 위치를 컨테이너와 동일한 축으로 배열한다.

Row → 수평 방향, Column → 수직 방향

Row인 경우

Arrangement.Start: Row 영역의 수평 방향의 맨 왼쪽으로 배열

Arrangement.Center: Row 영역의 수평 방향의 중앙으로 배열

Arrangement.End: Row 영역의 수평 방향의 맨 오른쪽으로 배열

ex)

Row(
    horizontalArrangement = Arrangement.End,
    modifier = Modifier.size(width = 400.dp, height = 200.dp)
) {
    TextCell("1")
    TextCell("2")
    TextCell("3")
}

Column인 경우

Arrangement.Top: Column 영역의 수직 방향의 맨 위쪽으로 배열

Arrangement.Center: Column 영역의 수직 방향의 중앙으로 배열

Arrangement.Bottom: Column 영역의 수직 방향의 맨 아래쪽으로 배열

ex)

Column(
    modifier = Modifier.height(400.dp),
    verticalArrangement = Arrangement.Bottom
) {
    TextCell("1")
    TextCell("2")
    TextCell("3")
}

레이아웃 배열 간격 조정하기

레이아웃 내의 뷰들의 배열 간격을 조정은 verticalArrangement 또는 horizontalArrangement 파라미터를 통해서 설정할 수 있다.

Arrangement.SpaceEvenly : 자식 뷰들은 동일한 간격을 유지 (첫 자식의 앞, 마지막 자식의 뒤 공간 포함)

Arrangement.SpaceBetween : 자식 뷰들은 동일한 간격을 유지 (첫 자식의 앞, 마지막 자식의 뒤 공간 미포함)

Arrangement.SpaceAround : 자식 뷰들은 동일한 간격을 유지 (첫 자식의 앞, 마지막 자식의 뒤 공간 절반 포함)

 

Box 컴포저블

Box 레이아웃은 자식 뷰들을 스택처럼 화면의 앞쪽으로 쌓는다. 쌓이는 순서는 호출한 순서대로 이다.

Box 정렬은 contentAlignment 파라미터로 설정할 수 있고 정렬되는 위치는 다음과 같다.

 

Alignment.TopStart	Alignment.TopCenter	Alignment.TopEnd
Alignment.CenterStart	Alignment.Center	Alignment.CenterEnd
Alignment.BottomStart	Alignment.BottomCenter	Alignment.BottomEnd

 

BoxScope 모디파이어

BoxScope 모디파이어를 자식 컴포저블에 적용하면 자식 컴포저블을 원하는 위치에 배치할 수 있다.

Box(
    modifier = Modifier.size(width = 500.dp, height = 500.dp)
) {
    Text("Top Start", Modifier.align(Alignment.TopStart))
    Text("Top Center", Modifier.align(Alignment.TopCenter))
    Text("Top Bottom", Modifier.align(Alignment.TopEnd))
    Text("Center Start", Modifier.align(Alignment.CenterStart))
    Text("Center ", Modifier.align(Alignment.Center))
    Text("Center End", Modifier.align(Alignment.CenterEnd))
    Text("Bottom Start", Modifier.align(Alignment.BottomStart))
    Text("Bottom Center", Modifier.align(Alignment.BottomCenter))
    Text("Bottom End", Modifier.align(Alignment.BottomEnd))
}

clip() 모디파이어

clip() 모디파이어를 사용하면 컴포저블을 특정한 형태로 만들 수 있다.

Modifier.clip().padding(). …

Box(
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
        .background(Color.Blue)
)

Box(
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(30.dp))
        .background(Color.Blue)
)

Box(
    modifier = Modifier
        .size(200.dp)
        .clip(CutCornerShape(30.dp))
        .background(Color.Blue)
)