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

iOS, Swift

はじめに

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

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

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

Button

ButtonはUIKitのUIButtonに相当します。

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()borderedplainが用意されていますが、これらは自ら作成してカスタマイズすることもできます。

実際にButtonStyleを自作してみましょう。

configuration.isPressedでボタンをタップしている状態かどうかの判定をすることもできます。
実際にPreviewで確認してみましょう。

Preview2.png

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

Link

Linkは外部ブラウザを開く際に使用され、タップした時にアクションが起きるという観点からUIKitのUIButtonと同等の機能を備えているとも言えます。

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

Preview3.png

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

Preview4.png

ちなみにUIKitと同様にボタンのアクション内に外部ブラウザを開く処理を記載することでLinkと同じように遷移させることもできます。

さいごに

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

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

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

参考文献

apple documentation button

iOS, Swift