7. Button (Jetpack Compose UI 코틀린 앱 개발 강의)

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

7. Button (Jetpack Compose 코틀린 앱 개발 강의)

 

Jetpack Compose에서 Button은 사용자와 상호작용할 수 있는 중요한 UI 요소 중 하나입니다. 버튼을 통해 사용자는 앱에서 작업을 수행하거나 기능을 실행할 수 있습니다.

1. Button의 역할:
   • Button은 사용자의 터치나 클릭과 같은 상호작용을 감지하여 특정 동작을 실행하는 역할을 합니다.
   • 사용자에게 앱 내에서 가능한 기능을 제시하고, 사용자의 요청에 따라 앱의 상태를 변경합니다.
2. Jetpack Compose의 Button 특징:
   • Jetpack Compose의 Button은 안드로이드 UI를 선언적으로 정의하는 방식에 따라 사용됩니다.
   • 기존의 XML 레이아웃과 달리 코드로 직접 버튼을 정의하고 스타일링할 수 있습니다.
3. Button의 사용 방법:
   • Button을 사용하기 위해서는 Button() 함수를 호출하고 그 내부에 버튼의 동작과 텍스트 등을 정의합니다.
   • 클릭 이벤트를 처리하기 위해 onClick 매개변수를 설정하고, 클릭 시 실행될 동작을 정의합니다.
4. 버튼 스타일링:
   • 버튼의 스타일링은 Modifier를 사용하여 쉽게 변경할 수 있습니다.
   • 예를 들어, 배경색, 텍스트 스타일, 패딩 등을 수정할 수 있습니다.
5. 버튼의 종류:
   • Jetpack Compose에서는 다양한 유형의 버튼이 제공됩니다.
   • ElevatedButton: 높은 고도를 갖는 버튼으로, 강조된 시각적 효과를 제공합니다.
   • TextButton: 텍스트로 표시되는 버튼으로, 일반적인 스타일의 버튼입니다.
   • OutlinedButton: 테두리가 있는 버튼으로, 강조된 버튼이지만 적은 시각적 요소를 원할 때 사용됩니다.
   •  

Button 컴포넌트는 사용자가 클릭할 수 있는 버튼을 만듭니다. 다음과 같은 속성을 설정할 수 있습니다.

• text : 버튼에 표시할 텍스트를 설정합니다.
• onClick : 버튼을 클릭했을 때 실행할 동작을 설정합니다.
• enabled : 버튼이 클릭 가능한지 여부를 설정합니다. 기본값은 true입니다.
• elevation : 버튼의 입체감을 설정합니다. 값이 클수록 버튼의 입체감이 커집니다.
• shape : 버튼의 모양을 설정합니다. 기본값은 RectangleShape입니다.
• colors : 버튼의 색상을 설정합니다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.fillMaxWidth().padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = "Hello ")
                Text(text = name)
            }
            
            ElevatedButton(
                onClick = { /* TODO */ }
            ) {
                Text("Show more")
            }
        }

    }
}

 

 

 

버튼은 사용자와 앱 간의 상호작용을 촉진하고, 앱의 사용자 경험을 향상시키는 중요한 요소입니다. Jetpack Compose를 사용하여 버튼을 쉽게 만들고 사용할 수 있으며, 각 버튼의 스타일을 조정하여 앱의 디자인을 개선할 수 있습니다.

 

 

---

• [Jetpack Compose] 가이드 맵으로 돌아가기