[Android].ch1-2.기본 Layout

[Android] Ch1-2. 기본 Layout

1. 기본 Layout 개요

1) 기본 형식

@Composable
fun LayoutExample() {
    Column {  // 수직(세로) 배치
        // 자식 요소들을 세로로 나열
    }
    Row {  // 수평(가로) 배치
        // 자식 요소들을 가로로 나열
    }
    Box {  // 중첩 배치 (Z-축)
        // 자식 요소들을 겹쳐서 배치
    }
}

• 하위 Composable 객체들의 위치와 배치를 결정하는 컨테이너 역할을 수행합니다.
• Jetpack Compose의 화면 설계는 크게 Column(세로), Row(가로), Box(겹침) 세 가지로 이루어집니다.

---

2. 주요 구성 및 속성

1) Column (세로 배치)

자식 컴포넌트들을 위에서 아래로 수직 방향 배열합니다.

• verticalArrangement: 세로 방향의 여백 및 정렬 방식을 지정합니다.
  • Arrangement.Top: 최상단 정렬
  • Arrangement.Center: 수직 중앙 정렬
  • Arrangement.Bottom: 최하단 정렬
  • Arrangement.SpaceBetween: 컴포넌트 사이의 간격을 동일하게 분배
  • Arrangement.SpaceEvenly: 양끝 및 컴포넌트 사이의 모든 간격을 동일하게 분배
  • Arrangement.SpaceAround: 각 컴포넌트 주변부의 간격을 균등 분배
• horizontalAlignment: 가로(교차 축) 방향의 정렬을 지정합니다.
  • Alignment.Start: 좌측 정렬
  • Alignment.CenterHorizontally: 수평 중앙 정렬
  • Alignment.End: 우측 정렬

2) Row (가로 배치)

자식 컴포넌트들을 왼쪽에서 오른쪽으로 수평 방향 배열합니다.

• horizontalArrangement: 가로 방향의 여백 및 정렬 방식을 지정합니다.
  • Arrangement.Start: 좌측 정렬
  • Arrangement.Center: 수평 중앙 정렬
  • Arrangement.End: 우측 정렬
  • Arrangement.SpaceBetween: 컴포넌트 사이 간격 균등 분배
  • Arrangement.SpaceEvenly: 레이아웃 내 모든 공간 균등 분배
  • Arrangement.SpaceAround: 각 요소 주변 공간 균등 분배
• verticalAlignment: 세로(교차 축) 방향의 정렬을 지정합니다.
  • Alignment.Top: 상단 정렬
  • Alignment.CenterVertically: 수직 중앙 정렬
  • Alignment.Bottom: 하단 정렬

3) Box (겹쳐서 배치)

자식 컴포넌트들을 Z-dimension 상에 중첩하여 겹치게 배치합니다.

• contentAlignment: 내부 요소의 상대적 위치 정렬을 지정합니다.
  • Alignment.TopStart: 좌측 상단
  • Alignment.TopCenter: 중앙 상단
  • Alignment.TopEnd: 우측 상단
  • Alignment.CenterStart: 좌측 중앙
  • Alignment.Center: 정중앙
  • Alignment.CenterEnd: 우측 중앙
  • Alignment.BottomStart: 좌측 하단
  • Alignment.BottomCenter: 중앙 하단
  • Alignment.BottomEnd: 우측 하단
• Z-order 특성: 코드 상 늦게 선언된 컴포넌트일수록 최상단(사용자 시점 기준 제일 앞부분)에 렌더링됩니다.

---

3. 구현 예시

1) Column (세로 배치)

@Composable
fun VerticalLayout() {
    Column(
        modifier = Modifier.fillMaxSize(),  // 가용한 최대 크기 점유
        verticalArrangement = Arrangement.Center,  // 세로 정중앙 배치
        horizontalAlignment = Alignment.CenterHorizontally  // 가로 정중앙 배치
    ) {
        Text("첫 번째 요소")
        Text("두 번째 요소")
        Text("세 번째 요소")
    }
}

2) Row (가로 배치)

@Composable
fun HorizontalLayout() {
    Row(
        modifier = Modifier.fillMaxWidth(),  // 가로폭 최대 점유
        horizontalArrangement = Arrangement.SpaceEvenly,  // 요소 간 여백 균등 분배
        verticalAlignment = Alignment.CenterVertically  // 세로축 기준 중앙 정렬
    ) {
        Text("좌측")
        Text("중앙")
        Text("우측")
    }
}

3) Box (겹침 배치)

@Composable
fun OverlayLayout() {
    Box(
        modifier = Modifier.size(200.dp),  // 고정 크기 지정
        contentAlignment = Alignment.Center  // 하위 객체를 정중앙으로 그룹핑
    ) {
        Text("배경", fontSize = 50.sp)  // 제일 하단에 위치
        Text("전경", color = Color.Red)  // 위로 겹쳐서 표출
    }
}

4) 중첩 레이아웃 (실무 응용 패턴)

기본 레이아웃 3종을 조합하여 복잡한 화면 구성을 구현합니다.

@Composable
fun ComplexLayout() {
    Column {  // 최상위 컨테이너는 Column으로 세로 분할 지정
        Row {  // 첫 번째 영역은 수평 아이템 컨테이너
            Text("항목 1")
            Text("항목 2")
        }
        Box {  // 두 번째 영역은 중첩 아이템 컨테이너
            Text("배경항목")
            Text("오버레이 항목") // 배경항목 위에 겹쳐서 나타납니다
        }
    }
}