SwiftUIに標準で用意されている組み込み図形描画の部品を紹介します。
これらの部品はShapeプロトコルに準じています。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
四角形（Rectangle）
|
1 2 3 |
Rectangle() |
四角形を描画します。
塗りつぶしに使うViewの指定は.fill()、サイズの指定は.frame()で行います。
指定が無いときは、デフォルト色（Color.primary）と既存のframeサイズが適用されます。
この２つのModifierの扱いについては、他の図形部品でも同様です。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { // 四角形の描画 Rectangle() .fill(Color.blue) // 図形の塗りつぶしに使うViewを指定 .frame(width:200, height: 150) // フレームサイズ指定 } } |
グラデーションでの塗りつぶし
塗りつぶしには、Colorの代わりにGradient（グラデーション）系のViewも指定可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
struct ContentView: View { // グラデーションの定義 let gradient = LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .topLeading, endPoint: .bottomTrailing) var body: some View { Rectangle() .fill(gradient) // 図形の塗りつぶしに使うViewを指定 .frame(width:200, height: 150) } } |
角丸四角形（RoundedRectangle）
|
1 2 3 |
RoundedRectangle(cornerRadius: 円の半径) |
角が丸い四角形を描画します。
引数（cornerRadius）で円の半径を指定します。
|
1 2 3 |
RoundedRectangle(cornerSize: .init(width: 横半径, height: 縦半径)) |
角を楕円で丸めた四角形を描画します。
引数（cornerSize）で楕円の横半径、縦半径を指定します。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
struct ContentView: View { var body: some View { HStack { // 角が円の四角形 RoundedRectangle(cornerRadius: 30) .fill(Color.blue) .frame(width:200, height: 150) // 角が楕円の四角形 RoundedRectangle(cornerSize: .init(width: 60, height: 30)) .fill(Color.red) .frame(width:200, height: 150) } } } |
カプセル形（Capsule）
|
1 2 3 |
Capsule() |
左右がちょうど半円になるカプセル型の四角形を描画します。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { // カプセル型の描画 Capsule() .fill(Color.blue) .frame(width:250, height: 150) } } |
円形（Circle）
|
1 2 3 |
Circle() |
円を描画します。
フレームサイズにぴったり収まる真円が描かれます。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { // 円形の描画 Circle() .fill(Color.blue) .frame(width:250, height: 200) } } |
楕円形（Ellipse）
|
1 2 3 |
Ellipse() |
楕円を描画します。
フレームサイズに応じた楕円が描かれます。
使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { // 楕円形の描画 Ellipse() .fill(Color.blue) .frame(width:250, height: 200) } } |
図形の輪郭描画
図形の輪郭線を描くにはstrokeモディファイアを使用します。
使い方は、こちらの記事を参照してください。
【SwiftUI】図形の輪郭描画（stroke）
（2020/8/22 更新）図形の輪郭を描画する.stroke()の使い方を解説します。
capibara1969.com
2020.03.04
あわせて読みたい記事
【SwiftUI】カスタムShapeの作り方
独自の図形部品を作る方法を解説します。
capibara1969.com
2020.08.28
【SwiftUI】グラデーションの使い方
グラデーションとは、連続した階調で色調や透明度が変化していく色の指定を指します。SwiftUIでは線形、放射状、円すい状の３種類のグラデーションが使えます。これらのグラデーションはすべて、Viewとして単独で使用したり、Modifier...
capibara1969.com
2020.02.18
【SwiftUI】Viewのフレームサイズ指定（frame）
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
capibara1969.com
2019.11.10
