Android Modifier

오늘은 안드로이드 Compose에서 UI 요소의 스타일링과 레이아웃을 간편하게 관리할 수 있는 Modifier에 대해 알아보도록 하겠다. Modifier는 화면 디자인의 유연성을 높이고 코드의 가독성을 개선하는 데 큰 도움을 준다.

Modifier란?

Modifier는 Jetpack Compose에서 UI 컴포넌트의 모양, 배치, 동작을 수정하거나 추가 기능을 부여하기 위해 사용되는 객체이다. 이는 Compose의 선언형 UI 철학에 맞게 간결하고 유연하게 UI를 조정할 수 있도록 설계되었다. 수정자라고도 한다.

Modifier를 통해 할 수 있는 작업의 종류👍

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

수정자의 순서

수정자의 순서에 따라 다음 요청이 반응하지 않을 수 있다.
1.

@Composable
fun    SoftWare(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // ...
    }
}

2.

@Composable
fun SoftWare(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // ...
    }
}

여기서의 1, 2는 같은 내용의 코드이지만 padding 순서만 다르다. 그렇지만 2는 주변 패딩 포함하지 않고 전체 영역 선택가능 1은 주변 패딩 포함하여 영역선택

내장 수정자🔥

패딩 및 크기

• size(width=.., height=...)
  • 지정한 레이아웃의 상위 요소에서 수신된 제약조건이 충족되지 않을 경우 적용되지 않을 수 있다.
• requiredSize
  • 제약 조건에 관계없이 컴포저블의 크기를 고정해야 하는 경우 사용한다.
• fillMaxSize
  • 하위 레이아웃이 상위 요소에 의해 허용된 모든 가용 높이를 채우도록 한다
  • fillMaxSize 및 fillMaxWidth도 제공한다.
• padding
  • 요소 주위에 패딩을 추가한다.
• paddingFromBaseline
  • 레이아웃 상단에서 기준선까지 특정 거리가 유지되도록 텍스트 기준선 위에 패딩을 추가한다.

Offset

원래 위치를 기준으로 레이아웃을 배치하려면 offset 수정자를 추가하고 x축 및 y축에 오프셋을 설정. 오프셋은 양수일 수도 있고 양수가 아닐 수도 있다. padding과 offset의 차이점은 컴포저블에 offset을 추가해도 측정값이 변경되지 않는다는 것

@Composable
fun SoftWare(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(artist.name)
            Text(
                text = artist.lastSeenOnline,
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}

offset 수정자는 레이아웃 방향에 따라 가로로 적용. 왼쪽에서 오른쪽으로 컨텍스트에서 양수 offset은 요소를 오른쪽으로 이동하고 오른쪽에서 왼쪽으로 컨텍스트에서는 요소를 오른쪽으로 이동된다.

offset 수정자는 오버로드 두 개를 제공함. 오프셋을 매개변수로 사용하는 offset과 람다를 사용하는 offset