[SwiftUI] Button の見た目カスタマイズ ButtonStyle の使い方

ボタンの見た目をカスタマイズするときに使う ButtonStyle の使い方を説明します。

Sponsor Link

ボタンのカスタマイズ
ButtonStyle
- 見た目をカスタマイズ
まとめ：Button のカスタマイズ方法 (ButtonStyle を使ったカスタマイズ方法)

ボタンのカスタマイズ

ボタンをカスタマイズしようとする時に、大きく２種類のカスタマイズが考えられます。

ボタンの見た目をカスタマイズする　（例：枠をつける）
ボタンの振る舞いをカスタマイズする (例：押されると回転するボタン）

どちらのカスタマイズも、SwiftUI では、.buttonStyle という modifier を使って行うことができるようになってます。

今回は、見た目のカスタマイズを .buttonStyle を使って行う方法を説明します。

ButtonStyle

ボタンの見た目をカスタマイズしたい時に使う ButtonStyle は、名前そのままですが、ButtonStyle という protocol に準拠したものを作ってカスタマイズします。

Apple のドキュメントは、こちら。

以下は、iOS 上でデフォルトのスタイルと”ほとんど”同じスタイルになるように作ったスタイルです。

MyButtonStyle ほとんどデフォルト


struct MyButtonStyle: ButtonStyle {
    // (1)
    func makeBody(configuration: Configuration) -> some View {
        MyButton(configuration:configuration)
    }
    // (2)
    struct MyButton: View {
        // (2)
        @Environment(\.isEnabled) var isEnabled
        let configuration: MyButtonStyle.Configuration
        var body: some View {
            // (3)
            configuration.label
                // (4)
                .foregroundColor(isEnabled ? .blue : .gray)
                // (5)
                .opacity(configuration.isPressed ? 0.2 : 1.0)
        }
    }
}

struct MyButtonStyle: ButtonStyle {

// (1)

func makeBody(configuration: Configuration) -> some View {

MyButton(configuration:configuration)

}

// (2)

struct MyButton: View {

// (2)

@Environment(\.isEnabled) var isEnabled

let configuration: MyButtonStyle.Configuration

var body: some View {

// (3)

configuration.label

// (4)

.foregroundColor(isEnabled ? .blue : .gray)

// (5)

.opacity(configuration.isPressed ? 0.2 : 1.0)

}

コード解説

makeBody というメソッドを持つことが、ButtonStyle という protocol が要求していることです。ここでは、MyButton という View を返しています。
ボタンが Enable かどうかの情報は、@Environment から取得して判断に使うことができます。ButtonStyle の中からは参照できないため、独自の View を作りその中から参照しています。
makeBody の引数 configuration の label に、与えられたラベルの情報が入っています
Enable かどうかで、フォアグランドカラーを blue と gray で切り替えています
クリックされているかどうかの情報は、configuration.isPressed に入っていて、その情報によって、透明度(Opacity) を変更しています

このように、状態に応じた色や表示する要素等を指定して作っていくことでボタンの見た目をカスタマイズすることができます。

makeBody が返すのは、View であれば良いので、configuration に含まれる label を使わずに、全く別の View を返すことも可能です。

＃”ほとんど”同じと言っているのは、クリックされた時のラベルの色がどのくらい透明(Opacity)になっているかの資料が見つからなかったので、目分量で設定しているためです。

見た目をカスタマイズ

ここまでできれば、あとは、 SwiftUI のコンポーネントや modifier の知識を使うだけです。

角の丸い長方形を背景に持つボタンを作るには、以下のような ButtnStyle を定義して、適用すれば良いです。

フォアグランド色は、ボタンがEnable であれば .blue、Disable であれば .gray
バックグラウンドは、角のＲが１０の長方形
バックグラウンド色は、ボタンがEnable であれば .red.opacity(0.4)、Disable であれば、.white
ボタンが押されたら、フォアグランドの opacity を 0.2 にする

上記のようなスタイルを作るには、、以下のように定義して、そのスタイルをボタンに .buttonStyle 指定すれば良いことになります。

MyButtonStyle カスタマイズ例


struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        MyButton(configuration:configuration)
    }
    
    struct MyButton: View {
        @Environment(\.isEnabled) var isEnabled
        let configuration: MyButtonStyle.Configuration
        var body: some View {
            configuration.label
                .foregroundColor(isEnabled ? .blue : .gray)
                .opacity(configuration.isPressed ? 0.2 : 1.0)
                .padding(15)
                .background(isEnabled ? Color.red.opacity(0.4) : Color.white)
                .cornerRadius(10)
        }
    }
}

struct MyButtonStyle: ButtonStyle {

func makeBody(configuration: Configuration) -> some View {

MyButton(configuration:configuration)

}

struct MyButton: View {

@Environment(\.isEnabled) var isEnabled

let configuration: MyButtonStyle.Configuration

var body: some View {

configuration.label

.foregroundColor(isEnabled ? .blue : .gray)

.opacity(configuration.isPressed ? 0.2 : 1.0)

.padding(15)

.background(isEnabled ? Color.red.opacity(0.4) : Color.white)

.cornerRadius(10)

}

実際に配置すると、以下のような見た目になります。

「カスタムButtonStyle 使用例」

上記のアプリのコードは、以下です。（ButtonStyle 定義も含まれています）

アプリコード


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2020/11/13
//  © 2020  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    @State private var buttonDisabled:Bool = false
    var body: some View {
        VStack {
            Spacer()
            Button(action: {print("Hello")}, label: {
                Text("MyButton")
            })
            .buttonStyle(MyButtonStyle())
            .disabled(buttonDisabled)
            .padding()
            
            Spacer()
            
            Button(action: { buttonDisabled.toggle()  }, label: {
                Text("Toggle Button disable/enable")
            })
            .padding()
            Spacer()
        }
    }
}

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

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        MyButton(configuration:configuration)
    }
    
    struct MyButton: View {
        @Environment(\.isEnabled) var isEnabled
        let configuration: MyButtonStyle.Configuration
        var body: some View {
            configuration.label
                .foregroundColor(isEnabled ? .blue : .gray)
                .opacity(configuration.isPressed ? 0.2 : 1.0)
                .padding(15)
                .background(isEnabled ? Color.red.opacity(0.4) : Color.white)
                .cornerRadius(10)
        }
    }
}

