Custom UIView: その概要、作成方法、drawRectのオーバーライド

Custom UIViewとは何か、いつ必要か

Custom UIViewは、UIViewから継承したユーザー定義のクラスで、開発者が標準メソッドをオーバーライドしてカスタムの表示およびインタラクションロジックを実装するものです。UIKitには多くの組み込みコンポーネントが含まれていますが、アニメーショングラフ、カスタムスイッチ、フリーハンド描画キャンバス、ゲーム要素、データ可視化など、すべてのシナリオをカバーしているわけではなく、カスタム実装が必要です。

Appleは、標準コンポーネントが必要な機能を提供できない場合、または同じカスタム要素がアプリケーションの複数の場所で使用される場合に、カスタムUIViewの作成を推奨しています。WWDC 2024によると、中規模プロジェクトではカスタムビューが全UIViewの平均15〜20%を占めています。

典型的な使用シナリオ

カスタムUIViewは、グラフや図表の構築（Core Graphicsによる線や図形の描画）、カスタム進行状況インジケーター、アニメーション背景、指描画要素、リアルタイムデータ可視化に使用されます。これらの各ケースで、開発者はCGContextへの完全なアクセスを取得し、任意のジオメトリを描画できます。

Custom UIViewが不要な場合

要素を標準のUIKitコンポーネント（UIButton、UIImageView、UILabel）からAuto Layoutとプロパティ設定を使用して組み立てられる場合、UIViewのサブクラスを作成するのは過剰です。Appleはまず既製ビューの構成を試し、機能が不十分な場合にのみカスタム描画に移行することを推奨しています。

XcodeでCustom UIViewを作成する方法

カスタムUIViewの作成は、UIViewから継承するクラスの宣言と、必須イニシャライザの実装から始まります。最小限の実装には、コードから作成するためのinit(frame:)と、StoryboardまたはXIBからロードするためのinit(coder:)が含まれます。

import UIKit

class CircleView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .clear
        setupLayerProperties()
    }

    private func setupLayerProperties() {
        layer.cornerRadius = bounds.width / 2
        layer.masksToBounds = true
    }
}

setupView()メソッドでは、透明な背景、レイヤー設定などの初期プロパティが設定されます。ビューがInterface Builderで表示される場合は、ライブプレビューのために@IBDesignableと@IBInspectableを追加する価値があります。

UIViewのライフサイクルメソッド

Custom UIViewは、特定の順序で呼び出される一連のライフサイクルメソッドを通じてシステムによって管理されます。このサイクルを理解することは、ビューの正しい設定と描画にとって非常に重要です。

すべてのメソッドはシステムによって自動的に呼び出され、開発者が手動で呼び出す必要はありません。例外はsetNeedsDisplay()で、システムにdraw(_:)の再呼び出しを通知します。

描画のためのdraw(_:)のオーバーライド

draw(_:)は、Custom UIViewでのカスタム描画のための主要メソッドです。このメソッド内で、開発者はCGContext（グラフィックコンテキスト）へのアクセスを取得し、Core Graphicsを使用して線、図形、テキスト、画像を描画できます。

システムは、ビューが画面に初めて表示されたときに自動的にdraw(_:)を呼び出します。後続の呼び出しは、ビューを再描画が必要としてマークするsetNeedsDisplay()によってトリガーされます。重要：draw(_:)を直接呼び出さないでください。キャッシュメカニズムが破壊され、パフォーマンスが低下します。

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }

    // 背景塗りつぶし
    context.setFillColor(UIColor.systemBlue.cgColor)
    context.fill(rect)

    // 円を描く
    context.setStrokeColor(UIColor.white.cgColor)
    context.setLineWidth(4.0)
    let circleRect = rect.insetBy(dx: 20, dy: 20)
    context.strokeEllipse(in: circleRect)
}

この例では、draw(_:)は背景を青色で塗りつぶし、端から20ピクセルの余白で白い円を描画します。draw(_:)の各呼び出しはべき等でなければなりません。同じパラメータでの複数回の呼び出しは同じ結果を生成する必要があります。

効果的なdraw(_:)のルール

Appleはdraw(_:)内の作業を最小限にすることを推奨しています。UIBezierPathを事前に作成し、画像をキャッシュし、重い計算を実行しないでください。ビューが静的な場合は、絶え間ない再描画の代わりに、レンダリングされた画像を持つUIImageViewの使用を検討してください。

CALayer vs draw(_:): どちらを選ぶか

CALayerは、UIViewの視覚コンテンツを管理する基盤レイヤーです。多くのカスタム描画タスクは、draw(_:)をオーバーライドせずにCALayerのプロパティを設定することで解決でき、これは大幅に効率的です。

Apple Engineering（2024）によると、CALayerレベルの操作はGPUで実行され、draw(_:)はCPUベースのCore Graphicsレンダリングを通じて機能します。アニメーションやスムーズなトランジションには、CALayerとCABasicAnimationを使用することをお勧めします。

アニメーション付きのベクター図形を描画するには、CAShapeLayerを使用してください。ハードウェアアクセラレーション対応で、draw(_:)を呼び出さずにpath、strokeStart、strokeEndのアニメーションをサポートします。

Custom UIViewのパフォーマンス最適化

Custom UIViewのパフォーマンスは、アニメーションの滑らかさと全体的なユーザーエクスペリエンスに直接影響します。主な問題は、draw(_:)の過剰な呼び出し、サブビューの最適でないレイアウト、キャッシュの欠如から発生します。

不要な再描画を避ける

setNeedsDisplay()の各呼び出しは、ビューの完全な再描画をトリガーします。変更がビューの一部のみに影響する場合は、特定の矩形を指定してsetNeedsDisplay(_:)を使用してください。CALayerのプロパティ（backgroundColor、cornerRadius、shadow）には再描画は不要です。GPUレベルで更新されます。

レンダリングされたコンテンツのキャッシュ

Custom UIViewのコンテンツがめったに変更されない場合は、UIGraphicsImageRendererで一度レンダリングし、UIImageとして保存します。次の再描画では、draw(at:)を使用してキャッシュされた画像を表示します。Core Graphicsでの再レンダリングよりも数十倍高速です。

func renderToImage() -> UIImage {
    let renderer = UIGraphicsImageRenderer(size: bounds.size)
    return renderer.image { ctx in
        drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
}

静的レイヤーにはshouldRasterizeを使用する

CALayerのshouldRasterizeプロパティは、レイヤーのラスター表現のキャッシュを有効にします。透明度と影のある静的なビューでこれを有効にすると、コンポジットの負荷が軽減されます。アニメーションビューでは無効にしてください。変更のたびにキャッシュがリセットされ、ラスター化はパフォーマンスを低下させるだけです。