19
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-09-30

はじめに

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.Bodyassociatedtypeで定義されており、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に記載された変更が下記のように適用されます。
スクリーンショット 2020-09-30 21.45.42.png

おわりに

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

参考文献

19
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?