SwiftUI Essentials (SwiftUI の本質)

パスとシェイプの描画

ユーザは、リスト内のランドマークを訪れるたびにバッジを受け取ります。もちろん、ユーザがバッジを受け取るには、バッジを作成する必要があります。このチュートリアルでは、パス (path) とシェイプを組み合わせてバッジを作成し、その場所を表す別のシェイプと重なるプロセスについて説明します。


さまざまな種類のランドマークに対して複数のバッジを作成する場合は、重なったシンボルを試してみたり、繰り返しの量を変更したり、さまざまな角度やスケールを変更してみてください。


手順に従ってこのプロジェクトをビルドするか、完成したプロジェクトをダウンロードして自分で探索してください。



25min


予想される時間

プロジェクト
ファイル

Xcode 12





訳注:以下、必要な場所においては Mac と iPhone 両方のセクションを提供しています。
Mac → セクション 1、iPhone → セクション 101 とします。











    HexagonParameters.swift


  1. import Foundation
  2. struct HexagonParameters {
  3. }



    HexagonParameters.swift


  1. import CoreGraphics
  2. struct HexagonParameters {
  3. struct Segment {
  4. let line: CGPoint
  5. let curve: CGPoint
  6. let control: CGPoint
  7. }
  8. }



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


    HexagonParameters.swift


  1. }
  2. static let segments = [
  3. ]
  4. }



さらに以下のように書き足します。


    HexagonParameters.swift


  1. static let segments = [
  2. Segment(
  3. line:      CGPoint(x: 0.60, y: 0.05),
  4. curve:    CGPoint(x: 0.40, y: 0.05),
  5. control: CGPoint(x: 0.50, y: 0.00)
  6. ),
  7. Segment(
  8. line:      CGPoint(x: 0.05, y: 0.20),
  9. curve:    CGPoint(x: 0.00, y: 0.30),
  10. control: CGPoint(x: 0.00, y: 0.25)
  11. ),
  12. Segment(
  13. line:      CGPoint(x: 0.00, y: 0.70),
  14. curve:    CGPoint(x: 0.05, y: 0.80),
  15. control: CGPoint(x: 0.00, y: 0.75)
  16. ),
  17. Segment(
  18. line:      CGPoint(x: 0.40, y: 0.95),
  19. curve:    CGPoint(x: 0.60, y: 0.95),
  20. control: CGPoint(x: 0.50, y: 1.00)
  21. ),
  22. Segment(
  23. line:      CGPoint(x: 0.95, y: 0.80),
  24. curve:    CGPoint(x: 1.00, y: 0.70),
  25. control: CGPoint(x: 1.00, y: 0.75)
  26. ),
  27. Segment(
  28. line:      CGPoint(x: 1.00, y: 0.30),
  29. curve:    CGPoint(x: 0.95, y: 0.20),
  30. control: CGPoint(x: 1.00, y: 0.25)
  31. )
  32. ]
  33. }



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


    HexagonParameters.swift


  1. static let adjustment: CGFloat = 0.085
  2. static let segments = [
  3. Segment(
  4. line:      CGPoint(x: 0.60, y: 0.05),
  5. curve:    CGPoint(x: 0.40, y: 0.05),
  6. control: CGPoint(x: 0.50, y: 0.00)
  7. ),
  8. Segment(
  9. line:      CGPoint(x: 0.05, y: 0.20 + adjustment),
  10. curve:    CGPoint(x: 0.00, y: 0.30 + adjustment),
  11. control: CGPoint(x: 0.00, y: 0.25 + adjustment)
  12. ),
  13. Segment(
  14. line:      CGPoint(x: 0.00, y: 0.70 - adjustment),
  15. curve:    CGPoint(x: 0.05, y: 0.80 - adjustment),
  16. control: CGPoint(x: 0.00, y: 0.75 - adjustment)
  17. ),
  18. Segment(
  19. line:      CGPoint(x: 0.40, y: 0.95),
  20. curve:    CGPoint(x: 0.60, y: 0.95),
  21. control: CGPoint(x: 0.50, y: 1.00)
  22. ),
  23. Segment(
  24. line:      CGPoint(x: 0.95, y: 0.80 - adjustment),
  25. curve:    CGPoint(x: 1.00, y: 0.70 - adjustment),
  26. control: CGPoint(x: 1.00, y: 0.75 - adjustment)
  27. ),
  28. Segment(
  29. line:      CGPoint(x: 1.00, y: 0.30 + adjustment),
  30. curve:    CGPoint(x: 0.95, y: 0.20 + adjustment),
  31. control: CGPoint(x: 1.00, y: 0.25 + adjustment)
  32. )
  33. ]
  34. }



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






目次
Xcode の新機能

フレームワーク

  • SwiftUI

  • ビューの作成と結合

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    ビルドリストとナビゲーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7

    セクション 8


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107

    セクション 108

    ユーザー入力の処理

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    パスとシェイプの描画

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

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

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    複雑なインターフェースの構成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UI コントロールを扱う

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UIKit とのインターフェース

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    watchOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    macOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107