2023/5/1

【SwiftUI】Rectangle構造体の使い方！矩形(四角形)の描画方法

この記事からわかること

SwiftUIのRectangle構造体の使い方
矩形(四角形)を描画する方法
Shapeプロトコルとは？
色やサイズなどのカスタマイズ
RoundedRectangleとの違い

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Rectangle構造体とは？

参考文献：公式リファレンス：Rectangle構造体

@frozen  public struct Rectangle : Shape {
    public func path(in rect: CGRect) -> Path
    @inlinable  public init()
    public typealias AnimatableData = EmptyAnimatableData
    public typealias Body
}

Swift UIのRectangle構造体は名前通り矩形(長方形)を描画するための機能を提供する構造体です。Swift UIでは四角形や円形などさまざまな図形を表現するための構造体が用意されており、それらは全てShapeプロトコルに準拠しています。

Rectangle構造体を使用するだけではShapeプロトコルを意識する必要はありませんが、どのような役割を持っているかを理解しておきます。

Shapeプロトコルの役割

public protocol Shape : Animatable, View {
    func path(in rect: CGRect) -> Path
}

Shapeプロトコルはビューの形状を定義するためのプロトコルです。その形状に対してサイズや色などをカスタマイズするための機能も用意されています。また定義されているpath(in:)メソッドはCGRect型で座標を受け取り、描画するために必要になる形状のパス(Pathオブジェクト)を返す役割を持った欠かせないメソッドです。

画面上に何かしらの形を描画するために必要となる情報を保持しているようです。そしてその情報を元にRectangle構造体などが実際に描画しているようです。

矩形(長方形)を描画する

画面に矩形(長方形)を描画するためにはRectangleをインスタンス化し、fillメソッドで色を、frame(width:,height:)でサイズを指定します。fillメソッドは描画している矩形の中身を指定した色で塗りつぶすShapeプロトコルの持つメソッドです。

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 200, height: 200)
    }
}

これで以下のような四角形が実装できます。

ちなみにsizeメソッドでも同様にサイズを、foregroundColorでも色を変更することができます。sizeメソッドはShapeプロトコルのメソッドで、座標が指定されないので画面の左端になってしまいます。

Rectangle()
  .size(width:200,height:200)
  .foregroundColor(.blue)

輪郭線のみ表示する

四角形の輪郭線のみ表示させたい場合はShapeプロトコルの持つstrokeメソッドを使用します。

Rectangle()
  .stroke(Color.black, lineWidth: 2)
  .frame(width: 200, height: 200)

引数には私たちColor構造体が輪郭線の色を、引数lineWidthに輪郭線の太さを渡します。

色を変更する

fillメソッドやstrokeメソッドは引数に任意のColor構造体を渡すことで色を変更できます。

.fill(Color.blue)
.stroke(Color.black, lineWidth: 2)

RoundedRectangle構造体

参考文献：公式リファレンス：RoundedRectangle構造体

RoundedRectangle構造体は角が丸くなった矩形を描画するための構造体です。引数に任意の値を渡すことで角を丸めることができます。

RoundedRectangle(cornerRadius: 10)
      .stroke(Color.black,lineWidth: 2)
      .frame(width: 200, height: 200)

Rectangle構造体との違いと使い分け

Rectangle構造体でもcornerRadiusメソッドを使用することで角が丸くなった四角形を実装することは可能です。しかし輪郭線のみ表示させている場合ではcornerRadiusメソッドを使用すると以下のように角だけが抜け落ちたビューになってしまいます。

Rectangle()
  .stroke(Color.black,lineWidth: 2)
  .frame(width: 200, height: 200)
  .cornerRadius(10)

これはcornerRadiusを呼び出す順番がいけないような気もしますが、Shapeプロトコルの持つstrokeメソッドより前に持ってきてしまうと「Value of type 'some View' has no member 'stroke'」というエラーが発生してしまいます。ViewはShapeに準拠していないため当然ですね。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift