SwiftUIでいこう！- スタンフォード大学Lecture 7: ViewModifier Animation - 1

Modifierとは、修飾するためのメソッドです。例えばText()のModifierをつけてみると、

 Text(text)
          .font(.caption)
          .foregroundColor(.white)
          .padding(5)
          .background(.black)

.font(.caption)
.foregroundColor(.white)
.padding(5)
.background(.black)

このModifierでフォントの大きさ色、余白を決めることができます。

プロトコルViewModifierはModifierを使った定型のViewを作ることができます。繰り返し使えるカスタムViewを作ることができるということです。

Apple Developer Documentation

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

このViewModifierで作っていきます。別ファイルを作ってそこに書いていきます。

struct Cardify:ViewModifier {}

プロトコルViewModifierに適応させます。

struct CardView:View{}

に書いていた

Pie(startAngle: Angle(degrees: 0-90), endangle: Angle(degrees: 110-90))
           .padding(5).opacity(0.5)
Text(card.content)
           .font(font(in: geometry.size))

の部分の以下を移動します。（カードをひっくり返す部分）

   ZStack{
           let shape =  RoundedRectangle(cornerRadius: DrawingConstants.cornerRadius)
           if isFaceUp{
               shape.fill().foregroundColor(.white)
               shape.stroke(lineWidth: DrawingConstants.lineWidth)
               content
               
           }else{
               shape
                   .fill()
           }
   }

この部分を使うことで

DrawingConstants.cornerRadius
DrawingConstants.lineWidth

が必要になるのでこれを決めている以下コードも移動します。

   private struct DrawingConstants{
       static let cornerRadius:CGFloat = 10
       static let lineWidth:CGFloat = 3
   }

構造体 CardifyをViewで簡単に使えるようにextensionでViewに追加します。

extension View{
   func cardify(isFaceUp:Bool) -> some View {
       self.modifier(Cardify(isFaceUp: isFaceUp))
   }
}

カードを作っている構造体CardView()に入れ込みます。

var body: some View{
　　GeometryReader{ geometry in
　　　　　ZStack{
　　　　　　　　// 省略
　　　　　}
　　　　　.cardify(isFaceUp: card.isFaceUp)
　　}
}

全体は

struct CardView:View {  
   let card:EmojiGame.Card
   var body: some View{ 
       GeometryReader{ geometry in
           ZStack{
                   Pie(startAngle: Angle(degrees: 0-90), endangle: Angle(degrees: 110-90))
                       .padding(5).opacity(0.5)

                   Text(card.content)
                       .font(font(in: geometry.size))

           .cardify(isFaceUp: card.isFaceUp)
       }
   }
   private func font(in size:CGSize)->Font{
       Font.system(size: min(size.width,size.height)*DrawingConstants.fontScale)
   }
   private struct DrawingConstants{
       static let fontScale:CGFloat = 0.7
   }
}