iOS => XIBファイルからのカスタムUIView

備考

Appleから：Interface Builderでレンダリングするカスタムビューを作成する

注意：あなたのXIB要素（UILabelやUITextFieldなど）に派手な「カスタム」フォントを使用する場合は、選択したフォントとシステムのバージョンによって、XIBの初期読み込み時間が長くなることに注意してください。

配線要素

XIBファイルを作成する

Xcodeメニューバー>ファイル>新規>ファイルを選択します。
iOS、ユーザーインターフェース、「表示」を選択します。

あなたのXIBに名前を付けてください（はい、私たちはポケモンの例doingをやっています）。
ターゲットを確認して 「作成」を押してください 。

ビューをデザインする

簡単にするには、次のように設定します。

サイズ：フリーフォーム
ステータスバー：なし
トップバー：なし
ボトムバー：なし

サイズインスペクタをクリックし、ビューのサイズを変更します。
この例では、幅321と高さ256を使用します。

以下に示すように、いくつかの要素をXIBファイルにドロップします。
ここでは、 画像ビュー （256x256）とスイッチを追加します。

「自動レイアウトの問題の解決」（右下）をクリックし、「すべてのビュー」の下の「不足している制約を追加」を選択して、自動レイアウト制約を追加します。

「アシスタントエディタを表示する」（右上）をクリックして「プレビュー」をクリックして行った変更をプレビューします。
iPhoneの画面を追加するには、「プラス」ボタンをクリックします。
プレビューは次のようになります。

サブクラスUIView

XIBファイルを管理するクラスを作成します。
Xcodeメニューバー>ファイル>新規>ファイルを選択します。
iOS / Source / Cocoa Touch Classを選択します。「次へ」を押します。

クラスに名前を付けます。名前はXIBファイル（Pokemon）と同じ名前でなければなりません。
サブクラスの種類としてUIViewを選択し、 "次へ"を押します。

次のウィンドウでターゲットを選択し、「作成」をクリックします。

"File's Owner"属性を使ってPokemon.swiftにPokemon.xibを接続する

XcodeのPokemon.xibファイルをクリックします。
「File's Owner」アウトレットをクリックします。
「IDインスペクタ」（右上）で、クラスを最近作成したPokemon.swiftファイルに設定します。

ポケモン!!!

はい！いくつかのポケモンをあなたのプロジェクトにドラッグアンドドロップして、 "インフラストラクチャ"を完成させましょう。
ここでは、透明な2つのPGNファイル、256x256を追加しています。

コードをすでに表示しています。

いいですよ。
Pokemon.swiftクラスにコードを追加する時間。

実際にはとてもシンプルです。

必要なイニシャライザを実装する
XIBファイルを読み込む
XIBファイルを表示するビューを構成する
上記のビューを表示する

Pokemon.swiftクラスに次のコードを追加します。

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignableと@IBInspectable

クラスに@IBDesignableを追加することで、Interface Builderでライブレンダリングできるようになります。
@IBInspectableをクラスのプロパティに追加することで、カスタムビューがInterface Builderで変更されるのを、それらのプロパティを変更するとすぐに見ることができます。

カスタムビューのImage Viewを "Inspectable"にしましょう。

まず、 Image ViewをPokemon.xibファイルからPokemon.swiftクラスに接続します。

アウトレットのimageViewを呼び出し、次のコードを追加します（クラス名の前に@IBDesignableに注意して@IBDesignable ）。

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

カスタムビューの使用

メインのストーリーボードファイルに、UIViewをドラッグします。
ビューのサイズを200x200と変更します。集中化する。
IDインスペクタ（右上）に移動し、クラスをポケモンに設定します。

ポケモンを選択するには、アトリビュートインスペクタ（右上）に移動して、素晴らしい@IBInspectableイメージプロパティを使用して以前に追加したポケモンイメージの1つを選択します。

今度はあなたのカスタムポケモンビューを複製してください。
サイズを変えてください（例：150x150）。
別のポケモンイメージを選択してください：

ここでは、自己完結型のカスタムUI要素にさらにロジックを追加します。
ボタンはポケモンの有効/無効を許可します。

IBActionをSwitchボタンからIBActionクラスに作成します。
switchTappedようなアクションを呼び出します。
次のコードを追加します。

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

最終結果：

あなたは終わった！
複雑なカスタムビューを作成し、必要な場所で再利用することができます。
これにより、コードを自己完結型のUI要素に分離しながら生産性が向上します。

最終プロジェクトはGithubでクローン化することができます。
（ Swift 3.1に更新されました ）

XIBを使用して再利用可能なカスタムUIViewを作成する方法

次の例は、XIBからビューを初期化する手順を示しています。

これは複雑な操作ではありませんが、例外を避けて最初に正しく実行するためには、正確な手順に従う必要があります。

loadNibNamedの仕組み

主な手順は次のとおりです。

XIBの作成
クラスを作成します.hと.m
.hでアウトレットを定義する
.hとXIBの間にアウトレットを接続する

添付のスクリーンショットを見る：

.mファイルのinitWithCoder関数内でloadNibNamedを呼び出します。これは、UIViewオブジェクトをストーリーボード/親UIView XIBファイルに直接配置してカスタムビューとして定義できることを保証するために必要です。ストーリーボード/親XIBをロードすると、他の初期化コードは必要ありません。カスタム表示は、XCodeで与えられた他のビルトインObjective Cビューオブジェクトと同様に、他のビューに追加することができます。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

iOS
XIBファイルからのカスタムUIView

サーチ…

備考

配線要素

XIBを使用して再利用可能なカスタムUIViewを作成する方法