[SwiftUI] Button の使い方

SwiftUI2021

     
⌛️ 3 min.
表示要素として基本要素となる Button について改めて説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 12.4 beta4
  • Xcode 13.3.1
  • iOS 15.4

Button

Button を使うと 名前の通り、ボタンのインターフェースを作成することができます。

Button

Button を作成するためには、以下の2種類の情報を指定することが必要です。

  • 押された時の動作 (action)
  • ボタンに表示される要素
    • SwiftUI の ビューで指定(Label)
    • ローカライズ可能な文字列で指定(LocalizedStringKey)

カッコ内の名称は、Initializer での引数名です。

Label

Labelを指定して Button を作成する方法です。
label に指定したビューを持つ Button が作成されます。(action には、空な closure を設定しています)


Button(action: {}, label: {
                Text("Button with Label")
})

上記のコードでは、以下のように、Text を表示要素として持つ Button が作成されます。

ButtonWithLabel

LocalizedStringKey

通常の文字列を与えるとそれは、言語設定に応じて適切な文字列に変換される LocalizedStringKey として扱われます。(ここでは特に 言語設定をしていないので、そのままの文字列が使われています。)


Button("Button with String", action: {} )

上記のコードでは、 “Button with String” という文字列が言語設定に応じて適切な文字列に変換されて表示要素になります。

ButtonWithString

実は、Text が受け取る文字列も LocalizedStringKey なので、label に Text で指定するものと同じ結果となっています。

シンプルな使い方

action と label もしくは、action と LocalizedStringKey を組み合わせることで簡単にボタンを作成することができます。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/05/10
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @State private var text = " - "
    var body: some View {
        VStack {
            
            Button(action: {
                text = "Button1 pushed"
            }, label: {
                Text("Button1")
            })
            .padding()
            Button("Button2", action: {
                text = "Button2 pushed"
            })
                .padding()
            Text(text)
                .padding()
        }
        .padding(30)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

上記のコードの動作は以下のようになります。

Container に入れられたButton

Button を Container (List や Menu) に入れると、Button は その状況に応じて表示を変化させます。

以下は、Apple のドキュメントに記載されているサンプルをベースにしています。


struct ContentView: View {
    let folders = ["Documents", "Downloads", "Recents"]
    var body: some View {
        List {
            ForEach(folders, id: \.self) { folder in
                Text(folder)
            }
            Button(action: {}) {
                Label("Add Folder", systemImage: "folder.badge.plus")
            }
        }
        .padding()
    }
}
ButtoninList

Button の表現が、リスト項目の表現に合わせられていることがわかります。

Button の role 指定

Button の意味合いを role という属性で設定することができます。

role の詳細は以下の記事を参照してください。
SwiftUI2021 [SwiftUI] Button の新しい属性 role

Button の style 指定

Button 向けにスタイルを指定するための View Modifier が用意されています。
.buttonStyle がそれです。

用意されているスタイルには、automatic, bordered, borderedProminent, borderless, card, link, plain があり、それぞれ以下のような指定になります。

スタイル名 意味 利用可能OS
automatic デフォルト(iOS は borderless になり macOS, tvOS, watchOS は、bordered) iOS, macOS, tvOS, watchOS, Mac Catalyst
bordered ボーダー付き iOS, macOS, tvOS, watchOS, Mac Catalyst
borderedProminent 目立つボーダー iOS, macOS, watchOS, Mac Catalyst
borderless ボーダーレス iOS, macOS, watchOS, Mac Catalyst
card フォーカスされたときに、エフェクトがつく tvOS
link リンク macOS
plain 押下など状態変化でエフェクトがつく iOS, macOS, tvOS, watchOS, Mac Catalyst

iOS/macOS でそれぞれ 以下のようになります。

StylesOniOS
StylesOnmacOS

実際に適用するには、以下のように記述します。以下は、bordered なスタイルを適用しています。


Button(action:{}, label:{Text("Push me!")})
.buttonStyle(.bordered)

Button のカスタマイズ

Picker や TextField 等のビュー と同じように、Button についても 独自の Style を定義してカスタマイズすることができ、そのためのベースとして、2種類の Style が用意されています。
ButtonStyle と PrimitiveButtonStyle がその2つです。

ButtonStyle は、(振る舞いは変更せずに)見た目だけ変更したいときにベースにする Style で、
PrimitiveButtonStyle は、見た目だけではなく振る舞いも変更するときにベースにする Style です。

まとめ

SwiftUI でボタン要素を作成するために用意されている Button を説明しました。

Button の使い方
  • action と label を指定して Button を作成する
  • action と LocalizedString の組み合わせでも作成できる
  • Container に入れられると適切な表示に変更される
  • Style を指定することで表示をカスタマイズできる
  • role を設定することで、ボタンの種類をユーザーに提示できる

下の記事では ButtonStyle を使って インジケータ表示付きの長押しするボタンを作りました。ButtonStyle を使ったカスタマイズ例です。
SwiftUI2021 [SwiftUI] インジケータ付き LongPress できる Button (ButtonStyle を使ったカスタマイズ)

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です