🎨

UIButton.Configuration 〜角の丸みもお手のもの

2022/10/30に公開約2,600字

はじめに

iOS15からUIButtonに外観の新しい設定方法が追加されました。従来よりも色々なことができるようになりました。次のように行います

var configuration = UIButton.Configuration.gray() //灰色背景
configuration.title = "Gray" //文字
configuration.baseForegroundColor = UIColor.systemPink //文字色
let button = UIButton(configuration: configuration, primaryAction: nil)

上の例では背景色、文字、文字色を設定しています。

何が設定できるのか

  • タイトル
  • サブタイトル
  • 画像
  • タイトルとサブタイトルの間隔
  • タイトルと画像の間隔

  • 画像の位置、タイトルに対して上、下、右、左
  • 周りのスペースの大きさ

  • 文字の色、サイズ
  • 背景色
  • ボーダー太さ、色
  • 角の丸み

上に挙げたのはすべてではありません。

UIButton.Configuration

これらの装飾を行えるものが UIButton.Configuration です。
https://developer.apple.com/documentation/uikit/uibutton/configuration
ちなみに Configuration はstructです。

状態による変化を指定する

「ボタンを押した」などの状態によってタイトルや配色を変化させるのは、状態変化時にクロージャを走らせます。クロージャはこのように書きます。

{ button in
    switch button.state {
    case [.selected, .highlighted]:
        button.configuration?.title = "Highlighted Selected"
    case .selected:
        button.configuration?.title = "Selected"
    case .highlighted:
        button.configuration?.title = "Highlighted"
    case .disabled:
        button.configuration?.title = "Disabled"
    default:
        button.configuration?.title = "Normal"
    }
}

状態変化のタイミングで上のクロージャを走らせるには、このクロージャを次のように設定します。

let handler: UIButton.ConfigurationUpdateHandler = { button in
    switch button.state {
	//個々の設定
    }
}
button.configurationUpdateHandler = handler

これはボタンを押したときにも走りますが、ソース上で isEnabled を設定したときにも走るので基本的な状態変化に対応しているようです。

configurationの作成とUIButtonの作成

UIButton.Configurationを作成するときはUIButton.Configurationのstaticメソッドで作成します。

var configuration = UIButton.Configuration.gray() //灰色背景
  • .plain()
  • .gray()
  • .tinted()
  • .filled()

があります。
それぞれの見た目はこんな感じになります。

作ったconfigurationをUIButtonに設定するには

  • UIButton作成時に渡す
  • 作成してあるUIButtonのUIButton.configurationに代入

の2つがあります。

let configuration = UIButton.Configuration.plain()

let buttonA = UIButton(configuration: configuration)

let buttonB = UIButton(type: .system)
buttonB.configuration = configuration

空のUIButton.Configurationを作成するもの(UIButton.Configuration()のようなもの)は見当たりません。

感想

iOS 7のときにボタンの基本スタイルが「文字だけ表示」になったが、輪郭がはっきり欲しい派にはアレな変更だった。今回、Fillなどの輪郭をはっきりできるスタイルが昇格(?)になったのでよかった。
カプセル型の輪郭が簡単に指定できるのはよい。

button.configuration?.cornerStyle = .capsule

Discussion

ログインするとコメントできます