[Android] Compose Button

개요

Composable 함수를 사용하여 다양한 Button을 쉽게 만들 수 있다. 버튼은 사용자가 정의된 작업을 트리거할 수 있도록 도와주는 기본 구성요소이다. 

 

 

Composable Button

일반적으로 Button은 onClick 속성과 content 속성을 정의한다. onClick 속성은 모든 버튼이 공통적으로 갖고 있는 속성이며, 여기에 트리거를 정의한다. content 속성은 Composable 함수를 정의하는 람다식으로 Composable Button 안에 contents를 custom 하기 위해 자유롭게 정의할 수 있다.

Button(onClick = { /*TODO*/ }) {
                
}

 

Text Button 구현하기

일반적으로 Button 안에 Text를 입력한 형태를 가장 많이 사용한다. Composable 함수를 이용하면, Text Button을 다양하게 구현할 수 있다.

Button(onClick = { /*TODO*/ }) {
      Text(text = stringResource(id = R.string.hello_world))
}

TextButton(onClick = { /*TODO*/ }) {
      Text(text = stringResource(id = R.string.hello_world))
}

Button으로 정의하고 content에 Text를 전달해도 되고, TextButton으로 정의해도 된다. Style을 지정하지 않으면 두 Button의 모양과 속성이 조금 다르다.

 

 

 

Button 색상 변경

Button은 활성화, 비활성화 상태를 가질 수 있기 때문에 더 다양한 색상 관련 속성을 갖고 있다.

Button(
      onClick = { /*TODO*/ },
      colors = ButtonDefaults.buttonColors(
          containerColor = Color.Red,
          contentColor = Color.Black,
          disabledContainerColor = Color.Blue,
          disabledContentColor = Color.White
      )
) {
  Text(text = stringResource(id = R.string.hello_world))
}

• containerColor : Button의 색상.
• contentColor : Button content의 색상. (위의 코드 블록에서는 Text)
• disabledContainerColor : Disable된 Button의 색상.
• disabledContentColor : Disable된 Button의 content 색상.

 

 

 

Button 모양 변경

Button shape를 설정하지 않으면 기본적으로 적용되는 CircleShape

Button(
      onClick = { /*TODO*/ },
      shape = CircleShape
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

흔히 사용하는 Radius 속성을 다루는 RoundedCornerShape

Button(
      onClick = { /*TODO*/ },
      shape = RoundedCornerShape(10.dp)
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

Radius를 사용하고 싶지 않을 때, 각진 모양을 그려주는 RectangleShape

Button(
      onClick = { /*TODO*/ },
      shape = RectangleShape
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

직선을 많이 사용하는 화면에서 사용할 수도 있는 CutCornerShape

Button(
      onClick = { /*TODO*/ },
      shape = CutCornerShape(10.dp)
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

Button Border 변경

Border는 버튼 테두리를 이야기한다. 기본값은 테두리가 존재하지 않는 모양인데, 추가하고 색상을 변경할 수 있다.

Button(
      onClick = { /*TODO*/ },
      border = BorderStroke(10.dp, Color.Black)
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

Brush API를 사용하면 Border의 색상을 좀 더 화려하게 만들 수 있다.

Button(
      onClick = { /*TODO*/ },
      border = BorderStroke(10.dp, Brush.linearGradient(listOf(Color.Cyan, Color.Blue)))
) {
      Text(text = stringResource(id = R.string.hello_world))
}

 

 

 

Icon 추가

Button의 content 블록은 RowSocpe이기 때문에 Composable 함수를 나열했을 때 가로로 배치된다.

Button(
      onClick = { /*TODO*/ },
) {
      Icon(imageVector = Icons.Outlined.Add, contentDescription = null)
      Spacer(modifier = Modifier.width(10.dp))
      Text(text = stringResource(id = R.string.hello_world))
}

Icon과 Text를 추가하면 Icon Button이 완성된다. 만약 Icon과 Text 사이에 간격을 두고 싶다면 Spacer를 사용할 수 있다. Spacer는 Compose에서 Composable 함수 사이에 margin을 주고 싶을 때 사용하는 함수이다. Row일 땐 width, Column일 땐 height 속성으로 margin을 설정할 수 있다.

 

 

 

결론

Compose에 대해서 공식 문서는 잘 정리되어 있는 편이다. 또한, 직관적이기 때문에 기본값을 설정한 후 constructor를 살펴보면 대부분 정의되어 있는 것을 볼 수 있을 것 같다.