【SwiftUI】カスタムShapeの作り方

独自の図形部品を作る方法を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

カスタムShapeとは?

SwiftUIではPathとShapeの2つの微妙に異なるタイプの描画が可能です。
Pathは「ここから始めて、ここまで線を引いて、そこに円を追加する」といった一連の描画指示であり、すべて絶対座標を使用します。
対象的にShapeは、標準で用意された四角形や円形などの組み込み図形部品で、与えられたフレームの中に収まるように位置やサイズを調整して描画します。

カスタムShapeとは、PathとShapeプロトコルを組み合わせて作る独自の図形部品です。

Pathと組み込み図形(Shape)については、次の2つの記事で解説しています。

【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。
スポンサーリンク

カスタムShapeの作成方法

作成手順は次の通りです。

1.Shapeプロトコルを採用した構造体を作成する。

2.次の形式のpathメソッドを実装する。

引数rectには、図形を描画するフレームの位置とサイズがCGRect形式で渡ります。
戻り値には描画する図形を示すPathを返します。

作成例

以下は、カスタムShapeとして三角形を描画するTriangle()を作成した例です。

Pathによる図形描画を理解していればカスタムShapeを作るのは簡単です。
引数として受領したフレームの位置とサイズ情報を利用して、目的の図形を描画します。

作成したカスタムShapeは、標準で用意されている組み込み図形部品と同様に使え、.fill()や.stroke()などのModifierが適用可能です。

カスタムシェイプの使用例

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Pathを使った図形の描画
Pathビューを使った図形の描画方法について解説します。
【SwiftUI】組み込み図形の描画
SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。これらの部品はShapeプロトコルに準じています。
【SwiftUI】図形の輪郭描画(stroke)
(2020/8/22 更新)図形の輪郭を描画する.stroke()の使い方を解説します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信