XCode 12.4 日本語化計画：Swift Tutorials

セクション 4

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




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




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

















ステップ 1

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

















ステップ 2

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













ステップ 3

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
























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







ステップ 4

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










ステップ 5

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




---




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



































ステップ 6

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

    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. }

上記のリストの 5 行目を以下のように書き換えます。

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

プレビューその 1

    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

上記のリストの 13 行目以下を下のように書き足します。

    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

    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