概要
SwiftUIのモディファイアについて、簡単にまとめます
モディファイアとは
そもそもModifireの意味から見ていきましょう
Modifire
- 変更[修正]する人[物]
- 修飾子
そんで、SwiftUIのモディファイアとは。
Text()やButton()、VStackなどのView構造体に対して、外観や動作を変化・変更させる修飾子です。
英単語の意味する通りですね。
具体的には以下のようにViewに対してチェーン形式（.で繋げること）で適用している.paddingや.backgroundを指します。
Text("Hello, SwiftUI!")
.padding()
.background(Color.blue)
代表的なモディファイア
-
padding: 内側の余白を追加する -
background: 背景色を設定する -
cornerRadius: 角を丸くする -
font: フォントサイズやスタイルを設定 -
foregroundColor: テキストの色を設定 -
frame: ビューの幅・高さを設定 -
onTapGesture: タップジェスチャーを検知
もちろんもっと沢山ありますので、沢山使って慣れていきたいです。
モディファイアを使ううえでの注意点
モディファイアは適用順に処理されます。
以下をご覧ください。
var body: some View {
VStack{
Text("Text1")
.background(.gray)
.frame(width: 200, height: 200)
Text("Text２")
.frame(width: 200, height: 200)
.background(.gray)
}
}
コードだけを見るとbackground(.gray)の順番が変わっただけで同じ結果になるようにも感じますよね。
実行結果を見てみましょう。
ご覧の通り、背景色のついている範囲が異なります。
Text1はTextに.backgroundで背景色をつけた後に、200x200の.frameを指定していますので、あくまで背景色が付けられたのは元のTextのサイズに対してになります。
Text2は200x200にサイズ指定された.frameに対して.backgroundを指定していますから、200x200のサイズに背景色がつきます。
参考までに
Text1のframe指定後にもbackgroundカラーを指定すると、その対象範囲がわかりやすいです。
Text("Text1")
.background(.gray)
.frame(width: 100, height: 100)
.background(.red)
カスタムモディファイア
モディファイアは自作することも可能です。
Viewプロトコルを拡張し、Viewを返す関数を定義することで、それがカスタムモディファイアとなります。
例えば、APP内で共通のデザインとして
「上下左右10ptの余白をつけて、背景色は黄色、背景の角は10pt丸める」
というものがあるとします。
その場合以下のように自作することができます。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("カスタムモディファイア")
.commonBackground() // カスタムモディファイアの適用
}
}
// Viewプロトコルのextension内で、Viewを返す関数を定義
extension View {
func commonBackground() -> some View {
self
.padding(10)
.background(Color.yellow)
.cornerRadius(10)
}
}
こうすることで、自作のカスタムモディファイアもチェーンで繋げて使用することができます。
カスタムモディファイアの正体が関数である以上、引数も取れるわけなので、Bool型によってモディファイアのちょっとした制御なんかもできます。
モディファイアによって共通のデザインやロジックをまとめられるので、再利用性が高まり、より完結なビュー設計やコードの記述が可能になります。
まとめ
かなり簡単に自作もできることがわかりましたので、活用していきたいですね。
APP内での統一されたデザインを提供するのにもやくだちそうです
また、SwiftUIが既に提供しているモディファイアにももっと種類があるので、沢山使って慣れていきたいです。