SwiftUIでViewを拡張してViewModifierを使いやすくする。

概要

SwiftUIでViewを拡張してViewModifierを実装する方法を紹介します。
ViewModifierを使ってViewをカスタマイズした時に呼び出しを簡単にすることができるようになります。

ViewModifierの作成

まずは、ViewをカスタマイズするViewModifierを作成します。

ViewModifierの作成

struct ExampleViewExtensionView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
	    //ViewModifierの適用
            .modifier(ExampleViewModifier())
    }
}


//ViewModifierの作成
struct ExampleViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.quaternary, in: Capsule())
    }
}

自分で作成したViewModifierを適用する際には.modifier()を使う必要があります。
機能的には全く問題はありませんがVieｗModifierに引数を与えたりするようになると冗長になります。

Viewのextension

先ほど作成したViewModifierをViewをextensionすることで使いやすくしていきます。

Viewのextension例

extension View {
    func ViewModifierの名前() -> some View {
        modifier(自分で作成したViewModifier)
    }
}

このようにViewをextensionすることでViewModifierを使いやすくすることができます。

Viewのextension

struct ExampleViewExtensionView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            //ViewModifierの適用
            .exampleViewModifier()
    }
}


//ViewModifierの作成
struct ExampleViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.quaternary, in: Capsule())
    }
}


//Viewの拡張
extension View {
    func exampleViewModifier() -> some View {
        modifier(ExampleViewModifier())
    }
}

Viewをextensionで拡張することでViewにViewModifierを適用することが簡単になります。先ほども述べたようにViewModifierの引数を使うようになるとViewをextensionしたほうが使いやすくなると思います。

まとめ

ViewModifierを適用するためにはViewの拡張は必ずしも必要ではありませんが、知っておくと便利な機能です。ViewModifierメソッドの戻り値にsome Viewを使用していることを知っているとよりSwiftUIに対する理解が深くなるとも思います。
機会があればぜひ試してみてください。