(Compose) Button

이번 글에서는 Jetpack Compose의 가장 기본적이면서도 사용자와 상호작용 할 수 있는 UI 컴포넌트인 Button에 대해 이야기해보려고 합니다.

Button 컴포넌트란?

Compose에서 버튼은 Button() 함수를 사용해 구현합니다.

예를 들어, 화면에 간단한 버튼 하나를 만들고 싶다면 이렇게 작성할 수 있습니다.

var count by remember { mutableStateOf(0) }

Button(onClick = { count++ }) {
    Text("클릭 수: $count")
}

onClick 파라미터에 클릭 시 동작을 넣고, 버튼 안에는 Text를 사용해 표시할 글자를 넣습니다. XML 시절보다 훨씬 간단하고 직관적입니다.

버튼에 색상과 모양 추가하기

Compose의 버튼은 다양한 속성을 통해 쉽게 스타일링할 수 있습니다.

Button(
    onClick = { /* 클릭 시 처리 */ },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color(0xFF6200EE), // 배경 색
        contentColor = Color.White // 글자 색
    ),
    shape = RoundedCornerShape(32.dp) // 모서리를 둥글게
) {
    Text("스타일 버튼")
}

버튼 크기 조절하기

버튼의 크기도 쉽게 설정할 수 있어요.

Button(
    onClick = { /* 클릭 시 처리 */ },
    modifier = Modifier
        .width(200.dp)
        .height(50.dp)
) {
    Text("큰 버튼")
}

아이콘과 함께 사용하기

버튼에 아이콘을 추가해 사용자 경험을 높일 수도 있습니다.

Button(onClick = { /* 클릭 시 처리 */ }) {
    Icon(
        imageVector = Icons.Default.Favorite,
        contentDescription = "Favorite",
        modifier = Modifier.size(18.dp)
    )
    Spacer(modifier = Modifier.width(8.dp))
    Text("좋아요")
}

Modifier.clickable

버튼을 사용하지 않고 Text에 Modifier.clickable을 사용하면 사용자의 클릭 이벤트를 받을 수 있습니다.

Text(
    text = "여기를 눌러보세요",
    modifier = Modifier.clickable { 
        println("Text 클릭됨!") 
    },
    color = Color.Blue,
    fontSize = 16.sp
)

 

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA