UIButton.Configuration その1 〜角の丸みもお手のもの
はじめに
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
参考
英語です。説明の順番は性質ごと(表示内容、空白、装飾)になってます。私の記事では対象ごと(タイトル、サブタイトル、イメージ)にしましたが。性質ごとの方がわかりやすい人はどうぞ。
チュートリアル形式
Discussion