SwiftUIで、カスタムモディファイアを作成する方法

今回の内容
・カスタムモディファイアの基本的な作成方法。
・入門〜中級の読者様向けに、丁寧かつ簡潔に解説します。
・カスタムモディファイアを作成することで、複雑なデザインを1行で呼びだせるようになります。
・また、大元のカスタムモディファイアを変更すれば、適用されている全てのViewがまとめて変更されるため、デザインの変更が容易にできるようになります。

テスト環境
Xcode 12.2
swift 5.3.1
iOS 14.2

1) 基本のカスタムモディファイア

基本のカスタムモディファイアの作成方法を見ていきます。

1-1) カスタムモディファイア構造体の作成

import SwiftUI

struct Modifier1: ViewModifier {
   let color: Color
   func body(content: Content) -> some View {
       content
           .font(.largeTitle)
           .padding(10)
           .overlay(
               RoundedRectangle(cornerRadius: 15)
                   .stroke(lineWidth: 4)
           )
           .foregroundColor(color)
   }
}

・ViewModifierプロトコルに準拠した構造体を作成します。
・引数にContent、戻り値はsome Viewとし、関数内で引数に好みのモディファイアを付与させ、カスタムモディファイア構造体は完成です。
・決まった書き方ですので、ここではあまり中身に深入りしなくても大丈夫です。
・プロパティを持たせることも可能で、ここではcolorプロパティを持たせました。

1-2) カスタムモディファイア構造体を使用する
使用方法は非常に簡単で、付与したいViewに下記を付与するだけです。

 .modifier(Modifier1(color: .blue))

・modifierメソッドの引数に作成したカスタムモディファイア構造体を呼び出します。
・colorプロパティは.blueで初期化しています。

1-3) 使用イメージ​

2)Stackレイアウトを組み込んだカスタムモディファイア

応用として、カスタムモディファイア自体に、スタックレイアウトを組み込むこともできます。

2-1)Stackレイアウトを組み込む

struct Modifier1: ViewModifier {
   let color: Color
   func body(content: Content) -> some View {
   ~ZStackを組み込む~
       ZStack {
           content
               .font(.largeTitle)
               .padding(10)
               .overlay(
                   RoundedRectangle(cornerRadius: 15)
                       .stroke(lineWidth: 4)
               )
               .offset(x: 2, y: 2)
           content
               .font(.largeTitle)
               .padding(10)
               .overlay(
                   RoundedRectangle(cornerRadius: 15)
                       .stroke(lineWidth: 4)
               )
               .foregroundColor(color)
       }
   }
}

・ZStackに組み込んで、立体的な影を表現してみました。

2-2) 使用イメージ

ボタンに適用すれば、立体的なボタンを生成できます。

簡単にですが、カスタムモディファイアの作成方法は以上です。