JetpackCompose Buttonサンプル

# JetpackComposeのButtonサンプル

## MaterialTheme
<details><summary>前提として、使用しているThemeはこちらです</summary><div>

```kotlin
package com.jozu.jetpack.compose.tutorial.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color(0xFF000401),
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color(0xFFFFFBFE),
)

@Composable
fun ComposeTutorialTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}
```
　
</div></details>

## Filled button
![buttonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/92f57052-cbd0-2f08-de4f-b2de8702fde5.png)![buttonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/e0796439-2369-907d-f5b3-f133f3d02f63.png)
```kotlin
Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(),
) {
    Text("ButtonDefaults.buttonColors")
}
```

## Elevated button
![elevatedButtonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/528698b3-8abc-17b2-9c6b-9e2d26937d9c.png)![elevatedButtonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/21451af2-d251-870e-6558-081e5b2d53a1.png)
```kotlin
Button(
    onClick = {},
    elevation = ButtonDefaults.buttonElevation(
        defaultElevation = 10.dp,
        pressedElevation = 15.dp,
        disabledElevation = 0.dp,
    ),
    colors = ButtonDefaults.elevatedButtonColors(),
) {
    Text("ButtonDefaults.elevatedButtonColors")
}
```

## Filled tonal button
![filledTonalButtonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/9a3253d8-efe7-d615-65c1-746eed5ad845.png)![filledTonalButtonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/57a8a431-235d-9ada-66e9-773ecc84ae35.png)
```kotlin
Button(
    onClick = {},
    colors = ButtonDefaults.filledTonalButtonColors(),
) {
    Text("ButtonDefaults.filledTonalButtonColors")
}
```

## Outlined button
![outlinedButtonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/29e0efe8-d828-b740-c455-b5cd234510d9.png)![outlinedButtonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/3a37377b-94bd-86d6-93bb-d8f2aff08e21.png)
```kotlin
Button(
    onClick = {},
    border = BorderStroke(2.dp, MaterialTheme.colorScheme.primary),
    colors = ButtonDefaults.outlinedButtonColors(),
) {
    Text("ButtonDefaults.outlinedButtonColors")
}
```

## Text button
![textButtonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/f62150eb-c708-064e-4437-07a174536936.png)![textButtonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/2dcf8985-864d-7688-2056-17da56136bc2.png)
```kotlin
Button(
    onClick = {},
    colors = ButtonDefaults.textButtonColors(),
) {
    Text("ButtonDefaults.textButtonColors")
}
```

## 色を直接指定する場合
![customButtonColors_enabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/841a6a5e-5485-dae2-01eb-0fc4fc0ea74d.png)![customButtonColors_disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/c372b578-b953-a6a9-a22d-53874f42448d.png)
```kotlin
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Red,
        contentColor = Color.Green,
        disabledContentColor = Color.DarkGray,
        disabledContainerColor = Color.LightGray,
    ),
) {
    Text("ButtonDefaults.buttonColors")
}
```

## 角丸ボタン（左右に平らな部分なし）
![customShapeRounded50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/6c21808c-1d3c-2e3c-7b20-a9cbf0993e9c.png)
```kotlin
Button(
    onClick = {},
    shape = RoundedCornerShape(percent = 50),
) {
    Text("RoundedCornerShape(percent = 50)")
}
```

## 角丸ボタン（左右に平らな部分あり）
![customShapeRoundedSize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/106b4a68-f29b-02b6-78ba-9d149006754c.png)
```kotlin
// ％指定
Button(
    onClick = {},
    shape = RoundedCornerShape(percent = 10),
) {
    Text("RoundedCornerShape(percent = 10)")
}

// dp指定
Button(
    onClick = {},
    shape = RoundedCornerShape(size = 10.dp),
) {
    Text("RoundedCornerShape(size = 10.dp)")
}
```

## 角カットボタン
![customShapeCutCorners.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/fdabcbd6-3bb7-af00-b4ce-bcb4bf30af1c.png)
```kotlin
// ％指定
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = CutCornerShape(percent = 10),
) {
    Text("CutCornerShape(percent = 10)")
}

// dp指定
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = CutCornerShape(size = 4.dp),
) {
    Text("CutCornerShape(size = 4.dp)")
}
```

## ShapeをPathで指定
![customShapeGenericShape.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/ab077a2b-f1b0-6365-ffcf-554c74314ee4.png)
```kotlin
// 三角
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = GenericShape { size, layoutDirection ->
        moveTo(size.width / 2f, 0f)
        lineTo(size.width, size.height)
        lineTo(0f, size.height)
    },
) {
    Text("GenericShape")
}
```

## ダウンロードした画像を角丸にしてボタンにする
[Coil](https://coil-kt.github.io/coil/compose/)を使用します。
Coilは、ネット上の画像をダウンロードして表示してくれるライブラリです。自動でキャッシュも行ってくれます。
![arron.png](https://raw.githubusercontent.com/jozuko/ComposeTutorial/main/image/arron.png)
この画像(我が家のわんこです)を使用して
![image_button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3491965/f99ddc1d-7f21-aa68-5b87-5a82f64553df.png)
こんな感じのボタンにするコードです。
Rippleも白で入れています。

```gradle
implementation("io.coil-kt:coil-compose:2.4.0")
```
```kotlin
    AsyncImage(
        modifier = Modifier
            .size(width = 300.dp, height = 100.dp)
            .clip(RoundedCornerShape(percent = 10))
            .clickable(
                indication = rememberRipple(color = Color.White),
                interactionSource = remember { MutableInteractionSource() },
                onClick = {
                    coroutineScope.launch {
                        snackbarHostState.showSnackbar("犬種はバーニーズです")
                    }
                }
            ),
        model = "https://raw.githubusercontent.com/jozuko/ComposeTutorial/main/image/arron.png",
        contentDescription = null,
        contentScale = ContentScale.Crop,
    )
```