[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 등)에 대한 설정을 담당한다.

 

그림1. Button의 구성요소

 

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 제대로 이해하기

 

 

Row 영역의 구성

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

 

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

 

Row영역 목차

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

[Android Button Row] 2. Button에 padding을 만드는 방법 : contentPadding

 

 

 

Button 심화

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