Buttonは、ユーザーがタップして何かをするの使う処理を記述するViewです。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
文字列のみのボタン
文字列のみの簡単なボタンは次のように記述します。
|
1 2 3 4 5 |
Button("表示文字列") { // タップされた時の処理を記述 } |
次の例は、表示されているボタンをタップすると、デバッグエリアにメッセージを出力するものです。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { Button("タップしてね！") { print("タップされました") } } } |
少し複雑なボタン
ボタンに画像を使うあるいは画像とテキストを組み合わせるような場合は、次にように記述します。
|
1 2 3 4 5 6 7 |
Button(action: { // タップされた時の処理を記述 }) { // ボタンを表すView並びを記述 } |
「ボタンを表すView並びを記述」の箇所は、@ViewBuilderで定義されているので、複数のViewを並べて記述できます。
ここ記述されたViewは画面上横並びに配置されます。
VStack()等を使った、レイアウトの指定も可能です。
以下は、画像とテキストを組み合わせたボタンの例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
struct ContentView: View { var body: some View { Button(action: { print("タップされました") }) { Image(systemName: "play.circle") // システムアイコンを指定 Text("開始") } } } |
画像をボタンに使う場合の注意点
ボタンに指定された画像は通常タップ可能である事がわかるよう、SwiftUIによって青一色で表示されます。
オリジナルの色調で画像を表示したい場合は、次のModifierを追加します。
|
1 2 3 |
.renderingMode(.original) |
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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】Toggleの使い方
ON/OFF状態を切り替えるToggleの使い方を解説します。
capibara1969.com
2020.08.08
【SwiftUI】Stepperの使い方
Stepperの使い方を紹介します。［-］と［+］ののボタンで値を増減するタイプの部品です。
capibara1969.com
2020.03.28
【SwiftUI】画像（Image）の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
capibara1969.com
2020.02.22
