サーチ…


備考

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

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

配線要素

XIBファイルを作成する

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

最初の一歩

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

第二段階

ビューをデザインする

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

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

第3ステップ

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

第4ステップ

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

第5ステップ

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

第六ステップ

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

第七のステップ

サブクラスUIView

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

第8歩

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

ナインステップ

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

10番目のステップ

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

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

第11歩

ポケモン!!!

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

第12ステップ

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

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

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

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

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クラスに接続します。

13番目のステップ

アウトレットの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インスペクタ(右上)に移動し、クラスをポケモンに設定します。

第14ステップ

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

第15ステップ

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

第16ステップ

ここでは、自己完結型のカスタム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の仕組み

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

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

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

ラベルオブジェクトはmyLabel IBOutlet UILabel変数に接続されています

  1. .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