【SwiftUI】Buttonの使い方

Buttonは、ユーザーがタップして何かをするの使う処理を記述するViewです。

環境
文字列のみのボタン
少し複雑なボタン
画像をボタンに使う場合の注意点
あわせて読みたい記事

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

文字列のみのボタン

文字列のみの簡単なボタンは次のように記述します。

Button("表示文字列") {

// タップされた時の処理を記述

}

次の例は、表示されているボタンをタップすると、デバッグエリアにメッセージを出力するものです。

struct ContentView: View {

var body: some View {

Button("タップしてね！") {

print("タップされました")

}

少し複雑なボタン

ボタンに画像を使うあるいは画像とテキストを組み合わせるような場合は、次にように記述します。

Button(action: {

// タップされた時の処理を記述

}) {

// ボタンを表すView並びを記述

}

「ボタンを表すView並びを記述」の箇所は、@ViewBuilderで定義されているので、複数のViewを並べて記述できます。
ここ記述されたViewは画面上横並びに配置されます。
VStack()等を使った、レイアウトの指定も可能です。

以下は、画像とテキストを組み合わせたボタンの例です。

struct ContentView: View {

var body: some View {

Button(action: {

print("タップされました")

}) {

Image(systemName: "play.circle") // システムアイコンを指定

Text("開始")

}

画像をボタンに使う場合の注意点

ボタンに指定された画像は通常タップ可能である事がわかるよう、SwiftUIによって青一色で表示されます。
オリジナルの色調で画像を表示したい場合は、次のModifierを追加します。

.renderingMode(.original)

使用例

struct ContentView: View {

var body: some View {

Button(action: {

print("スタートボタンが押された!")

}) {

Image("start_button") // スタートボタンの画像を指定

.renderingMode(.original) // オリジナル画像を表示

.resizable()

.scaledToFit()

.frame(width: 200, height: 200)

}

（使用したボタン素材は K-factoryさんにのものでイラストACからお借りしました）

あわせて読みたい記事

【SwiftUI】リファレンスマニュアルの読み解き

SwiftUIはUIKitに比べて比較的簡単なコードで記述が可能です。チュートリアルを進めるだけで、おおよそコードの書き方は理解できるのですが、いざリファレンスマニュアルを読んでいくと、予想外の構文が並んでいて戸惑ったので、改めて解読して...

【Swift】print文の使い方

print文は式の値を標準出力に書き出す関数で、引数の値を文字列に変換して出力する事ができます。主にプログラムの動作確認やデバッグに使用します。Xcodeではprint文で出力した文字列は、デバッグエリアのコンソールウィンドウに表示され...

【SwiftUI】画像（Image）の使い方

SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。