「 SwiftUIで画面デザインを綺麗にしたい… 」
「 SwiftUIをこれから学ぼうと思っている… 」
今回は、SwiftUIでViewに様々な装飾を加えることができる必須の機能、modifier(モディファイア)について学んでいきましょう。
modifier(モディファイア)って一体何なの？という所の解説に加えて、モディファイアの中でも特によく使われる基本的なものをいくつかご紹介します。
CodeCandyが主催しているYouTubeライブでは、modifier(モディファイア)についてさらに詳しく解説してくれています。本記事の最後に載せていますので、ぜひそちらもご覧ください
[ 本記事はこんな人におすすめ ]
・SwiftUIをこれから学ぶ
・SwiftUIでの画面デザインの方法を知りたい
・よく使われるモディファイアの種類を知りたい
環境・バージョン
> Swift 5.7.2
> Xcode 14.2
> macOS 12.5 Monterey
モディファイアは、SwiftUIがもつ画面デザインを構築するための機能です。
モディファイアを使用することで、対象のViewパーツに様々な変更を加えることができます。モディファイアには多種の種類があり、それぞれ異なるユニークな機能を持ちます。
「.」(ドット)から始まるコードをパーツの直下に並べることで、
「文字色」「余白」「背景」それぞれの設定がモディファイアによって追加されていることがわかります。
コードをパッと目で見て、コード内の記述と実際の画面表示が一致しやすいのはSwiftUIの良い点と言えますね。
1-1 変化したViewを渡す
前項目の例では、３つのモディファイアがViewパーツに設定されていました。
struct ContentView: View {
var body: some View {
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white) // 文字色
.padding() // 余白
.background(Color.orange) // 背景色
}
}
これらのモディファイアは、上から下へ順番に変更が適用されていきます。
対象のViewを上から受け取り、Viewに変更を加えた後、下の項目にViewを渡す、バケツリレーのような流れのイメージです。
1-2 書く順番が重要
モディファイアは、バケツリレーのような方式で、上から下へViewを変更して渡していくという解説をしました。
ここで重要なのが、各モディファイアの記述する順番によって、Viewの変更結果に違いが発生するということです。
例の左図と右図では「padding(余白)」の記述位置が違います。これによって、Viewの変更結果に違いが出ていることがわかります。
ホームページ制作で主に使われるCSSなどでは、記述された各設定を合算して適用する(左図でも右図でも結果は同じ)のに対して、SwiftUIのモディファイアは、
「上項目の結果を入力として変更を加え、下項目へ結果を渡す」という特徴があります。
記述順番によって結果に違いが出るということを留意しておきましょう。
2. 基本的なモディファイアの紹介
2-1 padding(パディング) : 余白
paddingモディファイアは、対象Viewの「余白」を調整する機能です。
「対象Viewの周辺の余白を調整する」と考えるとイメージしやすいです。
struct ContentView: View {
var body: some View {
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white)
.padding() // ⬅︎ 余白を指定
.background(Color.orange)
}
}
padding無し
padding有り
サイズを数値で指定
paddingの引数に数値を設定することで余白サイズを調整できます。
「padding()」と()に数値の指定がない場合は、デフォルトで10ポイントの余白が作られます。
struct ContentView: View {
var body: some View {
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white)
.padding(50) // ⬅︎数値50を指定
.background(Color.orange)
}
}
padding()
padding(50)
余白の各辺をデフォルトで指定
paddingはデフォルトで上下左右全てに余白を追加しますが、引数で辺の指定を与えることで、任意の辺に余白を追加することができます。
いくつか同じ条件のViewを並べて、違いを見てみましょう。
VStackで囲ってViewを縦に並べます。
struct ContentView: View {
var body: some View {
VStack(spacing: 30) {
Text("アプリ開発を頑張る！(.top)")
.foregroundColor(Color.white)
.padding(.top) // ⬅︎
.background(Color.orange)
Text("②アプリ開発を頑張る！(.bottom)")
.foregroundColor(Color.white)
.padding(.bottom) // ⬅︎
.background(Color.orange)
Text("③アプリ開発を頑張る！(.horizontal)")
.foregroundColor(Color.white)
.padding(.horizontal) // ⬅︎
.background(Color.orange)
} // VStack
}
}
2-2 border(ボーダー) : 線、縁取り
対象Viewがもつ描画範囲にボーダーラインを引くことができるモディファイアです。線、縁取りといった意味を持ちます。
borderの引数に「Color(ラインの色)」、「width(ラインの太さ)」の２つを指定します。
struct ContentView: View {
var body: some View {
VStack {
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white)
.background(Color.orange)
.padding()
.border(Color.red, width: 5) // 赤
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white)
.background(Color.orange)
.padding()
.border(Color.blue, width: 5) // 青
Text("アプリ開発を頑張る！")
.foregroundColor(Color.white)
.background(Color.orange)
.padding()
.border(Color.green, width: 5) // 緑
} // VStack
} // body
} // View
borderはViewの幅を視覚的に確認したいときにも利用するといいです。
一画面に複数のViewが存在している時、各Viewがどこからどこまでの範囲で描画されているのかを把握したいときにも使えます。
2-3 frame(フレーム) : 幅、領域
frameは枠、領域のことです。対象のViewの描画したい領域を指定します。
frameの幅だけでなく、frame内で保持しているViewの位置も指定することができます。(左寄せ、右下、etc…)
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.background(Color.orange)
.frame(width: 300, height: 200, alignment: .topTrailing) // ⬅︎
.border(Color.blue, width: 5) // 範囲を可視化
} // body
} // View
上記のコード例は、「横幅300」「縦幅200」「Viewの位置を右上」に指定したframeモディファイアを指定しています。
また、frameの外枠をborderモディファイアで可視化しています。
指定された横300,縦200の幅で青枠のフレーム領域が生成され、対象Viewが領域内の右上に配置されていることがわかります。
書く位置によるViewの変化
frameモディファイアも同様に、記述する位置によって結果が変化します。
frameモディファイアをbackgroundモディファイアの前に配置してみます。
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.frame(width: 300, height: 200, alignment: .topTrailing) // ⬅︎移動
.background(Color.orange)
.border(Color.blue, width: 5)
} // body
} // View
frameモディファイアがbackgroundの前に配置されたことで、生成されたframe領域に対して背景色が適用されます。
サイズの最大、横幅、縦幅いっぱい
frameを画面のセーフエリア内いっぱい（横幅・縦幅の最大まで）取りたいときが開発中に多々あります。
frameモディファイアの引数に「maxWidth」「maxHeight」を指定することで、デバイスのセーフエリア内の横幅・縦幅の最大値を取ることができます。引数には「.infinity」を渡します。
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity) // ⬅︎
.border(Color.blue, width: 10)
} // body
} // View
デバイスの種類によって画面幅の最大値は異なります。これらの記述を用いることで、対象デバイスに沿った最大値を取ることが可能です。
[iPhone SE]
[iPhone 14 Pro]
2-4 ignoresSafeArea(イグノアセーフエリア) : セーフエリア外まで
デフォルトだと、Viewパーツは各デバイスのセーフエリア内に配置されます。
ignoresSafeAreaモディファイアを指定することで、対象のView表示をセーフエリアの外まで伸ばすことができます。(backgroundで指定した背景色など)
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.orange)
.ignoresSafeArea() // ✅
} // body
} // View
2-5 cornerRadius(コーナーラディウス)
cornerRadiusを用いることで、対象Viewの形を角丸にします。
また、frameの値を正方形になるように設定することで、cornerRadiusと合わせて円形を作ることができます。
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.frame(width: 300, height: 300)
.background(Color.orange)
.cornerRadius(50) // ⬅︎
} // body
} // View
[Before]
[After]
角丸からの円
対象Viewのframe数値の半分値をcornerRadiusに指定することで、Viewが円形になります。
円形を実装する場合、frameの型が正方形(widthとheightが同じ値)である必要があります。
struct ContentView: View {
var body: some View {
Text("アプリ開発")
.font(.largeTitle)
.padding()
.frame(width: 300, height: 300)
.background(Color.orange)
.cornerRadius(150) // frame数値の半分で円形
} // body
} // View
cornerRadius(50)
cornerRadius(150) <frameの半分>
まとめ
以上、SwiftUIのmodifier(モディファイア)についてでした。
モディファイアの要点をおさらいしておきましょう。
・Viewにさまざまな変更を加える
・上から下へ順番に変更が適用されていく
・書く順番によってViewの結果が変わる
連結したモディファイアによって画面のデザインがどんどん変わっていく様子は非常に楽しく、SwiftUI開発の面白みだと思います。
今回ご紹介した以外にもたくさんのモディファイアが存在するので、ぜひ色々と試してみてください！
動画の紹介
\ SHARE /
アプリ開発が学べる勉強会を開催中！
CodeCandyではアプリ開発を学ぶための勉強会を定期開催しています。
学習する習慣を身につけたい、他の参加者と作業したい、アプリ開発の基本をマスターしたい、という方のために無料で学べる勉強会です。
グループにメンバー登録して頂くと、イベント開催時にメールで通知されます。
グループのメンバーとして参加する徹底した基礎学習からマスターするiPhoneアプリ開発集中オンライン講座開講！
本書「iPhoneアプリ開発集中講座」を執筆している現役エンジニア講師陣が直接に指導！
基礎、課題実習で実践力を鍛えて、オリジナルアプリ公開までチャレンジ！
充実した転職支援もあるので、エンジニアへ転職したい人にもおすすめです！
まずは、現役エンジニアに相談できる無料相談をご利用ください。