【SwiftUI】組み込み図形の描画

SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。
これらの部品はShapeプロトコルに準じています。

スポンサーリンク

環境

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

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3

四角形(Rectangle)

四角形を描画します。

塗りつぶしに使うViewの指定は.fill()、サイズの指定は.frame()で行います。
指定が無いときは、デフォルト色(Color.primary)と既存のframeサイズが適用されます。
この2つのModifierの扱いについては、他の図形部品でも同様です。

使用例

四角形の描画

グラデーションでの塗りつぶし

塗りつぶしには、Colorの代わりにGradient(グラデーション)系のViewも指定可能です。

グラデーションで塗りつぶし

角丸四角形(RoundedRectangle)

角が丸い四角形を描画します。
引数(cornerRadius)で円の半径を指定します。

角を楕円で丸めた四角形を描画します。
引数(cornerSize)で楕円の横半径、縦半径を指定します。

使用例

角丸四角形

カプセル形(Capsule)

左右がちょうど半円になるカプセル型の四角形を描画します。

使用例

カプセル型

円形(Circle)

円を描画します。
フレームサイズにぴったり収まる真円が描かれます。

使用例

円形

楕円形(Ellipse)

楕円を描画します。
フレームサイズに応じた楕円が描かれます。

使用例

楕円形

図形の輪郭描画

図形の輪郭線を描くにはstroke modifierを使用します。
使い方は、こちらの記事を参照してください。

【SwiftUI】図形のパス(線)描画(stroke)
図形のパス(線)を描画する.stroke()の使い方を解説します。

あわせて読みたい記事

【SwiftUI】色の指定方法
SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...
【SwiftUI】Viewのフレームサイズ指定
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...