セクション 104

バッジの前景と背景を組み合わせる




バッジのデザインでは、バッジの背景の上で山の形を回転させ、複数回繰り返す必要があります。




回転の新しい型を定義し、ForEach ビューを利用して、山の形状の複数のコピーに同じ調整を適用します。













ステップ 1

Badge という新しい SwiftUI ビューを作成します。





    Badge.swift



1. import SwiftUI
3. struct Badge: View {
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }
9. struct Badge_Previews: PreviewProvider {
10. static var previews: some View {
11. Badge()
12. }
13. }





ステップ 2

BadgeBackground を Badge の body 内に配置します。




    Badge.swift



3. struct Badge: View {
4. var body: some View {
BadgeBackground()
5. }
6. }




プレビューその 1





ステップ 3

バッジのシンボルを ZStack 内に配置して、バッジの背景の上に置きます。




    Badge.swift



3. struct Badge: View {
var badgeSymbols: some View {
RotatedBadgeSymbol(angle: Angle(degrees: 0))
.opacity(0.5)
}
4. var body: some View {
ZStack {
BadgeBackground()
badgeSymbols
}
5. }
6. }




プレビューその 2





いま表示されているように、バッジシンボルは、意図したデザインおよび背景の相対的なサイズと比較して大きすぎます。





ステップ 4

周囲の幾何を読み取り、シンボルを拡大縮小して、バッジシンボルのサイズを修正します。




    Badge.swift



11. BadgeBackground()
GeometryReader { geometry in
badgeSymbols
.scaleEffect(1.0 / 4.0, anchor: .top)
.position(x: geometry.size.width / 2.0, y: (3.0 / 4.0) * geometry.size.height)
}
13. }
14. }
15. }




プレビューその 3





ステップ 5

ForEach ビューを追加して、バッジシンボルのコピーを回転して表示します。




---




山のシンボルを繰り返すことにより、8 つのセグメントに分割された完全な 360° の回転が太陽のようなパターンを作成します。





    Badge.swift



1. import SwiftUI
3. struct Badge: View {
static let rotationCount = 8
var badgeSymbols: some View {
ForEach(0..<Badge.rotationCount) { i in
RotatedBadgeSymbol(
angle: .degrees(Double(i) / Double(Badge.rotationCount)) * 360.0
)
}
.opacity(0.5)
4. }
6. var body: some View {
7. ZStack {
8. BadgeBackground()
10. GeometryReader { geometry in
11. badgeSymbols
12. .scaleEffect(1.0 / 4.0, anchor: .top)
13. .position(x: geometry.size.width / 2.0, y: (3.0 / 4.0) * geometry.size.height)
14. }
15. }
.scaledToFit()
16. }
17. }
19. struct Badge_Previews: PreviewProvider {
20. static var previews: some View {
21. Badge()
22. }
23. }




プレビューその 4





ステップ 6

プロジェクトを整理するために、次のチュートリアルに進む前に、このチュートリアルで追加したすべての新しいファイルを Badges グループにまとめます。











セクション 1	セクション 2
セクション 3	セクション 4
セクション 101	セクション 102
セクション 103	セクション 104

あなたの理解度をチェックしてください

質問 1

GeometryReader の目的は何ですか？

質問 2

以下のコードでは、ビューはどのようにレイアウトされますか？

ZStack {
  Circle().fill(Color.green)
  Circle().fill(Color.yellow).scaleEffect(0.8)
  Circle().fill(Color.orange).scaleEffect(0.6)
  Circle().fill(Color.red).scaleEffect(0.4)
}

質問 3

以下の描画コードはどのような形状を作成しますか？

Path { path in
  path.move(to: CGPoint(x: 20, y: 0))
  path.addLine(to: CGPoint(x: 20, y: 200))
  path.addLine(to: CGPoint(x: 220, y: 200))
  path.addLine(to: CGPoint(x: 220, y: 0))
}
.fill(
 LinearGradient(
     gradient: .init(colors: [Color.green, Color.blue]),
     startPoint: .init(x: 0.5, y: 0),
     endPoint: .init(x: 0.5, y: 0.5)
 )
)

次

ビューと遷移のアニメーション




SwiftUI を使用すると、効果がどこに現れるかに関係なく、ビューまたはビューの状態への変更を個別にアニメーション化できます。SwiftUI は、これらの組み合わされた、重複する、中断可能なアニメーションのすべての複雑さを処理します。




さあ始めましょう