【Swift】XIBの使い方。部品のファイルを作って後で再利用できるようにする。(Swift 2.1、XCode 7.2)

2020年6月16日

XIBとは

XIBとは、XML Interface Builderの略で、部品の構造をXMLで記述したものをいう。

例えば、下図のようにラベルやスイッチの部品を配置したものが、

部品を配置する

 

以下のような書き方でファイルに保存されるといったイメージだ。

XMLサンプル

 

TableViewCellの記事で、下図のようにセルの中にラベルを3つ入れて自作セルを作ったことを思い出して欲しい。⇒「記事

もし別のテーブルビューで同じ自作セルを使いたい場合どうするか。その記事の方法では自作セルの作り直しになる。このような簡単な自作セルなら大した作業ではないが、中身が複雑になったときは大変だ。

そんなときに利用されるのがXIBを利用した部品作成である。部品をXIBファイルとして切り出しておいて、あとで別のところで再利用するイメージだ。

スタイルにcustomを設定

XIBを使って部品を作る

ではXIBで自作セルを作ってテーブルビューに表示してみよう。

まずはテーブルビューの部品の準備をする。テーブルビューをデバイス画面に配置し、Ctrlキーを押しながらテーブルビューをデバイス画面の上にある黄色い丸に運ぶ。ポップアップで表示されたメニューから「dataSource」を選択する。

デバイス画面にテーブルビューを追加

 

次に、下図黄緑枠のボタンを押してアシスタントエディタを開く。Ctrlキーを押しながらテーブルビューをソースコードに運んでポップアップの設定画面を開く。Connectionに「Outlet」、Nameに「testTableView」を入力してConnectボタンを押す。これでソースコードからテーブルビューを操作できるようになった。

テーブルビューとソースコードのコネクションを確立する

 

次に、自作セルの部品の準備をしよう。作成するファイルは、自作セルの構造を記述するXIBファイルと、自作セルを操作するためのSwiftファイルになる。

メニューから「File」⇒「New」⇒「File…」を選択する。
新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

ちなみに、Cocoa Touchとは、画面部品を利用するためのアプリケーションフレームワークのことである。これから画面部品のクラスを作るのでCocoa Touch Classを選択するということだ。
Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestTableViewCell」、Subclass ofに「UITableViewCell」を入力する。XIBファイルも一緒に作るために「Also create XIB file」にチェックを入れて、Nextボタンを押す。

ファイル名を入力する。

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。
保存場所を指定する

 

すると、ファイルのリストにXIBファイルとSwiftファイルが追加される(下図赤枠)。
ファイルのリストにXIBファイルとSwiftファイルが追加された

 

TestTableViewCell.xibを選択すると真ん中にセルの画像が表示される。XIBファイルの中身はXML形式のファイルだが、XCodeではストーリーボードと同じように部品の画像を見ながら編集できるのだ。

セルの中にラベルを3つ追加する(下図赤矢印)。続いて、黄緑枠のアトリビュートインスペクタボタンを押したあとにラベルを1つずつ選択しながらColorを赤、青に変更する。
セルにラベルを追加する

 

次に下図紫枠のアシスタントエディタボタンを押してTestTableViewCell.swiftを表示する。続いて、Ctrlキーを押しながら赤いラベルをソースコードにドラッグ&ドロップで運ぶ。ポップアップの設定画面のConnectionに「Outlet」、Nameに「testLabel1」を入力してConnectボタンを押す。

同じ手順で、青いラベルは「testLabel2」、黒いラベルは「textLabel3」でコネクションを確立する。これでソースコードからラベルの値を操作できるようになった。

ラベルとソースコードのコネクションを確立する。

 

次にViewController.swiftを開く。

以下のコードは、自作セルをテーブルビューに登録してデータを表示する例。

viewDidLoadメソッドの中で、TestTableViewCellクラスのインスタンスを取得し、識別子をTestCellとしてテーブルビューに登録している。「データを返すメソッド」と「データの個数を返すメソッド」はUITableViewDataSourceプロトコルの必須メソッドで、「データを返すメソッド」の中で自作セルを取得し値を設定している。

 

以下は実際のプレイ動画