【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モディファイアを使用します。
使い方は、こちらの記事を参照してください。

【SwiftUI】図形の輪郭描画(stroke)
(2020/8/22 更新)図形の輪郭を描画する.stroke()の使い方を解説します。
スポンサーリンク

あわせて読みたい記事

【SwiftUI】カスタムShapeの作り方
独自の図形部品を作る方法を解説します。
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の3種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...
【SwiftUI】Viewのフレームサイズ指定(frame)
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信