Button의 content와 content padding
Button은 Surface 내부에 Row 블록을 가지고 있고, Row에 배치되는 컴포저블인 content를 가지고 있어 내부에 컴포저블을 배치할 수 있도록 해준다. Row의 padding은 Button의 contentPadding 값으로 설정된다. 이번 시간에는 content만을 다룬다.
즉, 이를 시각적으로 표현하면 다음과 같다.
![](https://blog.kakaocdn.net/dn/wYYmM/btrm5yNBSS4/j7Ml1NdVHx5uCzKS7Xy8VK/img.png)
*내부 코드는 접은 글을 펼쳐서 확인 가능하다.
@Composable
fun Button(
..
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
) {
..
Surface(
..
) {
CompositionLocalProvider(..) {
ProvideTextStyle(..) {
Row(
Modifier
..
.padding(contentPadding), // contentPadding을 이용해 Row의 padding 결정
..
content = content // content를 이용해 Row내부에 컴포저블 배치
)
}
}
}
}
예를 들어 아래와 같은 코드에서 Button은 Row영역에 12dp의 padding값을 가지고 있고, 내부에는 Text 컴포저블을 가지고 있다.
Button(
onClick = {},
contentPadding = PaddingValues(12.dp),
modifier = Modifier.wrapContentSize()
) { // content 영역
Text(text = "Button KotlinWorld")
}
![](https://blog.kakaocdn.net/dn/OLhOu/btrmYEBMkim/LDGYzMzSo2XKb6zSZOz6ZK/img.png)
버튼에 컴포저블 배치하기
우리가 보통 사용하는 버튼은 다음과 같이 만들어진다. 보통의 버튼에는 버튼을 표현할 한 개의 Text만이 필요하기 때문이다.
Button(onClick = {}, modifier = Modifier.wrapContentSize()) {
Text(text = "Button KotlinWorld")
}
![](https://blog.kakaocdn.net/dn/QNckm/btrmWLIoGYo/mxLsoWLvaKnKR1oUBKdc61/img.png)
하지만, 우리는 Icon이 포함된 버튼을 만들고 싶을 수도 있다. 예를 들어 우리가 메시지 앱을 만들고 싶다고 해보자. 메시지 앱에는 메시지를 보내기 위한 버튼이 필요하다. 버튼의 모양이 아래 그림과 같다고 해보자.
![](https://blog.kakaocdn.net/dn/RQvRv/btrmYFU3moF/SRsq5qEmjvOsFEzpkvmXFK/img.png)
우리는 위와 같은 버튼을 Icon, Spacer, Text 세가지 구성요소를 사용해 만들 수 있다. 버튼의 기본 레이아웃은 Row이므로 그냥 순서대로 배치만 하면 된다.
![](https://blog.kakaocdn.net/dn/UqyLH/btrmXRn6srz/WiUFGHfwrjG59WDYFnyXCk/img.png)
Button(
onClick = {},
modifier = Modifier.wrapContentSize()
) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send drawable"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "Send")
}
버튼 Layout 커스터마이징 하기
하지만 때때로 이러한 버튼을 커스터마이징 해야할 수도 있다. 예를 들어 다음과 같은 수직으로 배치된 버튼을 만들고 싶다고 해보자.
![](https://blog.kakaocdn.net/dn/z1saB/btrm5x80lnX/WyBI8kiJR0Qs0272ETCrZK/img.png)
이를 위해서는 버튼의 RowScope 내부에 다시 Column을 정의함으로써 가능하다.
Button(
onClick = {},
modifier = Modifier.wrapContentSize()
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send drawable"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "Send")
}
}
Button의 content와 content padding
Button은 Surface 내부에 Row 블록을 가지고 있고, Row에 배치되는 컴포저블인 content를 가지고 있어 내부에 컴포저블을 배치할 수 있도록 해준다. Row의 padding은 Button의 contentPadding 값으로 설정된다. 이번 시간에는 content만을 다룬다.
즉, 이를 시각적으로 표현하면 다음과 같다.
![](https://blog.kakaocdn.net/dn/wYYmM/btrm5yNBSS4/j7Ml1NdVHx5uCzKS7Xy8VK/img.png)
*내부 코드는 접은 글을 펼쳐서 확인 가능하다.
@Composable
fun Button(
..
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
) {
..
Surface(
..
) {
CompositionLocalProvider(..) {
ProvideTextStyle(..) {
Row(
Modifier
..
.padding(contentPadding), // contentPadding을 이용해 Row의 padding 결정
..
content = content // content를 이용해 Row내부에 컴포저블 배치
)
}
}
}
}
예를 들어 아래와 같은 코드에서 Button은 Row영역에 12dp의 padding값을 가지고 있고, 내부에는 Text 컴포저블을 가지고 있다.
Button(
onClick = {},
contentPadding = PaddingValues(12.dp),
modifier = Modifier.wrapContentSize()
) { // content 영역
Text(text = "Button KotlinWorld")
}
![](https://blog.kakaocdn.net/dn/OLhOu/btrmYEBMkim/LDGYzMzSo2XKb6zSZOz6ZK/img.png)
버튼에 컴포저블 배치하기
우리가 보통 사용하는 버튼은 다음과 같이 만들어진다. 보통의 버튼에는 버튼을 표현할 한 개의 Text만이 필요하기 때문이다.
Button(onClick = {}, modifier = Modifier.wrapContentSize()) {
Text(text = "Button KotlinWorld")
}
![](https://blog.kakaocdn.net/dn/QNckm/btrmWLIoGYo/mxLsoWLvaKnKR1oUBKdc61/img.png)
하지만, 우리는 Icon이 포함된 버튼을 만들고 싶을 수도 있다. 예를 들어 우리가 메시지 앱을 만들고 싶다고 해보자. 메시지 앱에는 메시지를 보내기 위한 버튼이 필요하다. 버튼의 모양이 아래 그림과 같다고 해보자.
![](https://blog.kakaocdn.net/dn/RQvRv/btrmYFU3moF/SRsq5qEmjvOsFEzpkvmXFK/img.png)
우리는 위와 같은 버튼을 Icon, Spacer, Text 세가지 구성요소를 사용해 만들 수 있다. 버튼의 기본 레이아웃은 Row이므로 그냥 순서대로 배치만 하면 된다.
![](https://blog.kakaocdn.net/dn/UqyLH/btrmXRn6srz/WiUFGHfwrjG59WDYFnyXCk/img.png)
Button(
onClick = {},
modifier = Modifier.wrapContentSize()
) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send drawable"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "Send")
}
버튼 Layout 커스터마이징 하기
하지만 때때로 이러한 버튼을 커스터마이징 해야할 수도 있다. 예를 들어 다음과 같은 수직으로 배치된 버튼을 만들고 싶다고 해보자.
![](https://blog.kakaocdn.net/dn/z1saB/btrm5x80lnX/WyBI8kiJR0Qs0272ETCrZK/img.png)
이를 위해서는 버튼의 RowScope 내부에 다시 Column을 정의함으로써 가능하다.
Button(
onClick = {},
modifier = Modifier.wrapContentSize()
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send drawable"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "Send")
}
}