[Android] Compose modifier(수정자)

😶 레이아웃 수정자 (modifier)

수정자는 Compose UI 요소를 장식하거나 이 요소에 동작을 추가하는데 사용된다. 예를 들어,텍스트나 버튼, 레이아웃의 배경, 패딩, 너비와 높이, 동작을 추가할 수 있다. 이를 설정하려면 컴포저블이나 레이아웃에서 수정자를 매개변수로 허용해야 한다.

 

예시)

Text(
    text = from,
    fontSize = 36.sp,
    modifier = Modifier
        .clickable(onClick = onClick)
        .padding(16.dp)
        .background(colorResource(id = R.color.teal_200))
        .align(alignment = Alignment.CenterHorizontally)
)

 

😶 레이아웃 가중치(weight)

하위 요소끼리 차지하는 크기를 가중치 값을 설정할 수 있다. 레이아웃 안의 하위 요소의 Mdifier.weight() 로 각각 가중치를 설정할 수 있다. 다음 예시는 weight 를 사용하여 4분면으로 화면을 분할하는 코드이다.

@Composable
fun TestScreen() {
    Column(modifier = Modifier.fillMaxSize()) {
        Row(modifier = Modifier.weight(1F)){
            BoxItem(modifier = Modifier.weight(1F).background(Color.Magenta), "Magenta")
            BoxItem(modifier = Modifier.weight(1F).background(Color.Gray), "GRAY")
        }
        Row(modifier = Modifier.weight(1F)){
            BoxItem(modifier = Modifier.weight(1F).background(Color.Red), "RED")
            BoxItem(modifier = Modifier.weight(1F).background(Color.Yellow), "YELLOW")
        }
    }
}

@Composable
fun BoxItem(modifier: Modifier, content: String) {
    Box(modifier = modifier.fillMaxSize()) {
        Text(
            content,
            modifier = Modifier.align(Alignment.Center),
            fontSize = 32.sp
        )
    }
}

 

😶 wrapContentSize

최소 너비, 최소 높이 제약 조건을 고려하지 않고 콘텐츠가 들어오는 크기로 측정할 수 있도록 허용하며, unbounded 매개변수가 true 인 경우 최대 폭, 최대 높이 제약 조건도 고려하지 않는다. 

fun Modifier.wrapContentSize(
    align: Alignment = Alignment.Center,
    unbounded: Boolean = false
): Modifier

콘텐츠의 측정된 크기가 최소 크기 제약 조건보다 작은 경우 해당 최소 크기 공간 내에 align 매개변수에 값에 따라 정렬한다. unbounded 가 true 인 경우, 콘텐츠의 측정된 크기가 최대 크기 제약 조건보다 큰 경우 최대 공간 내에 정렬한다.

Box(modifier = Modifier
    .fillMaxSize()
    .wrapContentSize(Alignment.Center)
)

 

😶 verticalScroll

modifier 의 verticalScroll() 메서드로 스크롤이 가능한 UI 를 쉽게 만들 수 있다. rememverScrollState() 를 인자로 주면 현재 스크롤 위치를 기억한다.

Column(
    modifier = Modifier
        .padding(40.dp)
        .verticalScroll(rememberScrollState()),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
){
	/**/
}

 

😶 aspectRatio

콘텐츠의 크기를 지정된 가로 세로 비율과 일치시키도록 할 수 있다.

fun Modifier.aspectRatio(
    ratio: @FloatRange(from = 0.0, fromInclusive = false) Float,
    matchHeightConstraintsFirst: Boolean = false
): Modifier

 

기본 사용 방법은 다음과 같다.

Column{
    Box(
        Modifier
            .width(100.dp)
            .aspectRatio(2f)
            .background(Color.Green))
    Box(
        Modifier
            .height(100.dp)
            .aspectRatio(2f)
            .background(Color.Black))
    Box(
        Modifier
            .width(100.dp)
            .aspectRatio(4f)
            .background(Color.Yellow))
    Box(
        Modifier
            .width(100.dp)
            .aspectRatio(0.5f)
            .background(Color.Blue))
}

 

위와 같은 결과가 나온 이유는 width = height * ratio 을 따르기 때문이다. 첫번째 녹색 박스는 width 가 100 이고 ratio 가 2 이기 때문에 height = 100 / 2 = 50 이 된다. 두번째 검은 박스는 height 가 100 이고 ratio 가 2 이기 때문에 width = 100 * 2 가 된다. 세번쨰 노란 박스 역시 width 가 100 이고 ratio 가 4 이기 때문에 height = 100 / 4 = 25 가 된다. 마지막 파란 박스도 width 가 100 이며 ratio 가 0.5 이기 때문에 height = 100 * 2 = 200 이 된다.

 

 

androidx.compose.foundation.layout  |  Android Developers

 

😶 clip

clip 은 shpe 매개변수대로 컴포저블의 모양을 설정할 수 있다.

fun Modifier.clip(shape: Shape): Modifier

 

 

예를 들어, 원형 모양 이미지를 만들고 싶다면 다음과 같다. RoundedCornerShape(50.dp) 는 원형 모양으로 만들 수 있다.

Image(
    modifier = modifier
        .size(dimensionResource(R.dimen.image_size))
        .padding(dimensionResource(R.dimen.padding_small))
        .clip(RoundedCornerShape(50.dp)),
    painter = painterResource(dogIcon),
    contentScale = ContentScale.Crop,
    contentDescription = null
)

 

Modifier  |  Android Developers

 

 

 

 

 

Compose 수정자  |  Jetpack Compose  |  Android Developers

RowScope  |  Android Developers

Modifier  |  Android Developers