[Compose Button] 1. Button에 Custom하게 Content 배치하기 : content

Button의 content와 content padding

Button은 Surface 내부에 Row 블록을 가지고 있고, Row에 배치되는 컴포저블인 content를 가지고 있어 내부에 컴포저블을 배치할 수 있도록 해준다. Row의 padding은 Button의 contentPadding 값으로 설정된다. 이번 시간에는 content만을 다룬다.

 

즉, 이를 시각적으로 표현하면 다음과 같다.

그림1. Row의 구성

*내부 코드는 접은 글을 펼쳐서 확인 가능하다.

@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")
}

그림2. Row 예시

 

버튼에 컴포저블 배치하기

우리가 보통 사용하는 버튼은 다음과 같이 만들어진다. 보통의 버튼에는 버튼을 표현할 한 개의 Text만이 필요하기 때문이다.

Button(onClick = {}, modifier = Modifier.wrapContentSize()) {
    Text(text = "Button KotlinWorld")
}

그림3. 기본 버튼

 

하지만, 우리는 Icon이 포함된 버튼을 만들고 싶을 수도 있다. 예를 들어 우리가 메시지 앱을 만들고 싶다고 해보자. 메시지 앱에는 메시지를 보내기 위한 버튼이 필요하다. 버튼의 모양이 아래 그림과 같다고 해보자.

그림3. 버튼

우리는 위와 같은 버튼을 Icon, Spacer, Text 세가지 구성요소를 사용해 만들 수 있다. 버튼의 기본 레이아웃은 Row이므로 그냥 순서대로 배치만 하면 된다.

그림4. 버튼의 구성

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 커스터마이징 하기

하지만 때때로 이러한 버튼을 커스터마이징 해야할 수도 있다. 예를 들어 다음과 같은 수직으로 배치된 버튼을 만들고 싶다고 해보자.

그림5. 수직으로 배치된 버튼

이를 위해서는 버튼의 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")
    }
}