📘

SwiftUI モディファイア再学習

2024/09/02に公開

恥ずかしながら、モディファイアについてあまり理解をしておらず使っていたので、
ちゃんと理解しようと思い書いています。

SwiftUI のモディファイアとは?

SwiftUIのモディファイアは、ビュー(画面に表示される要素)に対して何かしらの変化を加えるためのものです。

modifierの意味は、変更・修正する人・物 です。
なので、ビューに対して変化を加えるもの。

例えば、
foregroundColor(.blue) や、フォントのスタイルを変更する .font(.headline) がモディファイアです。

自分のモディファイアを作る方法

結論から言うとViewプロトコルを拡張し、そこにViewを返す関数を記載すればモディファイアになるのです。

よく目にする struct TestA: View のViewはSwiftUIのすべてのUI要素(テキスト、画像、ボタンなど) が準拠しているプロトコルです。

extension View の中で関数を定義すると、その関数はすべてのビューに対して使えるようになります。そしてそれがモディファイアとなります。
ただし、モディファイアとして機能するためには、その関数が必ず View 型を返す必要があります。

some View を返すことで、SwiftUIはその関数が返すビューを特定の型に制限せずに処理できます。これにより、さまざまなビューに対して柔軟にモディファイアを適用できるようになります。

import SwiftUI

// 1. Viewのエクステンションとしてモディファイアを定義します
extension View {
    func customBackground(color: Color) -> some View {
        self
            .padding() // モディファイアを連鎖させることも可能
            .background(color)
            .cornerRadius(8)
    }
}

なのでTextだろうが、ボタンだろうが自分が作成したモディファイアを使うことができます、なぜなら全てのUI要素はViewプロトコルを準拠しているからです。

まとめ

  • モディファイアとは?: ビューの見た目や動作を変えるための便利なツールです。
  • カスタムモディファイアの作り方: extension View を使って、自分だけのモディファイアを作成します。
  • 再利用性: モディファイアを使うと、コードの再利用性が高まり、見た目や動作の一貫性を保ちやすくなります。

SwiftUIでは、このように簡単にカスタムモディファイアを作成できるため、プロジェクト全体で統一感のあるデザインや動作を実現できます。モディファイアをうまく活用して、効率的に美しいUIを作りましょう!

Discussion