[Android Button 심화] 1. Compose의 Button, Text Button, Outlined Button 의 차이 살펴보기

Compose에서 지원하는 기본 Button의 종류

Compose에서는 3가지의 기본 Button을 지원한다.

• Button
• TextButton
• OutlinedButton

이 세가지 버튼의 차이는 그림1과 같다.

그림1. Compose의 버튼 종류

그림1과 같이 만들려면 다음의 코드를 이용해 만들면 된다.

@Composable
fun KotlinWorldButton() {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.SpaceEvenly) {
        Button(onClick = {}, modifier = Modifier.wrapContentSize()) {
            Text(text = "Button KotlinWorld")
        }
        OutlinedButton(onClick = {}, modifier = Modifier.wrapContentSize()) {
            Text(text = "OutlinedButton KotlinWorld")
        }
        TextButton(onClick = {}, modifier = Modifier.wrapContentSize()) {
            Text(text = "TextButton KotlinWorld")
        }
    }
}

가장 기본이 되는 버튼은 Button이며, TextButton과 OutlinedButton은 Button에 특정한 프로퍼티들을 적용해 만들어진다. 따라서 TextButton과 OutlinedButton은 모두 Button을 이용해 만들어지는 미리 디자인된 컴포저블이라고 보면 된다.

 

자 그러면 Button, OutlinedButton, TextButton의 내부가 어떻게 생겼는지부터 살펴보도록 하자.

 

 

Button 살펴보기

Button의 내부는 Surface와 Row 두가지 영역으로 나뉜다.

• Surface 영역: 버튼의 색상과 스타일 그리고 유저와의 Interaction(클릭 이벤트)을 담당
• Row 영역: 버튼의 content와 content를 위한 padding값을 결정

 

그림2. 버튼의 내부 구성

 

따라서 onClick, modifier, enaled, interationSource,elevation,shape,border,colors 는 Surface영역의 프로퍼티이며, contentPadding과 content만 Row영역의 프로퍼티이다. 

 

OutlinedButton과 Button의 차이

OutlinedButton 내부에서는 Button을 사용한다. 다른 점은 Button에서 기본값으로 설정된 부분들 중 2개 값(border, colors)이 바뀌었다는 점이다.

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = ButtonDefaults.outlinedBorder,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) = Button(
    onClick = onClick,
    modifier = modifier,
    enabled = enabled,
    interactionSource = interactionSource,
    elevation = elevation,
    shape = shape,
    border = border,
    colors = colors,
    contentPadding = contentPadding,
    content = content
)

 

Button의 border(테두리)를 결정하는 border값과 색상을 결정하는 colors값이 바뀌었고, 이로 인해 기존 Button과 테마가 달라진거 뿐이다.즉, OutlinedButton의 동작 자체는 Button과 모두 같다. 테두리와 색상만 달라진 것이다.

border: BorderStroke? = ButtonDefaults.outlinedBorder,
colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),

그림3. OutlinedButton과 Button의 차이점

 

 

 

TextButton과 Button의 차이

TextButton의 내부에서는 Button을 사용한다. 다른 점은 Button에서 기본값으로 설정된 부분들 중 2개 값(colors, contentPadding)이 바뀌었다는 점이다. 

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
    content: @Composable RowScope.() -> Unit
) = Button(
    onClick = onClick,
    modifier = modifier,
    enabled = enabled,
    interactionSource = interactionSource,
    elevation = elevation,
    shape = shape,
    border = border,
    colors = colors,
    contentPadding = contentPadding,
    content = content
)

 

Button의 색상을 결정하는 colors와 Button content의 padding값을 결정하는 contentPadding의 기본 값이 바뀌었고, 이로 인해 Button의 테마가 달라진것 뿐이다. TextButton의 동작 자체는 Button과 모두 같다. 색상과 여유공간만 달라진 것이다.

colors: ButtonColors = ButtonDefaults.textButtonColors(),
contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,

그림4. TextButton과 Button의 차이점