セクション 103

バッジのシンボルを描画

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

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

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

ステップ 1

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

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

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

ステップ 2

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

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

ステップ 3

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

実験

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

    BadgeSymbol.swift

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

プレビューその 1

ステップ 4

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

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

    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

ステップ 5

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

    BadgeSymbol.swift

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 {
5. GeometryReader { geometry in

プレビューその 3

ステップ 6

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

実験

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

    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