Row, Column 레이아웃

Row, Column의 크기는 모디파이어를 이용해 조절할 수 있다.

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

레이아웃 정렬

• Row, Column 컴포저블은 기본적으로 내부의 자식 요소 그룹들을 콘텐츠 영역의 가장 왼쪽 위 모서리를 기준으로 정렬한다.
• 한 화면에 여러개의 Row, Column 컴포저블이 존재한다면 여러 컴포저블의 모디파이어들에 따라 배치가 달라진다.
• Row의 수직 방향 정렬 파라미터로 전달할 수 있는 값은 다음과 같다.
  • Alignment.Top: 콘텐츠를 Row 영역의 수직 방향 위 위치에 정렬한다.
  • Alignment.CenterVertically: 콘텐츠를 Row 영역의 수직 방향 가운데 위치에 정렬한다.
  • Alignment.Bottom: 콘텐츠를 Row 영역의 수직 방향 아래 위치에 정렬한다.
• Column 컴포저블을 이용할 때는 horizontalAlignment 파라미터를 이용하여 수평축 방향의 정렬을 설정할 수 있다. 전달할 수 있는 값은 다음과 같다.
  • Alignment.Start: 영역의 수평 방향 시작 위치에 정렬한다.
  • Alignment.CenterHorizontally: 수평 방향 가운데 위치에 정렬한다.
  • Alignment.End: 영역의 수평 방향 끝 위치에 정렬한다.

레이아웃 배열

• Row 컴포넌트에서 이용할 수 있는 horizontalArrangement 파라미터이다.
  • Arrangement.Start: Row 콘텐츠 영역의 수평 방향 시작 위치에 정렬한다.
  • Arrangement.Center: Row 콘텐츠 영역의 수평 방향 가운데 위치에 정렬한다.
  • Arrangement.End: Row 콘텐츠 영역의 수평 방향 끝 위치에 정렬한다.
• Column 컴포저블에서 이용할 수 있는 verticalArrangement 파라미터이다.
  • Arrangement.Top: Column 콘텐츠 영역의 수직 방향 위 위치에 정렬한다.
  • Arrangement.Center: Column 콘텐츠 영역의 수직 방향 가운데 위치에 정렬한다.
  • Arrangement.Bottom: Column 콘텐츠 영역의 수직 방향 아래 위치에 정렬한다.

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

• horizontalArrangement, verticalArrangement 파라미터를 이용해 정의할 수 있으며 다음 값 중 하나를 이용해야 한다.
  • Arrangement.SpaceEvenly: 자식들은 균일한 간격을 유지한다. 첫 번째 자식의 앞, 마지막 자식의 뒤 공간을 포함한다.
  • Arrangement.SpaceBetween: 자식들은 균일한 간격을 유지한다. 첫 번째 자식의 앞, 마지막 자식의 뒤 공간을 포함하지 않는다.
  • Arrangement.SpaceAround: 자식들은 균일한 간격을 유지한다. 첫 번째 자식의 앞, 마지막 자식의 뒤 공간은 각 자식들 사이 공간의 절반이다.

Row, Column 스코프 모디파이어

• Row, Column의 자식들은 부모의 스코프 안에 있다고 말한다.
• 각각의 스코프는 추가 모디파이어 함수들을 제공하며, 이를 이용해 Row 또는 Column 안에 포함된 각 자식들의 동작이나 형태를 변경할 수 있다.

@Composable
fun DemoScreen() {
    Row(modifier = Modifier.height(300.dp)) {
        TextCell("1", Modifier.align(Alignment.Top))
        TextCell("2", Modifier.align(Alignment.CenterVertically))
        TextCell("3", Modifier.align(Alignment.Bottom))
    }
}

@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,
        cellModifier.then(modifier),
        fontWeight = FontWeight.Bold,
        fontSize = 70.sp,
        textAlign = TextAlign.Center
    )
}

@Preview
@Composable
fun textPreview() {
    DemoScreen()
}

베이스라인 정렬

• 베이스라인 정렬은 글꼴 크기가 다른 텍스트 콘텐츠들을 정렬할 때 유용하다.

@Composable
fun DemoScreen() {
    Row() {
        Text(
            "Large Text",
            Modifier.alignByBaseline(),
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold
        )

        Text(
            "Small Text",
            Modifier.alignByBaseline(),
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Preview
@Composable
fun preview() {
    DemoScreen()
}

• 여러 줄의 텍스트를 다룰 때는 LastBaseline을 alignBy() 모디파이어 함수에 전달하면 형제 컴포넌트들을 마지막 텍스트의 베이스라인에 맞춰 정렬할 수 있다.

@Composable
fun DemoScreen() {
    Row() {
        Text(
            "Large Text\nMore Text",
            Modifier.alignBy(LastBaseline),
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold
        )

        Text(
            "Small Text",
            Modifier.alignByBaseline(),
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Preview
@Composable
fun preview() {
    DemoScreen()
}

• 위의 코드에서 alignBy()의 파라미터로 FirstBaseline을 이용하면 작은 텍스트 컴포저블의 베이스라인을 멀티라인 컴포넌트의 첫 번째 행의 베이스라인에 맞춰 정렬한다.
• 위의 코드에서 추가로 작은 텍스트 정렬에 오프셋을 적용할 때는 paddingFrom() 모디파이어를 사용할 수 있다.

@Composable
fun DemoScreen() {
    Row() {
        Text(
            "Large Text\nMore Text",
            Modifier.alignBy(LastBaseline),
            fontSize = 40.sp,
            fontWeight = FontWeight.Bold
        )

        Text(
            "Small Text",
            Modifier.paddingFrom(
            	alignmentLine = FirstBaseline,
                before = 80.dp, after = 0.dp
            ),
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

@Preview
@Composable
fun preview() {
    DemoScreen()
}

스코프 모디파이어 가중치

• RowScope 가중치 모디파이어를 이용하면 각 자식의 폭을 그 형제들을 기준으로 상대적으로 지정할 수 있다. 각 자식에게 가중치 비율(0.0에서 1.0)을 할당한다.

@Composable
fun DemoScreen() {
    Row() {
        TextCell("1", Modifier.weight(weight = 0.2f, fill = true))
        TextCell("2", Modifier.weight(weight = 0.4f, fill = true))
        TextCell("3", Modifier.weight(weight = 0.3f, fill = true))
    }
}

@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,
        cellModifier.then(modifier),
        fontSize = 70.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center
    )
}

@Preview
@Composable
fun preview() {
    DemoScreen()
}