【SwiftUI】基本図形(四角や丸)を簡単解説

本記事では、SwiftUIで標準で使用できる図形について解説していきます。図形を表示するところから、色の変更、サイズを変更する方法まで触れていきます。

1. 四角
2. 円形
3. 楕円
4. カプセル
5. 角の丸い四角
6. 色を変更する
- 6.1. グラデーション
7. サイズを変更する
8. 図形の枠線だけを表示する
9. 最後に

四角

円形の図形を描画する際にはRectangle()を使用します。

Rectangle()の後ろにてforegroundColor()プロパティで色を変更し、frame()プロパティで図形のサイズを指定します。

各プロパティについては下の章で説明していきます。

VStack {
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200)
        }
        .padding()

実行結果

上の例ではframe()で高さと幅を同じ値にすることで正方形の図形を表示していますが、高さ、幅の指定を変更することで長方形を表示することも可能です。

VStack {
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 250, height: 100)
        }
        .padding()

実行結果

円形

円形の図形を描画する際にはCircle()を使用します。

Circle()でもRectangle()と同様に色と、サイズを指定していきます。

VStack {
            Circle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200)
        }
        .padding()

実行結果

Circle()はRectangle()とは異なり、高さと幅に異なる値を指定した場合には小さい方の値合わせて値が設定されます。

そのため、図形の形が崩れてしまうことはなく一定の円の図形になります。

VStack {
            Circle()
                .foregroundColor(.blue)
                .frame(width: 100, height: 200)
        }
        .padding()

実行結果

楕円

楕円型の図形を描画する際にはEllipse()を使用します。

先ほどご説明したCircle()は、高さと幅に異なる値を設定した場合にも円の形が崩れることはありませんでした。一方で楕円では、高さと幅に指定した値によって円の形が変わっていきます。

VStack {
            Ellipse()
                .foregroundColor(.blue)
                .frame(width: 300, height: 200)
        }
        .padding()

実行結果

Circle()と比較し、Ellipse()では円の形を自由に設定できる一方で値の設定方法によって意図しない図形にならないように注意する必要があります。

カプセル

カプセル型の図形を描画する際にはCapsule()を使用します。

Capsule()は、カプセルの形をした図形ですが、高さと横幅に同一の値を指定した場合にはこちらも円形になります。

基本的な特徴としては、高さと幅に異なる値を指定してカプセル型の図形として利用することになりますが、小さな値を指定した側の辺が弧を描くようになっており、例では高さに小さい値を設定しているため、縦線が曲線になっています。

VStack {
            Capsule()
                .foregroundColor(.blue)
                .frame(width: 200, height: 100)
        }
        .padding()

実行結果

角の丸い四角

角の丸い四角形を描画するには、RoundedRectangle()というオブジェクトを使用します。

RoundedRectangle(cornerRadius: 角の縁の半径)で図形の形を設定します。

VStack {

RoundedRectangle(cornerRadius: 50)

.stroke(lineWidth: 10)

.fill(.green)

.frame(width: 200, height: 200)

}

実行結果

色を変更する

ここまでの図形でも使用例と一緒に使用してきた色を変更する方法について触れていきます。

図形の色を変更する方法は主に2つあり、.fill(Color.red),.foregroundColor(.blue)があります。

foregroundColor()を使用する際には括弧の中に「.任意の色」を入れてforegroundColor(.任意の色)で色を指定します。具体的な書き方についてはここまでの章の例として記載しているのでそちらを参考にしてください。

fill()を使用する際には、括弧内に「Color.任意の色」を記載し、.fill(Color.任意の色)という形で色を指定していきます。

図形の後ろにつけるだけですので、基本的にはforegroundColorと同じで、具体的な書き方としては以下になります。

VStack {
            Rectangle()
                .fill(Color.blue)
        }

グラデーション

図形の色はグラデーションでおしゃれにすることもできます。

グラデーションを利用する際には、LinearGradient()を使用します。今回は一例として赤と青のグラデーションを紹介していきます。また、グラデーションの設定値がわかりやすいように定数に格納してから利用します。

グラデーションの色の設定値を定数に入れた後は、他の色指定と同様にfill()の中に入れるだけで色を指定することができます。

LinearGradient()の中では三つの引数として色、グラデーションの開始位置、終了位置を指定しております。

色は青の起点と赤の終点を指定し、その後、開始位置と終了位置を指定しております。LinearGradient()内で「.」を入力した後にグラデーションスタイルの候補として色々出てきますのでさまざまなスタイルを試してみてください。

let gradient = LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)
    var body: some View {
        VStack {
            Rectangle()
                .fill(gradient)
                .frame(width: 200, height: 200)
        }
        .padding()
    }

実行結果

サイズを変更する

サイズを変更する方法についても簡単に触れていきます。

これまで解説でも図形を表示する際に触れてきましたように、サイズはframe()を使用することで変更することができます。

図形().frame(width:任意の幅,height:任意の高さ)で指定することができ、Xcodeでは「framewh」と入力すると候補の一番上に出てきます。

VStack {
            Rectangle()
                .frame(width: 200, height: 200)
        }

図形の枠線だけを表示する

図形の中身を全て塗りつぶすのではなく枠線だけを表示したい場合にはstore()を使用します。

具体的にはstroke(lineWidth:任意の太さ)で枠線の太さを指定し、枠線の色はfillで指定した色になります。

実際にグラデーションの図形を枠線だけにしてみましょう。

let gradient = LinearGradient(gradient: Gradient(colors: [.blue, .red]), startPoint: .topLeading, endPoint: .bottomTrailing)
    var body: some View {
        VStack {
            Rectangle()
                .stroke(lineWidth: 10)
                .fill(gradient)
                .frame(width: 200, height: 200)
        }
        .padding()
    }

実行結果