SwiftUIで「図形を描く」ときに登場するのが Shape です。
四角形や円といった基本的な図形から、カスタムパスを描いたオリジナルの図形まで、SwiftUIのUIに自然に組み込める便利な仕組みです。
この記事では Shape の基本的な意味や使い方、代表的な種類、関連メソッド（塗りつぶし・枠線など）までをわかりやすく解説します。
Shapeとは？
Shape は SwiftUI のプロトコルで、図形を定義するための共通インターフェースです。
path(in:) というメソッドを実装することで、「どんな図形を描くか」を決められます。
標準で用意されている Shape としては、Rectangle（四角形）、Circle（円）、Capsule（カプセル型）などがあります。
また、自分で独自の Shape を作ることも可能です。
UIKitで UIBezierPath を組み立てるのと違い、SwiftUIでは Shape をビューのように扱えるのが大きな特徴です。
具体例：基本の図形を使う
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import SwiftUI struct ContentView: View { var body: some View { VStack(spacing: 20) { Rectangle() .fill(.blue) .frame(width: 100, height: 100) Circle() .stroke(.red, lineWidth: 4) .frame(width: 100, height: 100) Capsule() .fill(.green) .frame(width: 150, height: 60) } } } |
Rectangle()→ 四角形Circle()→ 円形Capsule()→ 両端が丸い長方形
.fill() で塗りつぶし、.stroke() で枠線を描くことができます。
カスタムShapeを作る
Shapeの強みは「自作できること」です。
独自の図形を作りたいときは、Shape プロトコルに準拠した構造体を定義（下記だとTriangle）し、path(in:) メソッドの中でパスを組み立てていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
struct Triangle: Shape { func path(in rect: CGRect) -> Path { var path = Path() // 上の頂点 path.move(to: CGPoint(x: rect.midX, y: rect.minY)) // 左下 path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) // 右下 path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY)) // 始点に戻る path.closeSubpath() return path } } struct ContentView: View { var body: some View { Triangle() .fill(.orange) .frame(width: 120, height: 120) } } |
このコードでは Triangle という独自の図形を定義し、三角形を描画しています。
path(in:) の中で move(to:) や addLine(to:) を使って座標を指定し、最後に closeSubpath() で線を閉じることで完成します。
ここでポイントになるのが、rect.midX や rect.minY がどこを基準にしているかです。
私はここがなかなか理解できず、「rectはどこのサイズを基準にしているんだろう？」ってずっと思っていました（笑）
path(in:) に渡される rect は、Shape が描かれる 外側のフレームに基づく四角形を表しています。
rect.minX→ 左端の座標rect.maxX→ 右端の座標rect.midX→ 横幅の中央rect.minY→ 上端の座標rect.maxY→ 下端の座標rect.midY→ 縦幅の中央
たとえば .frame(width: 120, height: 120) を指定した場合、rect は幅120・高さ120の四角形になり、
rect.midX = 60rect.minY = 0rect.maxY = 120
といった値が計算され、三角形がその中にぴったり収まるように描かれます。
このように、path(in:) でパスを組み立てることで三角形など独自の図形を簡単に作れます。
Shapeでよく使うメソッド
Shape でよく使う代表的なメソッドをまとめます。
| メソッド | 説明 |
|---|---|
.fill(Color) |
図形を塗りつぶす |
.stroke(Color, lineWidth:) |
図形の枠線を描く |
.strokeBorder(Color, lineWidth:) |
枠線を内側に描く |
.inset(by:) |
図形の内側に余白を持たせる |
.trim(from:to:) |
図形の一部だけを描く（円グラフなどに応用可能） |
例：円弧だけを描く
例えば .trim(from:to:) を使うと、円の一部だけを描画して円グラフ風のデザインを作ることができます。
|
1 2 3 4 5 |
Circle() .trim(from: 0.0, to: 0.75) .stroke(.purple, lineWidth: 8) .frame(width: 120, height: 120) |
円の 0%〜75% を描画し、円グラフ風の表示を実現できます。
活用シーン
Shape は単なる図形を描くだけでなく、UI のさまざまな場面で活用できます。
特に背景やアイコン、グラフ描画などに組み込むと効果的です。
- ボタンの背景やUIの装飾
- アイコンやインジケーターなどのパス描画
- アニメーションと組み合わせた演出
- グラフやチャートの描画
これらの場面では、特に .trim や .inset といったメソッドを組み合わせることで、進捗バーや動きのある UI を簡単に実装できます。
注意点
Shape を使う際には、パフォーマンスや描画方法に関していくつか気をつけるべき点があります。
path(in:)は都度呼ばれるため、計算コストの高い処理は避けるfillとstrokeを併用したい場合はZStackやoverlayで重ねる- サイズは
frameで明示的に指定する必要がある - Shape 自体にはイベントがないため、必要に応じて
.onTapGestureを付与する
これらを意識することで、効率的かつ期待通りの見た目を実現できます。
まとめ
SwiftUI の Shape は、シンプルな図形を描くだけでなく、UI デザインに多彩な表現をもたらす便利な仕組みです。
標準提供の図形から自作のカスタム図形まで柔軟に扱え、色や線、アニメーションとの組み合わせによって幅広い活用が可能になります。
Shapeは図形を定義するプロトコル- 標準Shape（Rectangle, Circle, Capsuleなど）や自作Shapeが使える
.fillや.strokeで色や線をコントロール可能.trimや.insetを活用するとグラフやアニメーション表現に応用できる
SwiftUIで図形をビューとして自然に扱えるのが Shape の魅力です。
背景や装飾、インジケーターなどに積極的に活用してみてくださいね！
