セクション 102

バッジの背景を描画

SwiftUI のグラフィックス API を使用して、カスタムバッジの形状を描画します。

ステップ 1

[File(ファイル)] > [New(新規)] > [File(ファイル)] で別の新しいファイルを作成し、今回は iOS テンプレートシートから SwiftUI ビューを選択します。[Next(次へ)] をクリックしてから、ファイルに badgeBackground.swiftと名前を付けます。

ステップ 2

badgebackground.swift では、バッジに Path の形状を追加し、fill() 修飾子を適用して形状をビューに変えます。

パス (path) を使用して、線、カーブ、その他の描画基本単位を組み合わせて、バッジの六角形の背景のような複雑な形状を作ります。

    BadgeBackground.swift

1. import SwiftUI
3. struct BadgeBackground: View {
4. var body: some View {
Path { path in
}
.fill(Color.black)
5. }
6. }

ステップ 3

サイズ 100 x 100 px のコンテナを仮定して、パス (path) に開始点を追加します。

move(to:) メソッドは、想像上のペンまたは鉛筆がエリアの上を舞っているかのように、形状の境界内で描画カーソルを動かします。

    BadgeBackground.swift

4. var body: some View {
5. Path { path in
var width: CGFloat = 100.0
let height = width
path.move(
to: CGPoint(
x: width * 0.95,
y: height * 0.20
)
)
6. }
7. .fill(Color.black)

ステップ 4

形状のデータの各点の線を描き、ラフな六角形の形状を作成します。

addline(to:) メソッドは単一のポイントを取り、それを描画します。addline(to:_) への連続した呼び出しは、前のポイントの線の描画を始めて、新しいポイントに進みます。

    BadgeBackground.swift

12. )
13. )
HexagonParameters.segments.forEach { segment in
path.addLine(
to: CGPoint(
x: width * segment.line.x,
y: height * segment.line.y
)
)
}
14. }
15. .fill(Color.black)

プレビュー

あなたの六角形が少し変に見えても心配しないでください。それは、今は形状の角の各セグメントの湾曲部分を無視しているからです。あなたは次にその説明を見るでしょう。

ステップ 5

AddQuadCurve(to:control:) メソッドを使用して、バッジのコーナーのベジエ曲線を描画します。

    BadgeBackground.swift

9. to: CGPoint(
10. x: width * 0.95,
y: height * (0.20 + HexagonParameters.adjustment)
11. )
12. )

プレビューその 1

ステップ 6

バッジがそれが含むビューのサイズを使用できるように、GeometryReader にパス (path) を包み込んで、値 (100) をハードコーディングする代わりにサイズを定義します。

幾何学の 2 次元の最小の物を使用すると、ビューを含む物が正方形ではない場合のバッジのアスペクト比が保持されます。

    BadgeBackground.swift

3. struct BadgeBackground: View {
4. var body: some View {
GeometryReader { geometry in
5. Path { path in
var width: CGFloat = min(geometry.size.width, geometry.size.height)

プレビューその 2

ステップ 7

xScale を使用してx 軸上の形状をスケーリングしてから、xOffset を追加して、その幾何内の形状を再度センタリングします。

    BadgeBackground.swift

7. var width: CGFloat = min(geometry.size.width, geometry.size.height)
8. let height = width
let xScale: CGFloat = 0.832
let xOffset = (width * (1.0 - xScale)) / 2.0
width *= xScale
9. path.move(
10. to: CGPoint(

プレビューその 3

ステップ 8

黒一色の背景をグラデーションに置き換えて、デザインにマッチするようにします。

    BadgeBackground.swift

37. }
38. }
.fill(LinearGradient(
gradient: Gradient(colors: [Self.gradientStart, Self.gradientEnd]),
startPoint: UnitPoint(x: 0.5, y: 0),
endPoint: UnitPoint(x: 0.5, y: 0.6)
))
39. }
40. }

プレビューその 4

ステップ 9

グラデーションの塗りつぶしに aspectRatio(_:contentMode:) 修飾子を適用します。

アスペクト比を 1：1 に保つことで、先祖のビューが正方形でなくても、バッジはビューの中央にその位置を維持します。

    BadgeBackground.swift

43. ))
44. }
.aspectRatio(1, contentMode: .fit)
45. }
46. static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)

プレビューその 5