// ContentView.swift

// Created by : Tomoaki Yagishita on 2020/11/13

import SwiftUI

struct ContentView: View {

@State private var buttonDisabled:Bool = false

var body: some View {

VStack {

Spacer()

Button(action: {print("Hello")}, label: {

Text("MyButton")

})

.buttonStyle(MyButtonStyle())

.disabled(buttonDisabled)

.padding()

Spacer()

Button(action: { buttonDisabled.toggle() }, label: {

Text("Toggle Button disable/enable")

})

.padding()

Spacer()

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

struct MyButtonStyle: ButtonStyle {

func makeBody(configuration: Configuration) -> some View {

MyButton(configuration:configuration)

}

struct MyButton: View {

@Environment(\.isEnabled) var isEnabled

let configuration: MyButtonStyle.Configuration

var body: some View {

configuration.label

.foregroundColor(isEnabled ? .blue : .gray)

.opacity(configuration.isPressed ? 0.2 : 1.0)

.padding(15)

.background(isEnabled ? Color.red.opacity(0.4) : Color.white)

.cornerRadius(10)

}

まとめ：Button のカスタマイズ方法 (ButtonStyle を使ったカスタマイズ方法)

Button のカスタマイズ方法 (ButtonStyle を使ったカスタマイズ方法)

ButtonStyle に準拠したスタイルを定義することで、スタイルをカスタマイズできる
ButtonStyle protocol に準拠するためには、makeBody を実装する必要がある
makeBody の返す View が、ボタンとして表示される
makeBody の引数 configuration にラベル等のボタン定義時の情報が渡される

Sponsor Link

4 COMMENTS

佐々木 2021-04-03

こちらがまだ初心者なんですが、上記のコードを実行したら、下記のエラーは発生しましたが、
お心当たり、何かありませんか。
cannot find type ‘Configuration’ in scope
—————————————-
40:34: error: cannot find type ‘Configuration’ in scope
func makeBody(configuration: Configuration) -> some View {
^~~~~~~~~~~~~
46:42: error: ‘Configuration’ is not a member type of ‘MyButtonStyle’
let configuration: MyButtonStyle.Configuration
~~~~~~~~~~~~~ ^
39:8: error: inheritance from non-protocol type ‘ButtonStyle’
struct MyButtonStyle: ButtonStyle {
^
18:14: error: no exact matches in call to instance method ‘buttonStyle’
.buttonStyle(MyButtonStyle())
^

確認環境
——
macOS 10.15.7
xcode 12.3
swift 5.3