Jetpack ComposeのButtonの種類

# はじめに
Jetpack Composeには、マテリアルデザインのボタンの種類が5つ存在するので紹介していきます。
Android Developersの記事を参考にしています。

![button.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/6352620f-38c3-53d8-0a5f-cd3310a8c256.jpeg)

# ボタンを配置
Composable関数内に書くことでボタンを配置できます。
```kotlin
@Composable
fun ButtonView() {
    Button(onClick = { }) {
        Text("Button")
    }
}
```

# Buttonの種類
### Button
primaryの色で塗りつぶされたボタンです。
メインの色なので濃いです。
```kotlin
Button(onClick = { }) {
    Text("Button")
}
```
![button 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/3817bc2f-1d1d-ff55-db47-d96902e18c44.jpeg)

### FilledTonalButton 
primaryContainerの色で塗りつぶされたボタンです。
メインの色を少し薄めた色になります。
```kotlin
FilledTonalButton(onClick = { }) {
    Text("FilledTonalButton")
}
```
![button 3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/e4c43c39-05e7-798f-a3bf-3f3a029216e6.jpeg)

### OutlinedButton
枠線付きのボタンです。
```kotlin
OutlinedButton(onClick = { }) {
    Text("OutlinedButton")
}
```
![button 4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/2773f828-c444-8319-75a4-e5aac8a26c2e.jpeg)

### ElevatedButton
ボタンが立体的になります。
```kotlin
ElevatedButton(onClick = { }) {
    Text("ElevatedButton")
}
```
![button 5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/886e4bad-d8ab-c403-dd27-d2515dac7580.jpeg)

### TextButton
テキストのみのボタンです。
```kotlin
TextButton(onClick = { }) {
    Text("TextButton")
}
```
![button 6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/2aeab813-6775-0e2d-8bf5-3f3c504ce922.jpeg)

# API サーフェス
以下の機能が用意されています。
・onClick
・enabled
・colors
・contentPadding

### onClick
引数としてonClickに以下のように書いて代入する。
そうすることでボタンをタップすると、代入した処理が実行される。
```kotlin
Button(
    onClick = { 
        print("タップした。")
    }
) {
    Text("Button")
}
```
画像はsnackbarを表示させている。
![tapped.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/db148172-7975-bf1a-ee97-316b99461592.jpeg)

### enabled
引数としてenabledにtrueを代入すると活性、falseを代入すると非活性となりボタンがグレーアウトし反応しなくなる。
```kotlin
Button(
    onClick = { 
        print("タップした。")
    },
    enabled = false
) {
    Text("Button")
}
```
画像はfalseの状態。
![enable.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/da5a6dd5-471b-9ba2-4d82-75bedde06abe.jpeg)

### colors
引数としてcolorsに、Composable関数のbuttonColorsをColorを指定して呼び出すことで、色を変えることができる。
```kotlin
Button(
    onClick = { 
        print("タップした。")
    },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Red,
        contentColor = Color.Black
    )
) {
    Text("Button")
}
```
画像は背景を赤、文字を黒で指定している。
![color.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/611a4874-894b-8a11-4720-0fc22190f2d7.jpeg)

### contentPadding
引数としてcontentPaddingに、Stable関数のPaddingValuesの引数に値を設定して代入することで、ボタン内のpaddingを設定できる。
```kotlin
Button(
    onClick = { 
        print("タップした。")
    },
    contentPadding = PaddingValues(32.dp)
) {
    Text("Button")
}
```
ハンバーグみたいになりました。
![padding.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/074d3235-fdc6-1cd4-81a6-2a38822c22ee.jpeg)

# 筆者が実装したソース
https://github.com/seyamasan/compose-view/tree/master

# 参考資料
https://developer.android.com/develop/ui/compose/components/button?hl=ja