[Android] Compose - Layout

표준 레이아웃

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

 

Column

Column은 여러 항목들을 수직(세로 방향)으로 나열하고 싶을 때 사용합니다.

androidx.compose.foundation.layout  |  Android Developers

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
): Unit

• modifier : Column에 적용할 modifier 설정
• verticalArrangement : 수직 배치(Arrangement) 방식 설정
  • Arrangement.Top : 위쪽 정렬
  • Arrangement.Center : 중앙 정렬
  • Arrangement.Bottom : 아래쪽 정렬
  • Arrangement.SpaceBetween : 컴포넌트들 간의 간격 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간 없음
  • Arrangement.SpaceAround : 컴포넌트들 간의 간격(L) 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간(L/2) 존재
  • Arrangement.SpaceEvenly : 컴포넌트들 간의 간격(L) 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간(L) 존재
• horizontalAlignment : 수평 정렬(Alignment) 방식 설정
  • Alignment.Top : 왼쪽 정렬
  • Alignment.CenterVertically : 중앙 정렬
  • Alignment.Bottom : 오른쪽 정렬
• content : Column 레이아웃 안에 들어갈 내용 설정

 

Row

Row는 여러 항목들을 수평(가로 방향)으로 나열하고 싶을 때 사용합니다.

androidx.compose.foundation.layout  |  Android Developers

@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
): Unit

• modifier : Row에 적용할 modifier 설정
• horizontalArrangement  : 수평 배치(Arrangement) 방식 설정
  • Arrangement.Start : 왼쪽 정렬
  • Arrangement.Center : 중앙 정렬
  • Arrangement.End : 오른쪽 정렬
  • Arrangement.SpaceBetween : 컴포넌트들 간의 간격 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간 없음
  • Arrangement.SpaceAround : 컴포넌트들 간의 간격(L) 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간(L/2) 존재
  • Arrangement.SpaceEvenly : 컴포넌트들 간의 간격(L) 동일 + 양쪽 끝과 컴포넌트 사이의 빈 공간(L) 존재
• verticalAlignment : 수직 정렬(Alignment) 방식 설정
  • Alignment.Top : 위쪽 정렬
  • Alignment.CenterVertically : 중앙 정렬
  • Alignment.Bottom : 아래쪽 정렬
• content : Row 레이아웃 안에 들어갈 내용 설정

 

Box

Box는 여러 항목들을 겹쳐서 나열하고 싶을 때 사용합니다.

androidx.compose.foundation.layout  |  Android Developers

@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
): Unit

• modifier : Box에 적용할 modifier 설정
• contentAlignment : Box 안의 자식 컴포넌트들을 어떻게 정렬할지 설정
• propagateMinConstraints : Box가 자식 컴포넌트들에게 최소 제약 조건을 전파할지 여부 설정
  • true : 자식 컴포넌트들이 Box의 최소 크기 제약 조건에 맞도록 크기가 조정되고 이에 맞춰 Box의 크기가 결정됨
  • false (기본값) : 자식 컴포넌트들이 Box의 최소 크기 제약 조건을 고려하지 않고 자체 크기 제약 조건을 유지하고 이에 맞춰 Box의 크기가 결정됨
• content : Box 레이아웃 안에 들어갈 내용 설정

propagateMinConstraints
true	false

 

반응형 레이아웃

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

 

BoxWithConstraints

BoxWithConstraints는 Box의 기능을 모두 포함하면서 레이아웃의 Constraint에 접근할 수 있도록 만들어진 레이아웃입니다. 

이는 최소 또는 최대 너비 및 높이와 같은 특정 크기 제약 조건에 따라 콘텐츠를 조건부로 수정해야 할 때 유용합니다.

androidx.compose.foundation.layout  |  Android Developers

@Composable
@UiComposable
fun BoxWithConstraints(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable @UiComposable BoxWithConstraintsScope.() -> Unit
): Unit

"maxHeight < 300.dp"일 때에만 Text 출력

 

Slot 기반 레이아웃

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

 

Slot API

Slot은 사용자가 원하는 대로 구성 요소를 채울 수 있도록 UI에 빈 공간을 남겨두는 방법입니다.

Slot API은 Composable 함수의 매개변수 내에서 제네릭 람다 함수 타입(@Composable () -> Unit)으로 표현되는 Slot을 제공하는 패턴입니다.

Slot API를 사용하면 특정 요구 사항에 따라 하위 구성 요소를 동적으로 구성할 수 있으므로 구성 요소의 유연성이 향상됩니다.

@Composable
fun MyCustomComponent(content: @Composable () -> Unit) {
    Column {
        Text(text = "START")
        content() // 사용자 정의 content
        Text(text = "END")
    }
}

@Composable
fun MyApp() {
    MyCustomComponent {
        // 슬롯에 주입할 사용자 정의 content
        Text(text = "Hello World!")
    }
}

 

Scaffold

Scaffold은 Slot API를 사용하는 가장 두드러진 예로, 복잡한 사용자 인터페이스를 구성하기 위한 레이아웃입니다.

Scaffold는 TopAppBar, BottomAppBar, FloatingActionButton 및 Drawer와 같은 상위 Material Component에 대한 Slot을 제공합니다.

androidx.compose.material3  |  Android Developers

Scaffold  |  Jetpack Compose  |  Android Developers

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
): Unit

 

Scaffold 사용 예시

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldExample() {
    var checked by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Scaffold App")
                },
                navigationIcon = {
                    IconButton(onClick = { }) {
                        Image(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = "뒤로 가기"
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Purple80
                )
            )
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = { },
                shape = CircleShape
            ) {
                Image(
                    imageVector = Icons.Filled.Add,
                    contentDescription = "추가"
                )
            }
        }
    ) {
        Surface(modifier = Modifier.padding(it)) {
            CheckBoxWithContent(
                checked = checked,
                toggleState = {
                    checked = !checked
                }
            ) {
                Text(text = "Compose 공부하기")
            }
        }
    }
}