xibでカスタムセルを作成し、TableViewで使う手順【Swift開発メモ】 #20

Swift

Storyboard上に設置したTableViewで使用するTableViewCellを、
xibに定義して、TableViewに反映させる手順のメモ

1.Cell用のxibとxibソースを作成

「NewFile」→ 「CocoaTouchClass」

「Also create XIB file」にチェックして作成すると、
xibファイルとxibソース(.swift)が作成される。

Class名をこの先使うことになるので、
きちんと命名したほうが後悔しないですむ。

2.xibをカスタマイズする

xibを意図したデザインになるようにカスタマイズする。

基本的にはStoryboardでUIを作成する方法と同じ。

3.xibとxibソースを関連付ける

xibに乗せたlabelやらimageviewをxibソースと関連付けする。

xibソースが生成された時に、デフォルトでメソッドが作成されているが、
セル表示をさせる分には、必要ないので消してしまっても良い。

関連付けのみで基本動く。

※初期で生成されるメソッドについては、使い方を調べたら追記する

4.TableViewと関連付ける

作成したTableViewCellをTableViewで使用できるようにする。

ViewDidload内で、TableViewからxibで作成したセルを呼び出せるように、
「register」メソッドを使用する。

引数のUINibは、作成したxibのクラス名を指定。
bundleはnil。
forCellReuseIdentifierは、任意の名称を指定する。

tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)内で、ViewDidLoadで設定したxibのセル情報を呼び出す。

withIdentifierにはさっき任意で指定したforCellReuseIdentifierの名称を指定する。

これでTableViewのセルはxibで作成したものになる。

サンプルの「messageLabel」は、手順3で関連付けした要素である。

関連付けしたものに対してここで編集が可能。


以上。おわり。

コメント

タイトルとURLをコピーしました