SwiftUIのViewModifierを使ってViewをカスタマイズする

はじめに

SwiftUIにはViewModifierというViewへのカスタムModifierを作成することが可能です。
ViewModifierを使うことで、SwiftUIのViewを汎用的にカスタマイズすることができます。
今回はそんなViewModifierについてまとめていきます。

ViewModifierについて

Viewに対して適用させることで、Viewをカスタマイズして返却する機能を実装するためのprotocolです。
ViewModifier protocolに定義されている関数は下記です。

func body(content: Self.Content) -> Self.Body

本関数の中でViewの更新、または変換処理を行い返却を行います。
content は修飾する対象のViewのプロキシです。
Self.Bodyはassociatedtypeで定義されており、Viewの変換処理に返すViewの型をここに記述します。

ViewModifierを使用する

単純なViewをカード型のViewに変換するためのカスタムModifierを作成してみます。
やることは単純で、カスタムModifierの構造体を作成し、body(content:)の引数であるcontentに対して値を適用して返却するようにします。
あとは、適用したいViewに対してを使って作成したModifierを適用します。

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(16)
            .background(Color.white)
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            // .modifier(_:)、 ModifiedContent(content:modifier:)のどちらでも適用可能です。
            Text("Hello, world!")
                .modifier(CardModifier())
            ModifiedContent(content: Text("Hello, world!"),
                            modifier: CardModifier())
        }
    }
}

上記により、該当のViewはカスタムModifierに記載された変更が下記のように適用されます。

おわりに

ViewModifierを使うことで、複数のViewに適用するレイアウトなどを汎用的に定義することができると思います。
SwiftUIはメソッドチェインでレイアウトを記載していくため、同じレイアウトを定義する際に全てベタ書きで複数同じ処理が並んでしまうと可読性が悪くなってしまいます。
綺麗なコードを保っていくにも、同じレイアウトのViewについてはカスタムModifierでまとめていくのが良いかと思います。

参考文献

• ViewModifier | Apple Developer Documentation