完全に理解する Storyboard & UIKit (Day 19): Custom Viewの作成とStoryboardでの利用

第5部に入ります。ここではよりインタラクティブで高度なUI表現を学びます。 まずは既存のUI部品（UIButton等）を使うのではなく、自分独自の機能や装飾を持った再利用可能なコンポーネント（Custom View）を実装する方法を解説します。

1. Custom Viewの基本実装

「枠線と角丸がつき、グラデーション背景を持つ特別なビュー」を色々な画面で使い回したいとします。 画面ごとに毎回コードを書くのではなく、UIView を継承した独自のクラスを作ります。

swift
import UIKit

// @IBDesignableをつけると、Storyboard上でこのViewの描画がリアルタイムでレンダリングされます
@IBDesignable
class RoundedCardView: UIView {

    // コードから初期化された時によばれる
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    // Storyboard/XIBから初期化された時によばれる
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    // 共通の初期設定
    private func setupView() {
        // 角を丸める
        self.layer.cornerRadius = 16
        // 影をつける
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOpacity = 0.2
        self.layer.shadowOffset = CGSize(width: 0, height: 4)
        self.layer.shadowRadius = 8
    }
}

Custom Viewの適用

1. Storyboardを開き、キャンバスにただの UIView を配置します。
2. 配置したViewを選択し、Identity Inspector (⌥⌘3) を開きます。
3. Class に、先ほど作成した RoundedCardView を入力します。

2. @IBDesignable の魔法

上記のコードでクラス名の前に付けた @IBDesignable というアノテーションは、非常に強力な機能です。

通常、カスタムビューに追加した角丸や影などの layer の変更は、アプリをビルドしてシミュレータで動かさないと確認できません。しかし @IBDesignable を宣言しておくと、Xcodeが裏側でこのクラスだけをコンパイルし、Storyboardのキャンバス上に実際の影や角丸が付いた状態をリアルタイムで描画・プレビューしてくれます。

これにより、ビルド＆ランの待ち時間を劇的に削減できます。

3. @IBInspectable でパラメータを公開する

自作ビューの「角丸の大きさ」や「枠線の色」を、コードを書き換えずにStoryboardの Attributes Inspector (⌥⌘4) からポチポチと変更できたら便利ですよね。 それを実現するのが @IBInspectable です。

先ほどのクラスにプロパティを追加してみましょう。

swift
@IBDesignable
class RoundedCardView: UIView {

    // @IBInspectableをつけることで、Storyboardのインスペクタに表示される
    @IBInspectable var cornerRadius: CGFloat = 16 {
        didSet {
            // Storyboard上で値が変更されたら、即座にレイヤーに反映させる
            self.layer.cornerRadius = cornerRadius
        }
    }

    @IBInspectable var shadowOpacity: Float = 0.2 {
        didSet {
            self.layer.shadowOpacity = shadowOpacity
        }
    }

    @IBInspectable var borderColor: UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    // init等は省略 ...
}

Storyboardでの確認

Storyboard内でこのViewを選択し、Attributes Inspector を見てください。 上部に自作の項目（Corner Radius, Shadow Opacity, Border Color 等）を持った専用のセクションが出現しているはずです。 ここで数値を変更すると、didSet が走り、@IBDesignable の力によってキャンバス上の表示グラフが即座に変化します。

デザイナーと協業する際や、汎用的なコンポーネントライブラリを作る際にこのテクニックは絶大な威力を発揮します。

📝 今日のまとめ

• UIView を継承したクラスを作成し、init(frame:) と init(coder:) の両方を実装することでカスタムビューを作成する。
• @IBDesignable をクラスに付与すると、Storyboard上でカスタム描画がリアルタイムで実行・プレビューされる。
• @IBInspectable を変数（プロパティ）に付与すると、Attributes InspectorのGUIから直接パラメータを編集できるようになる。
• 変更をリアルタイム反映させるために、プロパティの監視メソッド didSet の中でUIの更新処理を記述する。

自作の美しいコンポーネントを作れるようになりました。しかし、UIがピタッと止まったままでは面白みがありません。 明日の Day 20 では、UIKitにおける「アニメーション（UIView Animation）」の基礎を学び、アプリに滑らかな動き（モーション）を取り入れます。