Jetpack ComposeのFABボタンの種類

# はじめに
Jetpack Composeには、マテリアルデザインのFAB(フローティングアクションボタン)の種類が4つ存在するので紹介していきます。
まず、FABとはアプリ内の主要な操作を行うことを目的とするボタンです。通常は画面の右下に固定され、ユーザーが最も一般的な経路で操作できるように設計されるべきです。例えばメモアプリの場合、タップすると新規メモを作成できるなどです。
Android Developersの記事を参考にしています。
![home.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/88a50f1e-b087-8887-f9ae-06d8137f1b6a.jpeg)


# ボタンを配置
Composable関数内に書くことでFABを配置できます。
基本どこにでも配置できるはずですが、例ではScaffoldのfloatingActionButtonに代入しています。
以下のようにすると、BottomAppBarを避けて画面右下に配置できます。
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingActionButtonView() {
    Scaffold(
        floatingActionButton = {
            // 普通のFAB
            FloatingActionButton(
                onClick = {}
            ) {
                Icon(Icons.Filled.Edit, "Floating ActionButton")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
        ) {

        }
    }
}
```

# FABの種類
### 普通サイズのFAB
Iconの引数であるimageVectorに他の値を渡すと、Iconを変更できます。
```kotlin
FloatingActionButton(
    onClick = {}
) {
    Icon(Icons.Filled.Edit, "Floating ActionButton")
}
```
![basic.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/6fd7089f-1abe-063c-bb77-e9ccbf92be00.jpeg)


### 小さいサイズのFAB
```kotlin
SmallFloatingActionButton(
    onClick = {}
) {
    Icon(Icons.Filled.Edit, "Small floating action button.")
}
```
![small.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/188cca12-e513-4688-cd68-6248d5b20462.jpeg)


### 大きいサイズのFAB
```kotlin
LargeFloatingActionButton(
    onClick = {}
) {
    Icon(Icons.Filled.Edit, "Large floating action button")
}
```
![big.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/48892d64-066a-4999-eafe-6d1489f50e4e.jpeg)


### 拡張FAB
引数にIconとTextを渡すことで、簡単にアイコンと文字が融合したFABを作ることができる。

```kotlin
ExtendedFloatingActionButton(
    onClick = {},
    icon = { Icon(Icons.Filled.Edit, contentDescription = "Extended Floating ActionButton") },
    text = { Text("Extended FAB") }
)
```
![e_fab.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/c009f6f8-27d7-7c2b-aae2-52adac03ffda.jpeg)

# APIサーフェス
以下の機能が用意されています。
・onClick
・containerColor
・contentColor
・shape　⭐おまけ

### onClick
引数としてonClickに以下のように書いて代入する。
そうすることでボタンをタップすると、代入した処理が実行される。
```kotlin
FloatingActionButton(
    onClick = {
        print("タップした。")
    }
) {
    Icon(Icons.Filled.Edit, "Floating ActionButton")
}
```
画像はsnackbarを表示させている。
![tap.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/5156aed6-2ac2-508e-646d-4f944032deda.jpeg)


### containerColor
引数としてcontainerColorに以下のように書いて代入する。
そうすることで背景色を変更することができる。
```kotlin
FloatingActionButton(
    onClick = {
        print("タップした。")
    },
    containerColor = Color.Green
) {
    Icon(Icons.Filled.Edit, "Floating ActionButton")
}
```
![green.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/99e09cd8-a1ca-7062-4c31-2d595b3d68c1.jpeg)

### contentColor
引数としてcontentColorに以下のように書いて代入する。
そうすることで、ボタンの中の要素の色を変更することができる。
```kotlin
FloatingActionButton(
    onClick = {
        print("タップした。")
    },
    contentColor = Color.Red
) {
    Icon(Icons.Filled.Edit, "Floating ActionButton")
}
```
![red.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/a23e396b-9d87-17a6-6e57-ebbe13ecf127.jpeg)

### shape
引数としてshapeにCircleShapeを代入する。
そうすることで、FABを丸くすることができる。
```kotlin
FloatingActionButton(
    onClick = {
        print("タップした。")
    },
    shape = CircleShape
) {
    Icon(Icons.Filled.Edit, "Floating ActionButton")
}
```
![circle.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3860584/db1eeef1-9f11-a3c8-5b6e-bde853f0b7ab.jpeg)

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

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