[Compose Button] Button 구성 살펴보기

Button의 구성요소

Compose Button은 다음 10가지의 속성을 설정할 수 있다.

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

이 Button의 10가지 요소는 UI적 관점에서 봤을 때 Surface영역과 Row영역 두 영역으로 나뉜다. Surface영역은 버튼의 배경색과 스타일, 유저와의 Interaction(click 등)을 담당하며, Row영역은 Button 내부에 보여줄 컴포저블(Text 등)에 대한 설정을 담당한다.

Surface 영역의 구성

Surface 영역은 총 8가지로 구성된다. Button은 Surface영역에 Button의 배경색과 스타일, 클릭 이벤트를 정의한다.

onClick: 버튼이 눌렸을 때의 효과 정의
modifier: Surface의 modifier 정의
enabled: 버튼이 눌릴 수 있는지 정의
interactionSource: 컴포넌트가 눌렸거나 드래그 됐을 때 필요한 Interaction Source 정의.
elevation: 버튼의 elevation(올라온 효과) 정의
shape: 모양 정의
border: 테두리 정의
colors: Button의 Theming을 위한 color 정의

Surface영역 목차

우리는 위의 프로퍼티를 다음의 순서로 다룬다.

[Android Button Surface] 1. Compose Button Click 이벤트 정의하기 : onClick, interactionSource, enabled

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

[Android Button Surface] 3. Button의 모양 설정하기 : shape

[Android Button Surface] 4. Button에 테두리 설정하고 높이 효과 주기 : border, elevation

*modifier은 공통으로 사용되므로 다루지 않는다 궁금하면 아래의 글을 참조하길 바란다.

[Android Compose Modifier] Modifier 제대로 이해하기

Modifier이란 무엇인가? Modifier이란 Compose의 UI 구성요소들을 꾸미거나 행동을 추가하기 위한 요소들의 모음이다. 따라서 이 글에서는 Modifier을 두 가지 분류로 나누고자 한다. UI 구성요소들을 꾸미

kotlinworld.com

Row 영역의 구성

Row영역은 Button 내부에 컴포저블을 Custom하게 배치할 수 있는 공간이다. 우리는 content를 이용해 컴포저블을 Custom하게 배치할 수 있으며, contentPadding을 통해 Row에 Padding을 줌으로써 content의 바깥쪽에 여유공간을 만들어낸다.

content: 버튼 내부의 content 정의
contentPadding: 버튼에 대한 내부 content(보통 Text)의 여유공간 정의