Button을 위한 Color 객체 접근 방법
Button에 색상을 설정하기 위해서는 ButtonColors interface를 구현하는 객체를 넣어주어야 한다.
fun Button(
..
colors: ButtonColors,
..
)이 ButtonColors를 구현하는 것은 DefaultButtonColors class인데 이는 private으로 설정되어 외부에서 접근이 불가능하다.
private class DefaultButtonColors(
private val backgroundColor: Color,
private val contentColor: Color,
private val disabledBackgroundColor: Color,
private val disabledContentColor: Color
) : ButtonColors그렇다면 이 DefaultButtonColors에 어떻게 접근할까?
바로 ButtonDefaults object 내부의 buttonColors 함수를 통해 접근할 수 있다.
fun buttonColors(
backgroundColor: Color = MaterialTheme.colors.primary,
contentColor: Color = contentColorFor(backgroundColor),
disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
.compositeOver(MaterialTheme.colors.surface),
disabledContentColor: Color = MaterialTheme.colors.onSurface
.copy(alpha = ContentAlpha.disabled)
): ButtonColors = DefaultButtonColors(
backgroundColor = backgroundColor,
contentColor = contentColor,
disabledBackgroundColor = disabledBackgroundColor,
disabledContentColor = disabledContentColor
)
Button Color의 구성
위에서 볼 수 있듯이 DefaultButtonColors 객체는 총 4가지 프로퍼티로 구성되어 있다.
- backgroundColor : Button의 배경 색상 - Surface 영역의 background Color을 결정
- contentColor : Button의 content 색상. 버튼을 표현하는 텍스트의 색상 등 - content 영역의 색상을 결정
- disabledBackgroundColor : Button이 enable = false 되었을 때의 배경 색상 - Surface 영역의 background Color을 결정
- disabledContentColor : Button이 enable = false 되었을 때의 content 색상 - content 영역의 색상을 결정
우리는 위 Color 적용을 위해 아래 버튼들을 사용할 것이다. 아래의 버튼들에 위의 DefaultButtonColors객체를 을 적용시켜 어떻게 작동하는지 확인하자.
*그림2를 만드는 코드는 아래 접은글을 펼치면 보인다.
@Composable
fun KotlinWorldButton() {
Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
Button(
onClick = {},
modifier = Modifier.wrapContentSize()
) {
SendButtonContent()
}
}
}
@Composable
fun SendButtonContent() {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send drawable"
)
Spacer(modifier = Modifier.width(8.dp))
Text(text = "Send")
}*그림3을 만드는 코드는 아래 접은글을 펼치면 보인다. 그림2의 코드에 enabled = false를 적용했다.
@Preview(showBackground = true, widthDp = 300, heightDp = 200)
@Composable
fun KotlinWorldButton() {
Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
Button(
onClick = {},
enabled = false,
modifier = Modifier.wrapContentSize()
) {
SendButtonContent()
}
}
}Button에 backgroundColor와 contentColor 적용시키기
기본적으로 버튼은 배경색(backgroundColor)와 콘텐츠 영역 색(contentColor)를 설정할 수 있다.
그림2 버튼의 배경 색을 하얀색으로 만들고 content 영역 색상을 파란색으로 만들어보도록 하자. 다음과 같은 코드를 통해 직접 color 객체를 제어할 수 있다.
@Preview(showBackground = true, widthDp = 300, heightDp = 200)
@Composable
fun KotlinWorldButton() {
Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
Button(
onClick = {},
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White, contentColor = Color.Blue),
modifier = Modifier.wrapContentSize()
) {
SendButtonContent()
}
}
}
Button에 disabledBackgroundColor과 disabledContentColor 적용시키기
우리는 그림3의 disable된 button을 다음과 같이 바꿔 눌러도 보내지지 않는다는 것을 표현하자.
그림5를 만드는 코드는 다음과 같다. buttonColor 함수에 disabledBackgroundColor 을 Red로 설정하고 disabledContentColor을 White로 설정함으로써 위와 같은 버튼이 나온다.
@Preview(showBackground = true, widthDp = 300, heightDp = 200)
@Composable
fun KotlinWorldButton() {
Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
Button(
onClick = {},
enabled = false,
colors = ButtonDefaults.buttonColors(disabledBackgroundColor = Color.Red, disabledContentColor = Color.White),
modifier = Modifier.wrapContentSize()
) {
SendButtonContent()
}
}
}
