[Android Compose/안드로이드 컴포즈] Layouts (Compose 배우기 -2)

Layouts

• Jetpack Compose를 통해 레이아웃을 더 효율적으로 디자인할 수 있다. 

 

표준 레이아웃 구성요소 (Basics of Composable functions)

Column

@Composable
fun ArtistCard() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}


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

 

Row

@Composable
fun ArtistCard(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(/*...*/)
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}

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

 

Box

@Composable
fun ArtistCard(artist: Artist) {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier.absolutePadding(left = 20.dp, top = 30.dp, right = 20.dp, bottom = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}

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

 

 

 

수정자 (Modify)

• 컴포저블의 크기, 레이아웃, 동작 및 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

@Composable
fun ArtistCard(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(elevation = 4.dp) { /*...*/ }
    }
}