📐

UIKitを使って四角いオブジェクトを表示してみる

2024/03/10に公開

iOS

Swift

uikit

tech

対象者

Swift勉強してる人
UIKitに興味がある人

やること/やらないこと

やること:
UIKitを使って四角いオブジェクトを作ってみる

やらないこと:
Appleさんのドキュメントが親切でないので、私の解説しかできません🙇

プロジェクトの説明

こちらを参考にStoryboardを削除して、UIKitを使えるように設定をした方が良いです。

どうやって四角いオブジェクトを作るのか?

とりあえず公式を見てみるか....

UIView

画面上の長方形領域のコンテンツを管理するオブジェクト。

@MainActor
class UIView : UIResponder

概要
ビューはアプリのユーザーインターフェイスの基本的な構成要素であり、UIViewクラスはすべてのビューに共通の動作を定義します。ビューオブジェクトは、その境界四角形内のコンテンツをレンダリングし、そのコンテンツとの対話を処理します。このUIViewクラスは、固定の背景色を表示するためにインスタンス化して使用できる具体的なクラスです。サブクラス化して、より洗練されたコンテンツを描画することもできます。アプリで一般的に見られるラベル、画像、ボタン、その他のインターフェイス要素を表示するには、独自の定義を試みるのではなく、UIKit フレームワークが提供するビューサブクラスを使用します。

ビューオブジェクトはアプリケーションがユーザーと対話する主な方法であるため、ビューオブジェクトには多くの役割があります。以下にほんの一部を示します。

描画とアニメーション

ビューは、UIKit または Core Graphics を使用して、長方形の領域にコンテンツを描画します。

一部のビュープロパティをアニメーション化して新しい値にすることができます。

レイアウトとサブビューの管理

ビューには 0 個以上のサブビューが含まれる場合があります。

ビューはサブビューのサイズと位置を調整できます。

自動レイアウトを使用して、ビュー階層の変更に応じてビューのサイズ変更と位置変更のルールを定義します。

イベント処理

ビューはのサブクラスでありUIResponder、タッチやその他の種類のイベントに応答できます。

ビューは、一般的なジェスチャを処理するためにジェスチャ認識機能をインストールできます。

ビューは他のビュー内にネストしてビュー階層を作成でき、これにより関連するコンテンツを整理する便利な方法が提供されます。ビューをネストすると、ネストされた子ビュー (サブビューと呼ばれる) と親 (スーパービューと呼ばれる)の間に親子関係が作成されます。親ビューには任意の数のサブビューを含めることができますが、各サブビューにはスーパービューが 1 つだけ含まれます。デフォルトでは、サブビューの表示領域がスーパービューの境界の外側に広がる場合、サブビューのコンテンツのクリッピングは発生しません。その動作を変更するには、プロパティを使用します。clipsToBounds

およびプロパティframeはbounds、各ビューのジオメトリを定義します。このframeプロパティは、スーパービューの座標系におけるビューの原点と寸法を定義します。このboundsプロパティはビューの内部寸法を表示どおりに定義し、その使用はカスタム描画コードのみにほぼ限定されます。center プロパティは、ビューframeのboundsプロパティを直接変更せずにビューの位置を変更する便利な方法を提供します。

クラスの使用方法の詳細についてはUIView、「View Programming Guide for iOS」を参照してください。

ビューを作成する
通常、ビューをライブラリからキャンバスにドラッグして、ストーリーボードにビューを作成します。プログラムでビューを作成することもできます。ビューを作成するときは、通常、将来のスーパービューを基準とした初期サイズと位置を指定します。たとえば、次の例ではビューを作成し、その左上隅をスーパービューの座標系の点 (10, 10) に配置します (ビューがスーパービューに追加されると)。

let rect = CGRect(x: 10, y: 10, width: 100, height: 100)
let myView = UIView(frame: rect)

ビューを描画する
ビューの描画は必要に応じて行われます。ビューが最初に表示されるとき、またはレイアウトの変更によりビューのすべてまたは一部が表示されるとき、システムはビューにそのコンテンツを描画するように要求します。UIKit または Core Graphics を使用したカスタムコンテンツを含むビューの場合、システムはビューのdraw(_:)メソッドを呼び出します。このメソッドの実装は、ビューのコンテンツを現在のグラフィックスコンテキストに描画する役割を果たします。このコンテキストは、このメソッドを呼び出す前にシステムによって自動的に設定されます。これにより、ビューのコンテンツの静的な視覚表現が作成され、画面に表示できます。

ビューの実際のコンテンツが変更された場合、ビューを再描画する必要があることをシステムに通知するのはあなたの責任です。これを行うには、ビューまたはビューのメソッドを呼び出します。これらのメソッドは、次の描画サイクル中にビューを更新する必要があることをシステムに知らせます。次の描画サイクルまでビューが更新されるまで待機するため、複数のビューでこれらのメソッドを呼び出して同時に更新できます。setNeedsDisplay()setNeedsDisplay(_:)

CGRect

長方形の位置と寸法を含む構造体。

概要
デフォルトの Core Graphics 座標空間では、原点は長方形の左下隅に位置し、長方形は右上隅に向かって伸びます。コンテキストに反転した座標空間がある場合 (iOS の場合がよくあります)、原点は左上隅にあり、長方形は右下隅に向かって伸びます。

