Xibを使ってTableViewのCellを登録・その１

前回の記事でStoryBoardを使わずにアプリ開発をする方法を書きました。
しかしStoryBoardを使うメリットの一つとしてUIを直感的に設置出来るという点があります。
今回はTableViewのCellをXibでデザインして、それをコードから呼出して設定する方法を紹介します。
今回はひとまずxibファイルを作る所まで！

• Xcode 8.3.3
• Swift 3.1

てかXibって何？

その前にXibとはXML Interface Builderの略らしいです。

コード内ではNibという名称で出てきます。
これはNextstep Interface Builderの略です。Nextstepの時点でお気付きだと思いますが、Apple様のいつものやつです。
こちらはバイナリファイルとなっており、XibもビルドするとNibに変換されるとかなんとか…

StoryBoardも結局Xibの集合体とも呼べると思います。
まぁその辺は私も深く理解はしていません。というかコードを実行する上では必要のない知識なのでUIを作る上で.xibというファイルを作って、コード上ではNibという名前で指定すれば動作する程度の認識で良いかと。

ゲーム開発フレームワーク作りたいとかpsdファイルから画面設計したいとかなら必須知識ですけどね😇
そんな修羅の道歩みたくないです😇

まずはXibファイルを作成

XcodeにてNew FileしてCocoa Touch Classを作成
Also create XIB fileにチェック
SubclassにUITableViewCellを指定
(名前は適当にExampleTableViewCellとしておきます)

するとExampleTableViewCell.swift, ExampleTableViewCell.xibが出来ると思います。
swiftファイルを確認すると確かにUITableViewCellを継承していることを確認出来るかと思います。

class ExampleTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

swiftファイルは今回はいじることはないのでそっ閉じでOKです🙆

xibファイルをクリックするとStoryBoardで見たような直感的(笑)の画面になるかと思います。
まず問題ないと思いますがCustom ClassがExampleTableViewCellになっていることを確認して下さい。
であとは好きにデザインして下さい。StyleやSelectionの項目をいじるなり、Labelを追加するなり😀

次の記事でコードからXibを利用する方法について書きます。
記事書くのも疲れる🙇