🎨

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

2022/10/30に公開

iOS

はじめに

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

上の例は次のように行います

var configuration = UIButton.Configuration.gray() //デフォルト設定の中の「灰色背景」
configuration.title = "サンプル" //文字
configuration.baseForegroundColor = UIColor.systemPink //文字色
let button = UIButton(configuration: configuration, primaryAction: nil)

背景色、文字、文字色を設定しています。

何が設定できるのか

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

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

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

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

UIButton.Configuration

これらの装飾を行えるものが 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"
    }
}

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

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() //灰色背景

通常は4つのstaticメソッドのうちのどれかを使うと思います。

.plain()
.gray()
.tinted()
.filled()

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

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

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

の2つがあります。

let configuration = UIButton.Configuration.plain()
let buttonA = UIButton(configuration: configuration) //UIButton作成時に渡す

let configuration = UIButton.Configuration.plain()
let buttonB = UIButton(type: .system)
buttonB.configuration = configuration //作成してあるUIButtonのconfigurationに代入

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

感想

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

button.configuration?.cornerStyle = .capsule

その2

参考

英語です。説明の順番は性質ごと（表示内容、空白、装飾）になってます。私の記事では対象ごと（タイトル、サブタイトル、イメージ）にしましたが。性質ごとの方がわかりやすい人はどうぞ。

チュートリアル形式