[Android] Compose - Modifier와 Surface

Modifier

Modifier는 UI 구성요소들을 꾸미거나 행동을 추가하기 위한 요소들의 모음입니다.

Modifier를 사용하면 다음과 같은 종류의 작업을 실행할 수 있습니다.

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

Compose 수정자  |  Jetpack Compose  |  Android Developers

// 예시
val modifier = Modifier
    .clickable(onClick = {})
    .size(200.dp)
    .padding(20.dp)
    .background(Color.Red)

• .width(x.dp) : 너비 설정
• .height(y.dp) : 높이 설정
• .size(width = x.dp, height = y.dp) : 너비와 높이 설정 (하나의 값만 넣으면 모두 해당 값으로 설정됨)
• .fillMaxWidth(0.xf) : 너비를 채우는 비율 설정 (0~1 사이의 값으로 설정)
• .fillMaxHeight(0.xf) : 높이를 채우는 비율 설정 (0~1 사이의 값으로 설정)
• .fillMaxSize(0.xf) : 너비와 높이를 채우는 비율 설정 (0~1 사이의 값으로 설정)
• .padding(x.dp) : 자신을 기준으로 안쪽으로 얼마만큼 공백을 둘 것인지 설정 (자식 컴포넌트의 크기에 영향을 줄 수 있음)
• .offset(x, y) : 자식 컴포넌트를 x축 혹은 y축으로 얼마만큼 이동할 것인지 설정 (자식 컴포넌트의 크기에 영향을 주지 않음)
• .background(brush, color, shape) : 배경색 설정
• .border(width, color, shape) : 테두리 설정 (width : 굵기, color : 색상, shape : 모양)

 

주의할 점

Modifier 함수를 어떤 순서로 적용하느냐에 따라 각각 다른 효과가 적용되는 Modifier가 생성됩니다.

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

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

위의 예시를 보면 padding과 clickable의 순서가 다른 2개의 Modifier가 존재합니다.

첫번째 Modifier는 clickable이 적용된 이후에 padding이 적용되어 padding 영역은 클릭 이벤트가 발생하지 않습니다.

반면에, 두번째 Modifier는 padding이 추가된 Modifier에 clickable가 적용되었으므로 padding 영역까지 모두 클릭 이벤트가 발생합니다.

 

Surface

Surface는 화면에 그리는 기본적인 단위를 의미합니다.

Surface는 렌더링 가능한 영역을 나타내며, 여기에 다양한 컴포즈 요소들을 배치하고 그릴 수 있습니다.

androidx.compose.material3  |  Android Developers

@Composable
@NonRestartableComposable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
): Unit

• modifier : Surface에 적용할 modifier 설정
• shape : Surface의 모양 설정
• color : Surface의 색상 설정 (= 배경색)
• contentColor : 자식 컴포넌트에게 제공하는 기본 content 색상 설정
• tonalElevation : 설정한 값이 높을수록 밝은 테마에서는 어두운 색상이, 어두운 테마에서는 밝은 색상이 나타남
• shadowElevation : 지표면 아래에 있는 그림자의 크기 설정
• border : Surface를 둘러싸는 테두리 설정
• content : Surface의 내용으로 표시될 UI 구성