Button Composable 내부를 들여다보면 colors를 지정할 수 있다. 해당 파라메터로 ButtonColors 클래스를 넘겨주면 됩니다.
기본값은 ButtonDefaults.buttonColors()로 되어있는데 구현 로직을 따라가다보면 시스템 기본 컬러로 지정되어 있는 것을 확인할 수 있습니다.
@Composable
fun Button(
...
colors: ButtonColors = ButtonDefaults.buttonColors(),
...
)
@Composable
fun buttonColors(
containerColor: Color = FilledButtonTokens.ContainerColor.toColor(),
contentColor: Color = FilledButtonTokens.LabelTextColor.toColor(),
disabledContainerColor: Color =
FilledButtonTokens.DisabledContainerColor.toColor()
.copy(alpha = FilledButtonTokens.DisabledContainerOpacity),
disabledContentColor: Color = FilledButtonTokens.DisabledLabelTextColor.toColor()
.copy(alpha = FilledButtonTokens.DisabledLabelTextOpacity),
): ButtonColors = ButtonColors(
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor
)
그렇다면 우리는 Button에 직접 컬러를 적용하기 위해서 ButtonColors 인스턴스를 생성하여 Button 의 colors 파라메터로 집어넣어주기만 하면 끝입니다.
다만 ButtonColors 는 internal constructor로 해당 클래스의 생성자가 같은 모듈 내부에서만 호출할 수 있습니다. 그렇기에 해당 클래스는 같은 모듈 내부에서만 인스턴스화 할 수 있고, 그 외부에서는 인스턴스를 생성할 수 없습니다.
@Immutable
class ButtonColors internal constructor(
private val containerColor: Color,
private val contentColor: Color,
private val disabledContainerColor: Color,
private val disabledContentColor: Color,
)
따라서 위의 기본값에서 사용된 ButtonDefaults.buttonColors()를 통해 아래 4가지 컬러를 지정해야합니다.
실제 사이드 프로젝트에서 사용하고 있는 버튼으로 ButtonDefaults.buttonColors() 를 사용하여 버튼에 색상을 지정한 예제입니다.
Button(
modifier = modifier,
colors = ButtonDefaults.buttonColors(
containerColor = Main100,
contentColor = Color.White,
disabledContainerColor = Gray200,
disabledContentColor = Color.White,
),
onClick = {
onReviewRegisterClicked()
},
shape = RoundedCornerShape(12.dp),
content = {
Text(
text = stringResource(R.string.register),
style = TextStyle(
fontSize = 16.sp,
fontWeight = FontWeight(500),
color = Color.White,
)
)
}
)
XML 에서는 BackgrdundTint만 적용해주면 되었었는데, Compose는 기본적인 색상 변경하는 코드마저도 구글링을 해야한다니... 역시 아직 배울 점이 너무나도 많은 것 같습니다.
좋은 글 감사합니다 ~!