compose 모디파이어

모디파이어

Text(
	"My vacation",
	fontSize = 40.sp,
	fontWeight = FontWeight.Bold
)

• Text 컴포저블의 글꼴 크기나 굵기는 위와 같이 지정할 수 있다.
• 대부분의 내장 컴포저블들은 선택적인 모디파이어 파라미터를 받으며, 이를 이용해 컴포저블의 다른 항목들을 설정할 수 있다.
• 일반적으로 특정한 컴포저블과 관련된 파라미터와 달리(글꼴 설정은 Column 컴포넌트와는 아무런 관련이 없다) 모디파이어는 좀 더 일반적인 방식으로 모든 컴포저블에 적용할 수 있다.

모디파이어 만들기

@Composable
fun DemoScreen() {
    val modifier = Modifier.border(width = 2.dp, color = Color.Black).padding(all = 10.dp)
    Text(
        "Hello Compose",
        modifier = modifier,
        fontSize = 40.sp,
        fontWeight = FontWeight.Bold
    )
}

• 위의 코드는 모디파이어 변수를 Text에 적용하는 코드이다.
• 주의할 점은 모디파이어 연결 순서에 따라 결과가 달라질 수 있다는 점이다.
  • 위의 모디파이어에서 패딩과 border의 순서를 바꾸면 패딩을 먼저 적용하고 그 후에 border 처리를 하기 때문에 border와 text 사이에 패딩이 적용되지 않는다.
  • 모디파이어 적용 후 기대와 다른 결과가 나왔다면 적용 순서를 변경해보자.

컴포저블에 모디파이어 지원 추가하기

• 이미지뷰에 모디파이어 지원을 선택적으로 추가하는 방법을 알아보자

@Composable
fun CustomImage(image: Int, modifier: Modifier = Modifier) {
    Image(
        painter = painterResource(image),
        contentDescription = null,
        modifier
    )
}

• 위의 코드에서 주목할 점은 modifier 파라미터 변수이다. 현재 함수의 선언에서 미리 modifier 변수에 빈 Modifier 인스턴스를 지정해주고 있다. 이는 해당 함수를 호출할 때 모디파이어 없이도 호출하는 것을 가능하게 하기 위함이다.
• 이를 통해 해당 컴포저블을 사용할 때 선택적으로 모디파이어를 적용할 수 있다.

공통 내장 모디파이어

• background: 컴포저블의 배경에 색상이 가득 칠해진 도형을 그린다.
• clickable: 컴포저블을 클릭했을 때 호출되는 핸들러를 지정한다. 클릭했을 때 깜빡이는 효과를 낸다.
• clip: 컴포저블의 콘텐츠를 지정한 형태로 자른다.
• fillMaxHeight: 컴포저블의 높이를 부모가 허용하는 최댓값에 맞춘다.
• fillMaxWidth: 컴포저블의 폭을 부모가 허용하는 최댓값에 맞춘다.
• fillMaxSize: 컴포저블의 높이와 폭을 부모가 허용하는 최댓값에 맞춘다.
• layout: 커스텀 레이아웃 행동을 구현할 때 이용한다.
• offset: 컴포저블을 현재 위치에서 x, y축 방향으로 지정한 거리만큼 이동시킨다.
• padding: 컴포저블 주변에 공백을 추가한다. 상하좌우 모든 방향을 동시에 지정하거나, 각 방향에 별도로 지정할 수 있다.
• rotate: 컴포저블의 중심점을 기준으로 지정한 숫자(각도)만큼 컴포저블을 회전시킨다.
• scale: 지정한 비율만큼 컴포저블의 크기를 확대 또는 축소한다.
• scrollable: 포함된 레이아웃의 표시 영역을 초과하는 컴포저블의 스크롤 기능을 활성화한다.
• size: 컴포저블의 높이와 폭을 지정할 때 이용한다. 크기를 지정하지 않으면 콘텐츠에 맞춰 컴포저블의 크기가 결정된다.

모디파이어 조합하기

• 컴포즈를 이용하다 보면 동일한 컴포저블에 적용되는 둘 이상의 Modifier 객체를 이용하게 되는 상황이 발생한다. 이런 상황에서는 then 키워드를 이용해 모디파이어들을 조합할 수 있다.

val combinationModifier = firstModifier.then(secondModifier).then(thirdModifier)

Text(
	"Hello Compose",
    combinationModifier
)