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

SwiftUI

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

ボタンのカスタマイズ

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

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

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

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

ButtonStyle

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

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

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

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

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

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

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

見た目をカスタマイズ

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

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

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

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

MyButtonStyle カスタマイズ例

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

カスタムButtonStyle 使用例

「カスタムButtonStyle 使用例」
上記のアプリのコードは、以下です。(ButtonStyle 定義も含まれています)

アプリコード

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

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

コメントを残す

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