[Compose UI] Modifier (수정자)

Modifier는 다양한 기능을 지원하고 해당 기능으로 Compose의 UI를 변경 및 확장할 수 있다. Modifier에서 지원하는 기능은 아래와 같다. (https://developer.android.com/jetpack/compose/layout)

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

Modifier에서 제공하는 간단한 기능들을 빠르게 살펴볼 수 있도록 정리한다.

Modifier의 함수들의 반환값은 Modifier이다. 따라서 어떤 순서로 함수를 적용하느냐에 따라 다른 효과가 적용되는 Modifier가 생성되므로 순서에 항상 유의해야 한다.

안드로이드 개발자 사이트의 좋은 예시가 있는데, 아래와 같다. 

Column(
    Modifier
        .padding(padding)
        .clickable(onClick = onClick)
)

Column(
    Modifier
    	.clickable(onClick = onClick)
        .padding(padding)
)

padding 과 clickable의 순서가 다른 2개의 Modifier가 존재한다.

첫 번째 Modifier.padding().clickable() 은 클릭이벤트가 적용 이후 padding이 적용되므로, padding 영역은 클릭 이벤트가 발생하지 않는다.

두번째 Modifier.clickable().padding() 은 padding이 추가된 Modifier에 clickable로 이벤트를 추가하기에 padding 영역까지 모두 이벤트가 발생한다.

 

크기 (size)

Modifier.size(width = 400.dp, height = 100.dp)

 

배경 색상 / 모양 변경하기 (background)

background 함수를 이용하여 색상 및 모양을 설정할 수 있다.

/**
 * Draws [shape] with a solid [color] behind the content.
 *
 * @sample androidx.compose.foundation.samples.DrawBackgroundColor
 *
 * @param color color to paint background with
 * @param shape desired shape of the background
 */
fun Modifier.background(
    color: Color,
    shape: Shape = RectangleShape
)

ex)

Modifier.background(MaterialTheme.colors.background)

 

Clip

Modifier.clip(shape: Shape)

Modfier의 clip은 컨텐츠를 모양에 맞게 자른다. 아래 예시에서 처럼 Shape을 지정한다. RoundedCornerShape(50)은 사진 컨텐츠를 정확히 원형으로 자른다.

Image(
    modifier = modifier
        .size(64.dp)
        .padding(8.dp)
        .clip(RoundedCornerShape(50)),
    contentScale = ContentScale.Crop,
    painter = painterResource(dogIcon),
    contentDescription = null
)

원형으로 자를 시 주의할 점은 contentScale = ContentScale.Crop 을 같이 사용하는 것이 좋다. 이유는 사진의 너비와 높이 비율이 동일하지 않기 때문에, clip 시 좌우 또는 상하에 여백이 남을 수 있기 때문에, contentScale로 크기를 맞춰주는 것이 좋다.  ContentScale은 이 글을 참고하자.

[Compose UI] Image (이미지 다루기)

 

 

 

참고

https://developer.android.com/jetpack/compose/layout?hl=ko