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を作ることができるということです。
この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
}
}
この記事が気に入ったらサポートをしてみませんか?