【SwiftUI】ボタンの基礎と使用方法

2024.04.16
SwiftUI
Button, SwiftUI

本記事では、SwiftUIでのボタンの配置方法とボタンをクリックした後に発生するイベントを設定する方法を解説していきます。また、ボタンに対して適用できるモディファイアもいくつかご紹介していきます。

1. ボタンの設置
2. ボタンクリック時のイベント
3. ボタンクリックで画像を変化させる
4. ボタンを装飾する
5. 最後に

ボタンの設置

まずはライブラリパネルからButtonをbody内に配置します。ButtonをVstack{}の記述の中にドラッグ&ドロップすればBtton用のソースコードが追加されます。

以下のソースコードは、Buttonをライブラリパネルから配置した直後の状態です。Button()の中に渡すパラメータは、ボタンとして表示する文字列を入れることができます。初期状態では、”Button”が入っているのでプレビューにButtonという要素が追加されていることが確認できます。

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Button") {
               Action
            }
        }
        .padding()
    }
}

ボタンクリック時のイベント

Btton(){}の{}内のActionの部分で、ボタンをクリックした際の動きを設定することができます。

ボタンクリックで、表示されている数字を加算する動きを実装してみます。

前準備として、画面に変化する数字を表示するための変数numberを定義し、Text()でテキストとして画面に表示します。

struct ContentView: View {
    @State var number = 0
    var body: some View {
        VStack {
            Text(String(number))
            Button("Button") {
                Action
            }
        }
        .padding()
    }
}

ボタンの表示はわかりやすいように”Button”から”加算”に変更しましょう！

では、Actionの中身を変更していきます。Buttonをクリックしたタイミングで変数numberに1を加算する処理を追加します。追加したコードは以下の通りです。

struct ContentView: View {
    @State var number = 0
    var body: some View {
        VStack {
            Text(String(number))
            Button("加算") {
                number += 1
            }
        }
        .padding()
    }
}

ボタンクリックで画像を変化させる

複数のシステム画像を準備してボタンクリックで表示する画像を変更するイベントを作成してみます。

システム画像はライブラリパネルの一番右のアイコンから一覧を確認することができます。

今回はこの中から6つのシステム画像を任意に選択し、配列の中に入れていきます。表示するのための画像の準備は完了です。

var imageNames = ["scribble","pencil.and.scribble","highlighter","pencil.and.outline","pencil.tip","pencil.tip.crop.circle"]

画像を表示するためにImage()オブジェクトを配置します。テキストは「0番目の画像」などと配列内の何番目の画像が表示されているかわかるように変更します。

配列から値を取り出すには、「配列名[インデックス番号]」という形で0から始まるインデックス番号を指定します。imageNames[number]と記載することによって、配列imgeNamesに入っている要素をnumberの値で指定することができます。

VStack {
            Text(String(number)+"番目の画像")
            Image(systemName: imageNames[number])
                .resizable()
                .frame(width: 100,height: 100)
            Button("加算") {
                number += 1
            }
        }

これでボタンクリックによって表示されるシステム画像を変更させる仕組みが実現できました。１回ボタンをクリックすることで、画像が配列の2つ目に指定しているシステム画像に変わり、テキスト表示も「0番目の画像」から「1番目の画像」に変わることが確認できます。

初期表示↓

一回ボタンをクリックした後↓

しかし、実はこのままでボタンをクリックし続けるとアプリケーションがクラッシュしてしまいます。原因はクリックを続けていくと、配列の中には6つの要素しかないにも関わらず、7つ目以降の要素を指定して画像を表示させようとしてしまうためです。

これは、もしnumberに入っている数値が配列imageNamesに入っている要素以上の値を指定しようとする場合には、numberを0に戻して配列imageNamesの先頭に入っている値を指定しなおさせてあげることで、解決することができます。ボタンクリック時に以下のコードを追加します。

Button("加算") {
      number += 1
      if imageNames.count <= number{
          number = 0
      }
}

配列imageNamesの要素の数を「.count」でカウントし、numberに入っている数字が要素数以上であればnumberを0にし、先頭の要素から表示しなおさせることができます。今回の例では要素数は6であり、先頭は0番目から数え始めるので0~5までの間は加算を行い、6だったら0に戻すという動きになります。

5回目のクリック↓

6回目のクリック↓

ボタンを装飾する

ここまでで紹介しているボタンは、文字が表示されるだけのボタンでしたので、修飾する方法を解説します。

ボタンは、画像などとほとんど同じような形でButton(){}の後ろにドットをつける形でデザインを変更していくことができます。

Button("加算") {
                number += 1
                if imageNames.count <= number{
                    number = 0
                }
            }
            .frame(width: 100, height: 30)
            .background(Color.blue)
            .foregroundColor(.white)
            .bold()
            .cornerRadius(30)

表示結果