トピック
四角形の値の作成
init(origin: CGPoint, size: CGSize)
指定された原点とサイズで長方形を作成します。
init(x: Double, y: Double, width: Double, height: Double)
浮動小数点値として指定された座標と寸法を使用して四角形を作成します。
init(x: Int, y: Int, width: Int, height: Int)
整数値として指定された座標と寸法を持つ四角形を作成します。
init(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)
値として指定された座標と寸法を使用して長方形を作成しますCGFloat。
特別な値
static var infinite: CGRect
無限の広がりを持つ長方形。
static var null: CGRect
無効な値を表す null の四角形。
static var zero: CGRect
原点とサイズが両方ともゼロである長方形。
init()
(0,0)原点とサイズを指定して長方形を作成します(0,0)。
基本的な幾何学的特性
var origin: CGPoint
長方形の原点の座標を指定する点。
var size: CGSize
長方形の高さと幅を指定するサイズ。
計算された幾何学的特性
var height: CGFloat
長方形の高さを返します。
var width: CGFloat
長方形の幅を返します。
var minX: CGFloat
長方形の x 座標の最小値を返します。
var midX: CGFloat
長方形の中心を確立する X 座標を返します。
var maxX: CGFloat
長方形の x 座標の最大値を返します。
var minY: CGFloat
長方形の y 座標の最小値を返します。
var midY: CGFloat
長方形の中心を確立する y 座標を返します。
var maxY: CGFloat
長方形の y 座標の最大値を返します。
派生長方形の作成
var standardized: CGRect
正の幅と高さの四角形を返します。
var integral: CGRect
ソース四角形の値を整数に変換した結果として得られる最小の四角形を返します。
func applying(CGAffineTransform) -> CGRect
長方形にアフィン変換を適用します。
func insetBy(dx: CGFloat, dy: CGFloat) -> CGRect
同じ中心点を持つ、ソース四角形より小さいまたは大きい四角形を返します。
func offsetBy(dx: CGFloat, dy: CGFloat) -> CGRect
ソース四角形の原点からオフセットされた原点を持つ四角形を返します。
func union(CGRect) -> CGRect
2 つのソース四角形を含む最小の四角形を返します。
func intersection(CGRect) -> CGRect
2 つの長方形の交点を返します。
func divided(atDistance: CGFloat, from: CGRectEdge) -> (slice: CGRect, remainder: CGRect)
元の長方形を分割して 2 つの長方形を作成します。
enum CGRectEdge
長方形のエッジを確立する座標。
特性の確認
func intersects(CGRect) -> Bool
2 つの長方形が交差するかどうかを返します。
func contains(CGPoint) -> Bool
長方形に指定された点が含まれるかどうかを返します。
func contains(CGRect) -> Bool
最初の四角形に 2 番目の四角形が含まれるかどうかを返します。
var isEmpty: Bool
四角形の幅または高さがゼロであるか、または null 四角形であるかを返します。
var isInfinite: Bool
長方形が無限であるかどうかを返します。
var isNull: Bool
四角形が null 四角形と等しいかどうかを返します。
代替表現
var dictionaryRepresentation: CFDictionary
指定された四角形の辞書表現を返します。
init?(dictionaryRepresentation: CFDictionary)
標準辞書表現から四角形を作成します。
var debugDescription: String
var customMirror: Mirror
デバッグで使用する四角形の構造と表示スタイルの表現。
var customPlaygroundQuickLook: PlaygroundQuickLook
プレイグラウンドで使用する四角形の表現。
廃止されました
長方形の比較
func CGRectEqualToRect(CGRect, CGRect) -> Bool
2 つの四角形のサイズと位置が等しいかどうかを返します。
タイプエイリアス
typealias CGRect.AnimatableData
インスタンスのプロパティ
var animatableData: CGRect.AnimatableData
インスタンスメソッド
func clip()
func fill(using: NSCompositingOperation)
func frame(withWidth: CGFloat, using: NSCompositingOperation)
func inset(by: UIEdgeInsets) -> CGRect
指定されたエッジインセットによって長方形を調整します。

解説が長い長い。しかし参考になりそうなものがテキストだけではない...
動画を参考にしつつ作ることにした。

プロジェクトを作った時のViewControllerに書いてください。名前は変えても良い。今回四角いオブジェクトを作るには、squareという変数に、UIViewとういクラスをインスタン化して、CGRectという構造体で横幅、高さを指定します。

四角形の背景色は、squreに.をつけると、backgroundColorというプロパティが使えるので、.blueを指定して、青色にしてます。

四角形を中央に配置するには、squreに、.をつけてcenterプロパティを使い = view.centerで中央寄せになるように指定します。

画面に表示するには、view.addSubview(UIViewを代入した変数)と書くとUIに表示できるようになります。
四角形を作るだけですごく手間がかかっている気がする💦

import UIKit

class FirstScreen: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 背景色がlight modeならwhite、dark modeならblackにする。
        view.backgroundColor = .systemBackground

        // 150x150の四角形を作成
        let square = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 150))

        // 四角形の背景色を設定
        square.backgroundColor = .blue

        // 四角形をビューの中央に配置
        square.center = view.center

        // 四角形をビューに追加
        view.addSubview(square)
    }
}

こんな感じですかね。四角オブジェクトを作るだけでこんなに手間がかかるのか...

感想

今回は、UIKitを使用して、青い四角形を作るだけをやってみました。これだけでも手間かかりましたね💦
いや〜UIKit難しいです〜。しかしSwiftUIだけだと作れないUIがあるようで、UIKitの知識が求められるようで最近勉強してます。