안드로이드 Compose Button 생성

Jetpack Compose에서 기본으로 제공되는 Composable 중 하나인 Button에 대해 살펴보자.

안드로이드 공식문서
https://developer.android.com/develop/ui/compose/components/button?authuser=2&hl=ko

Button 컴포저블 생성

// 채워진 버튼
@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    Button(onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

// 채워진 토널 버튼
@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    FilledTonalButton (onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

// 윤관석 있는 버튼
@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    OutlinedButton (onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

// 그림자 버튼
@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    ElevatedButton (onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

// 텍스트 버튼
@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    TextButton (onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

 
 

버튼 응용해보기

1. button 클릭 시 Toast 출력

  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeTheme {
                ButtonExample(onButtonClicked = {
                    Toast.makeText(this@MainActivity, "Hello", Toast.LENGTH_SHORT).show()
                })
            }
        }
    }


@Composable
fun ButtonExample(onButtonClicked: () -> Unit) {
    Button(onClick = onButtonClicked) {
        Text(text = "Send")
    }
}

 
2. 버튼 텍스트 앞에 아이콘 추가

Button(onClick = onButtonClicked) {
        Icon(
            imageVector = Icons.Filled.Build, // 기본 머터리얼 이미지 벡터
            contentDescription = "아이콘 설명",
            Modifier.size(width = 16.dp, height = 16.dp) // 아이콘 사이즈 조절
        )
        Text(text = "Send")
    }

 
3. 아이콘과 텍스트 사이 여백 추가

 Button(onClick = onButtonClicked) {
        Icon(
            imageVector = Icons.Filled.Build, // 기본 머터리얼 이미지 벡터
            contentDescription = "아이콘 설명",
            Modifier.size(width = 16.dp, height = 16.dp) // 아이콘 사이즈 조절

        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) // 아이콘 뒤 얼만큼 띄울건지 기본값으로 설정
        Text(text = "Send")
    }

 
4. 버튼 클릭 막기

Button(
        onClick = onButtonClicked,
        enabled = false // 클릭을 막음
    ) {
        Icon(
            imageVector = Icons.Filled.Build, // 기본 머터리얼 이미지 벡터
            contentDescription = "아이콘 설명",
            Modifier.size(width = 16.dp, height = 16.dp) // 아이콘 사이즈 조절

        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) // 아이콘 뒤 얼만큼 띄울건지 기본값으로 설정
        Text(text = "Send")
    }

 
5. Border에 Stroke설정 

 Button(
        onClick = onButtonClicked,
        border = BorderStroke(10.dp, Color.Red) // 테두리의 외각이 10.dp만큼 RED로 설정
    ) {
        Icon(
            imageVector = Icons.Filled.Build, // 기본 머터리얼 이미지 벡터
            contentDescription = "아이콘 설명",
            Modifier.size(width = 16.dp, height = 16.dp) // 아이콘 사이즈 조절

        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) // 아이콘 뒤 얼만큼 띄울건지 기본값으로 설정
        Text(text = "Send")
    }

 
6. CircleShape

    Button(
        onClick = onButtonClicked,
        shape = CircleShape
    ) {
        Icon(
            imageVector = Icons.Filled.Build, // 기본 머터리얼 이미지 벡터
            contentDescription = "아이콘 설명",
            Modifier.size(width = 16.dp, height = 16.dp) // 아이콘 사이즈 조절

        )
        Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) // 아이콘 뒤 얼만큼 띄울건지 기본값으로 설정
        Text(text = "Send")
    }

 
7. Padding 설정

@Stable
fun PaddingValues(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
): PaddingValues = PaddingValuesImpl(start, top, end, bottom)

// 각각 설정
contentPadding = PaddingValues(10.dp, 10.dp, 20.dp, 20.dp)

// 한번에 설정
contentPadding = PaddingValues(20.dp)