SwiftUIで円や楕円を描画したい時に便利なのが Ellipse() です。
シンプルに「丸や楕円をUIに表示する」ためのビューで、図形を使ったデザインやカスタムUIを作るときに役立ちます。
この記事では、Ellipse() の基本的な意味や使い方、活用シーンまでわかりやすく解説します。
Ellipse() とは？
Ellipse() は SwiftUI が提供する図形（Shape）の一つで、名前の通り「楕円（ellipse）」を描画するビューです。
フレームが正方形であれば「円」として表示され、長方形のフレームを指定すれば「楕円」として表示されます。
Ellipse() 自体には大きさや色の情報はありません。
frame や fill、stroke などのモディファイアを組み合わせて、見た目を作るのが基本的な使い方です。
具体例：楕円を描画する
楕円を表示する具体例でEllipseがどんな挙動をするのか確認していきましょう！
|
1 2 3 4 5 6 7 8 9 10 |
import SwiftUI struct ContentView: View { var body: some View { Ellipse() .fill(Color.blue) // 塗りつぶしの色を指定 .frame(width: 200, height: 150) // 楕円形になる } } |
このコードでは、青い楕円が表示されます。
ポイントは .frame(width:height:) を指定しているところです。
Ellipse() にはデフォルトのサイズがないので、必ずフレームを指定して形を決める必要があります。
具体例：シンプルな円を描画する
|
1 2 3 4 |
Ellipse() .fill(Color.blue) .frame(width: 150, height: 150) // フレームが正方形なので円になる |
縦横のサイズ比を変えることで、好きな形の円を作れるわけです。
Ellipse()を使うときに利用されるモディファイア
Ellipse() を実際に使う時によく利用されるモディファイアを整理しておきましょう。
| モディファイア | 説明 |
|---|---|
.frame(width:height:) |
大きさと形を決める（正方形なら円、長方形なら楕円） |
.fill(Color) |
塗りつぶしの色を設定する |
.stroke(Color, lineWidth:) |
枠線を描画する |
.overlay(...) |
塗りと線を重ねたり、他のビューを上に重ねる |
.shadow(radius:) |
影をつけて立体感を出す |
具体例：バッジ風のUI
上記モディファイアを利用して、バッジ風のUIを作ってみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
Ellipse() .fill(Color.purple) .frame(width: 120, height: 120) .shadow(radius: 10) .overlay( Text("New") .foregroundColor(.white) .bold() ) |
この例では、楕円の中央にテキストを重ね、.shadow(radius:10)を指定することで「立体感のあるバッジ風のUI」を作っています。
Ellipse() の活用シーン
Ellipse() は単純な図形ですが、工夫次第でさまざまなUIに活かせます。
- アイコンやバッジ（丸い通知バッジなど）
- 背景デザイン（カラフルな楕円を重ねて模様を作る）
- ボタンの背景（丸ボタンや楕円形ボタン）
- グラフィック装飾（プロフィール画像の丸枠など）
特に「正方形のフレームで円を作る」ケースは多く、ユーザーのアイコンやステータス表示などでよく使われます。
Ellipse() を使うときの注意点
Ellipse() を扱う上で、初心者がつまずきやすいポイントもあります。
- サイズ指定が必須
Ellipse() はデフォルトで大きさを持たないため、.frame(width:height:)を必ず指定する必要があります。 - タップ領域も楕円ではなく矩形
例えば Ellipse() に.onTapGestureを付けても、実際のタップ判定は矩形（四角形の範囲）になります。丸いボタンを作りたい場合はcontentShape(Circle())などで調整する必要があります。
上記点には注意しながら、使うようにしましょう。
まとめ
今回は SwiftUI の Ellipse() について詳しく解説しました。
- Ellipse() は円や楕円を描画するための図形ビュー
- フレームを指定して形や大きさを決めるのが基本
.fillや.strokeで塗りや枠線をコントロールできる- バッジやボタン、背景装飾など幅広く活用可能
シンプルながらUI表現の幅を広げてくれる便利な図形なので、ぜひいろんなデザインに組み込んでみてくださいね！
