【SwiftUI】 UIコンポーネントの作成方法 Button編

iOS, Swift

この記事は最終更新日から1年以上が経過しています。

はじめに

こんにちは、iOSアプリ開発グループの神山です。

SwiftUIについて絶賛勉強中なのですが、今回はButtonに関連するUIコンポーネントの作り方についてまとめてみました。

具体的には以下のコンポーネントについてご紹介していきます。
1. Button
2. Link

Button

ButtonはUIKitのUIButtonに相当します。
struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Button("ボタン") {
                print("タップ時のアクション")
            }
 
            Button {
                print("タップ時のアクション")
            } label: {
                Image(systemName: "trash")
                Text("ボタン2")
            }
 
            Button {
                print("タップ時のアクション")
            } label: {
                Label("ボタン3", systemImage: "mic")
            }
        }
    }
}

Buttonはタイトルとタップした際のアクションを設定することでコンポーネントを生成することができます。 init(action: () ->; Void, label: () ->; Label)を使用することでタイトルに文字列だけでなく画像を使用することもできます。

上記のコードをPreviewで確認すると以下のように表示することができました。

Preview1.png

Modifier

Buttonの主なModifierについてご紹介します。

  • overlay() ビューを重ねる
Rectangle RoundedRectangle(cornerRadius:) Capsule
Rectangle.png RoundedRectangle.png Capsule.png
  • buttonStyle() ボタンのスタイルを指定
automatic plain bordered borderless borderedProminent
Automatic.png Plain.png Bordered.png Borderless.png BorderedProminent.png

Buttonのカスタマイズ

デフォルトではModifierの buttonStyle()に borderedや plainが用意されていますが、これらは自ら作成してカスタマイズすることもできます。

実際にButtonStyleを自作してみましょう。
struct SampleButtonStyle: ButtonStyle {
    let color: Color
 
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .font(.title2)
            .background(color)
            .foregroundColor(.white)
            .clipShape(Capsule())
            .scaleEffect(configuration.isPressed ? 0.9 : 1)
    }
}

configuration.isPressedでボタンをタップしている状態かどうかの判定をすることもできます。
実際にPreviewで確認してみましょう。
struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Button("ボタン2") {
                print("タップ時のアクション")
            }
            .buttonStyle(SampleButtonStyle(color: .green))
 
            Button("ボタン2") {
                print("タップ時のアクション")
            }
            .buttonStyle(SampleButtonStyle(color: .red))
 
            Button("ボタン3") {
                print("タップ時のアクション")
            }
            .buttonStyle(SampleButtonStyle(color: .blue))
        }
    }
}

Preview2.png

これで複数のボタンでスタイルの共通化を行うことができるようになりました。

Link

Linkは外部ブラウザを開く際に使用され、タップした時にアクションが起きるという観点からUIKitのUIButtonと同等の機能を備えているとも言えます。
struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Link("apple.comを開く", destination: URL(string: "https://www.apple.com")!)
        }
    }
}

上記のコードを確認しますと以下のように表示され、タップすることでブラウザに遷移することが確認できました。

Preview3.png

Modifierで buttonStyle()も適用させることができました。先ほどの SampleButtonStyleを適用させると以下のようになりました。

Preview4.png

ちなみにUIKitと同様にボタンのアクション内に外部ブラウザを開く処理を記載することでLinkと同じように遷移させることもできます。
struct ContentView: View {
    var body: some View {
        VStack {
            Button("ボタン") {
                UIApplication.shared.open(URL(string: "https://www.apple.com")!)
            }
 
            Link("apple.comを開く", destination: URL(string: "https://www.apple.com")!)
        }
    }
}

さいごに

UIKitと比較してButtonやLinkは、タップした際のアクションもまとめて記載することができるのでとても便利ですね。

LinkについてはiOS14以降でしか使えないなどの制限がありますが、使用できる場合には積極的に使っていこうと思います。

最後まで記事を読んで頂き、ありがとうございました。

参考文献

apple documentation button

iOS, Swift