Jetpack Compose(4) - 수정자(Modifier)

이 글은 JetpackCompose 공식문서 - 수정자를 읽어보면서 정리한 글 입니다.

수정자를 사용하면 Composable을 장식하거나 강화할 수 있습니다.

Compose에서는 Modifier를 통해 Composable(UI)의 속성을 정할 수 있습니다. 이번 글에서는 Compose의 수정자(Modifier)에 대해 알아보도록 하겠습니다🔭.

Modifier의 역할

Compose에서 Modifier는 다음과 같은 역할을 합니다.

• Composable의 크기, 레이아웃, 동작, 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 클릭, 스크롤, 드래그, 확대/축소등 높은 수준의 상호작용 추가

모든 Composable함수에는 Modifier를 추가할 수 있습니다.

수정자의 순서가 중요

Modifier함수는 호출하는 순서에 따라 결과가 달라질 수 있습니다.

Column(
     Modifier
         .clickable(onClick = onClick) // clickable을 먼저 호출했습니다.
         .padding(padding)
         .fillMaxWidth()
) {
        // rest of the implementation
}

Column(
     Modifier
         .padding(padding)// padding을 먼저 호출했습니다.
         .clickable(onClick = onClick)
         .fillMaxWidth()
) {
        // rest of the implementation
}

clickable을 먼저 호출한 Column은 padding을 적용한 공간까지 click효과가 나타나지만, padding을 먼저 호출한 Column은 padding을 적용한 공간에는 click효과가 나타나지 않습니다.

내장 수정자

Compose는 Composable을 수정하기위해 Modifier함수들을 제공합니다. 다음 제시되는 수정자는 Modifier함수의 대표적인 수정자들 입니다.

페딩 및 크기

• size - 기본적으로 Compose에서 제공하는 레이아웃은 하위요소의 크기에 맞춰집니다(WrapContentSize). 하지만, size 수정자를 사용하여 크기를 임의로 정할 수 있습니다.

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

• requiredSize - 제약 조건을 무시하고 크기를 정할 때 사용합니다.

   modifier = Modifier.requiredSize(150.dp)

  이렇게 하면 상위요소의 크기가 100dp라고 하더라도 150dp가 됩니다.
  

• fillMax - 높이를 가득 채우려면 fillMaxHeight(), 넓이를 가득채우려면 fillMaxWidth(), 둘 다 가득채우려면 fillMaxSize()를 사용합니다.

• padding - 주위에 padding을 추가합니다. 레이아웃 상/하단에서 텍스트 기준선(Text의 밑부분 선)위에 padding을 추가하려면 paddingFromBaseline를 사용합니다.

오프셋

원래 위치를 기준으로 레이아웃을 배치할 때 오프셋을 사용하여 배치합니다. 오프셋은 x,y축에 설정할 수 있으며, 양수 혹은 음수일 수 있습니다.

Compose의 타입 안정성

Compose는 맞춤 범위를 통해 이 유형 안전성을 적용합니다. 예를 들어 matchParentSize는 BoxScope에서만 사용할 수 있습니다. 따라서 하위 요소가 Box 내에서 사용될 때만 사용할 수 있습니다.

Box의 matchParentSize

Box범위 내에서만 사용할 수 있는 matchParentSize는 상위 요소의 크기에 영향을 안주는선에서 가장 큰 사이즈로 만들어줍니다.

만약 fillMaxSize를 사용한다면 가능한 가장 큰 사이즈로 만들 것이기 때문에 상위 요소에 영향을 주게 됩니다.

행 및 열의 가중치

RowScope 및 ColumnScope에서는 weight수정자를 사용하여 가중치를 설정할 수 있습니다. 컨텐츠의 크기에 맞춰 정해지는것에 비해, 가중치를 정해 크기를 정하는것은 더욱 유연하게 크기를 정할 수 있습니다.

Row(
   modifier = Modifier.fillMaxWidth()
) {
    Image(
        /*...*/
        modifier = Modifier.weight(2f)
    )
    Column(
        modifier = Modifier.weight(1f)
    ) {
        /*...*/
    }
}

이렇게 해서 Compose의 수정자(Modifier)에 대해 알아보았습니다. Modifier를 잘 다룰 수 있다면 Compose에서 레이아웃을 만들 때 더욱 편하게 만들 수 있을것 같습니다. 다음 글에서는 Compose의 부수효과에 대해 알아보도록 하겠습니다. 끝까지 읽어주셔서 감사하고 즐거운 개발 되세요😌.