Android Jetpack Compose UI/Compose Button

[Android Button Surface] 2. Button에 색상(colors) 설정하기 : background color, content color

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 영역의 색상을 결정

그림1. Surface영역과 content영역

 

우리는 위 Color 적용을 위해 아래 버튼들을 사용할 것이다. 아래의 버튼들에 위의 DefaultButtonColors객체를 을 적용시켜 어떻게 작동하는지 확인하자.

그림2. 예시를 위한 Send Button. enabled = true
그림3. 예시를 위한 Send Button. enabled = false

*그림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()
        }
    }
}

그림4. backgroundColor, contentColor 커스텀하기

 

Button에 disabledBackgroundColor과 disabledContentColor 적용시키기

우리는 그림3의 disable된 button을 다음과 같이 바꿔 눌러도 보내지지 않는다는 것을 표현하자.

그림5. disabledBackgroundColor과 disabledContentColor 커스텀하기

 

그림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()
        }
    }
}

 

반응형

 

이 글의 저작권은 Dev World 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com