[Compose Button] 2. Button에 padding을 만드는 방법 : contentPadding

Button의 contentPadding 이해하기

Button의 contentPadding 프로퍼티는 Row영역에 padding을 준다. 

그림1. Row 영역

Button의 contentPadding에 들어가는 값은 PaddingValues 인터페이스를 상속받은 객체이다. 

contentPadding: PaddingValues = ButtonDefaults.ContentPadding

 

contentPadding을 만드는 방법

우리는 Compose에서 제공해주는 총 3가지 함수를 이용해 PaddingValues를 상속받는 PaddingValuesImpl 객체를 만들어낼 수 있다.

 

• 상하좌우에 모두 같은 크기의 padding을 주는 방법

fun PaddingValues(all: Dp): PaddingValues = PaddingValuesImpl(all, all, all, all)

• 수평, 수직에 padding을 주는 방법

fun PaddingValues(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): PaddingValues =
    PaddingValuesImpl(horizontal, vertical, horizontal, vertical)

• 상, 하, 좌, 우 각각에 padding을 주는 방법

fun PaddingValues(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
): PaddingValues = PaddingValuesImpl(start, top, end, bottom)

 

이에 대한 코드 예시 작성을 위해 앞선글에서 보았던 Send Button에 대한 예시를 이용한다.

그림2. Send Button

@Preview(showBackground = true, widthDp = 300, heightDp = 200)
@Composable
fun KotlinWorldButton() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        Button(
            onClick = {},
            modifier = Modifier.wrapContentSize()
        ) {
            SendButtonContent()
        }
    }
}

 

상하좌우에 같은 크기의 Padding 주기

fun PaddingValues(all: Dp)

상하좌우에 같은 크기를 주기 위해서는 fun PaddingValues(all: Dp)을 이용해야 한다. 위 그림2에 24dp의 padding을 줘보도록 하자.

@Composable
fun KotlinWorldButton() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        Button(
            onClick = {},
            modifier = Modifier.wrapContentSize(),
            contentPadding = PaddingValues(all = 24.dp)
        ) {
            SendButtonContent()
        }
    }
}

위 코드를 수행하면 다음과 같이 상하좌우에 모두 24dp의 padding이 적용된다.

그림3. 상하좌우에 한 번에 모두 padding 적용

 

수평 또는 수직에 Padding 적용

fun PaddingValues(horizontal: Dp = 0.dp, vertical: Dp = 0.dp)

실무에서 가장 많이 사용하는 padding은 수평과 수직에 각각 padding을 주는 방식이다. 좌우 대칭 상하 대칭을 위해 가장 많이 사용한다. fun PaddingValues(horizontal: Dp, vertical: Dp) 을 통해 설정 가능하다.

 

이번에는 수평에 24dp의 padding을 수직에 12dp의 padding을 줘보도록 하자.

@Composable
fun KotlinWorldButton() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        Button(
            onClick = {},
            modifier = Modifier.wrapContentSize(),
            contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp)
        ) {
            SendButtonContent()
        }
    }
}

위 코드를 수행하면 수평에는 24dp의 padding이 수직에는 12dp의 padding이 들어간 것을 확인할 수 있다.

그림4. horizontal, vertical 패딩 적용

 

상, 하, 좌, 우 각각에 Padding 적용

fun PaddingValues(start: Dp, top: Dp, end: Dp, bottom: Dp)

디자인적인 요소를 위해 커스텀 하기 위해서는 상, 하, 좌, 우 각각에 padding을 주어야 한다. 위 함수를 사용하면 상(top), 하(bottom), 좌(start), 우(end)에 padding을 각각 주는 PaddingValuesImpl 객체를 만들 수 있다.

 

이번에는 위에서부터 시계방향으로 6dp, 12dp, 18dp, 24dp의 padding을 줘보도록 하자.

@Preview(showBackground = true, widthDp = 300, heightDp = 200)
@Composable
fun KotlinWorldButton() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        Button(
            onClick = {},
            modifier = Modifier.wrapContentSize(),
            contentPadding = PaddingValues(top = 6.dp, end = 12.dp, bottom = 18.dp, start = 24.dp)
        ) {
            SendButtonContent()
        }
    }
}

위 코드를 수행하면 top, end, bottom, start 순서로 6dp씩 padding이 커지는 것을 확인할 수 있다.

그림5. start, top, end, bottom padding 적용