GIDSignInButton の見た目と状態のカスタマイズ - GoogleSignInSwift の場合 - 

前回、以下の記事を書いたのですが、書いた後に GoogleSignInSwift という Product があることを認識しました。

https://qiita.com/kamimi01/items/ffa865390e5868bc4594

GoogleSignIn は Objective-C x UIKit で実装されているのに対し、
GoogleSignInSwift は Swift x SwiftUI で実装されています。

また、カスタマイズのためのプロパティも後者の方が１個増えてたので、GoogleSignInSwift 版の記事も書いてみるか、と思い立ちました。

# 環境

- Xcode 13.4.1
- Firebase 9.0.0
- GoogleSignin 6.0.0 の GoogleSignInSwift（**GoogleSignではない方**）
- iPhone 13 (15.5) Simulator：ライトモード

# カスタマイズ可能な部分

`GIDSignInButton`クラスのコードを確認したところ、そのクラスから提供されているカスタマイズ可能なプロパティは、以下３つです。（プロパティ名は違えど、最初の2つは GoogleSignIn と同じで、 最後が新しく追加されたもの）

- `GoogleSignInButtonStyle`：レイアウトのスタイル
- `GoogleSignInButtonColorScheme`：カラースキーム
- `GoogleSignInButtonState`：状態 → 🆕

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/f089017c-ff9d-cd88-45aa-9b74d78bf6fa.png)

## レイアウトのスタイル

現時点で定義されているタイプは、以下の３つになります。（GoogleSignIn の Product と変わらない）

- `standard`：表示テキストは「Sign in」
- `wide`：表示テキストは「Sign in with Google」
- `icon`：アイコンのみ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/5e2c06c3-6f7b-c517-f994-4b9add0acfd0.png)

|`standard`|`wide`|`icon`|
|---|---|---|
|![Simulator Screen Shot - iPhone 13 - 2022-08-21 at 18.14.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/d04eb66d-28da-d38d-7539-ca49e6aec3be.png)|![Simulator Screen Shot - iPhone 13 - 2022-08-21 at 18.15.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/90e1e04b-d192-4da9-d397-d4ced2409833.png)|![Simulator Screen Shot - iPhone 13 - 2022-08-21 at 18.16.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/a857d262-f003-5a22-84e0-2514662bf10f.png)|

## カラースキーム

現時点で定義されているタイプは、以下の2つになります。（GoogleSignIn の Product と変わらない）

- `dark`：ダーク →という名前だけど色は青
- `light`：ライト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/b7989415-3b03-d32a-cbf7-34d1cf0cbfe6.png)

|`dark`|`light`|
|---|---|
|![Simulator Screen Shot - iPhone 13 - 2022-08-21 at 18.18.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/56a4958b-8cb4-24fb-07fd-e521a7407873.png)|![Simulator Screen Shot - iPhone 13 - 2022-08-21 at 18.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/228410c0-f937-5aad-d64a-c1914f315377.png)|

## 状態

これは GoogleSignInSwift になって新しく追加されたプロパティです。
現時点で定義されているタイプは、以下の３つになります。

以下は`GoogleSignInButtonColorScheme`が`.light`だったときの話になります。
想像できるとは思うのですが、ボタンのUIは、`GoogleSignInButtonState`と`GoogleSignInButtonColorScheme`の組み合わせによって変わりますので、`dark`の時はまた違ったUIになります。ただボタンが押下可能か、といったアクション部分は変わりないのではと思います。（ちゃんと検証したわけではないですが、、）

- `normal`:白いUIで、押下可能でGoogleでサインインするためのアラート画面が表示される
- `disabled`:ボタン押下不可
- `pressed`:押された状態のUI（薄いグレー）になっているが、押下可能でGoogleでサインインするためのアラート画面が表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/25d8597a-40ce-f3f0-36cd-65de2193cf48.png)

|`normal`|`disabled`|`pressed`|
|---|---|---|
|![app.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401966/c767a610-3a54-eb28-0bc9-b2ad30a4b0f9.gif)|![app](https://user-images.githubusercontent.com/47489629/185784945-27930eea-35a0-404d-bcb5-0db6c959e657.gif)|![app](https://user-images.githubusercontent.com/47489629/185784980-30c03e9f-e1f1-4375-b8c3-c2170b3c1519.gif)|

# コード

GoogleSignInSwift の場合は、UIViewRepresentable に準拠した実装は不要になります。

```swift
import SwiftUI
import GoogleSignInSwift

struct SignInView: View {
    var body: some View {
        GoogleSignInButton(scheme: .light, style: .standard, state: .normal) {
            // do something
        }
    }
}
```

# おわりに

簡単すぎるせいかわからないですが、あまり `GoogleSignInSwift`についての記事が見当たらなかったので、書いてみました。

どなたかのお役に立てば幸いです。そして何か間違い等ありましたら、ご指摘いただけますと嬉しいです。 :blush: