XCode 12.4 日本語化計画：Swift Tutorials

セクション 3

バッジのシンボルを描画




ランドマークバッジには、ランドマークアプリのアイコンに表示される山に基づいたカスタムの記章がその中央にあります。




山のシンボルは 2 つの形で構成されています。1 つは山頂の雪冠を表し、もう 1 つはアプローチに沿った植生を表します。小さな隙間で区切られた 2 つの部分的な三角形の形状を使用してそれらを描画します。









まず、アプリにアイコンを付けて、バッジの外観を確立します。





ステップ 1

プロジェクトのアセットカタログから空の AppIcon の項目を削除してから、AppIcon.appiconset フォルダをダウンロードしたプロジェクトの RFesource フォルダからアセット (Asset) カタログにドラッグします。




---




Xcode は、フォルダがアプリアイコンのすべてのサイズのバリエーションを含むものとして認識し、対応する項目をカタログに作成します。









次に、マッチするバッジシンボルをビルドします。






ステップ 2

バッジデザイン内で回転するパターンでスタンプされた山の形の BadgeSymbol という新しいカスタムビューを作成します。















ステップ 3

パス(path) API を使用してシンボルの上部を描画します。




---




実験

間隔(spacing)、topWidth、および topHeight 定数に関連した数値乗数を調整して、それらが全体的な形状にどのように影響するかを確認しましょう。










































ステップ 4

シンボルの下部を描画します。




---




move(to:) 修飾子を使用して、同じパス(path) 内の複数のシェイプ間に隙間を挿入します。


































ステップ 5

デザインの紫色でシンボルを塗りつぶします。
















ステップ 6

新しい RotatedBadgeSymbol ビューを作成して、回転したシンボルの概念をカプセル化します。




---




実験

プレビュー内で角度を調整して、回転の効果をテストしましょう。

    BadgeSymbol.swift

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

5 行目を以下のように書き足します。

    BadgeSymbol.swift

1. import SwiftUI
3. struct BadgeSymbol: View {
4. var body: some View {
GeometryReader { geometry in
Path { path in
let width = min(geometry.size.width, geometry.size.height)
let height = width * 0.75
let spacing = width * 0.030
let middle = width * 0.5
let topWidth = width * 0.226
let topHeight = height * 0.488
path.addLines([
CGPoint(x: middle, y: spacing),
CGPoint(x: middle - topWidth, y: topHeight - spacing),
CGPoint(x: middle, y: topHeight / 2 + spacing),
CGPoint(x: middle + topWidth, y: topHeight - spacing),
CGPoint(x: middle, y: spacing)
])
}
}
5. }
6. }
8. struct BadgeSymbol_Previews: PreviewProvider {
9. static var previews: some View {
10. BadgeSymbol()
11. }
12. }

プレビューその 1

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

    BadgeSymbol.swift

19. CGPoint(x: middle, y: spacing)
20. ])
path.move(to: CGPoint(x: middle, y: topHeight / 2 + spacing * 3))
path.addLines([
CGPoint(x: middle - topWidth, y: topHeight + spacing),
CGPoint(x: spacing, y: height - spacing),
CGPoint(x: width - spacing, y: height - spacing),
CGPoint(x: middle + topWidth, y: topHeight + spacing),
CGPoint(x: middle, y: topHeight / 2 + spacing * 3)
])
21. }
22. }
23. }
24. }

プレビューその 2

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

    BadgeSymbol.swift

1. import SwiftUI
3. struct BadgeSymbol: View {
static let symbolColor = Color(red: 79.0 / 255, green: 79.0 / 255, blue: 191.0 / 255)
4. var body: some View {

30. CGPoint(x: middle, y: topHeight / 2 + spacing * 3)
31. ])
32. }
.fill(Self.symbolColor)
33. }
34. }
35. }

プレビューその 3

    RotatedBadgeSymbol.swift

1. import SwiftUI
3. struct RotatedBadgeSymbol: View {
4. let angle: Angle
6. var body: some View {
7. BadgeSymbol()
8. .padding(-60)
9. .rotationEffect(angle, anchor: .bottom)
10. }
11. }
13. struct RotatedBadgeSymbol_Previews: PreviewProvider {
14. static var previews: some View {
15. RotatedBadgeSymbol(angle: Angle(degrees: 5))
16. }
17. }

プレビューその 4