カスタムセルクラスの作成 [Swift]

今回はTableViewのレイアウトを修正します。
主な作業としては以下になります。

• カスタムセルクラスの作成
• Main.storyboardにカスタムセルの適用
• セルのレイアウト

カスタムセルクラスの作成

まずはファイル作成です。

1. File を選択
2. New を選択
3. File... を選択
4. iOS Source の Cocoa Touch Class を選択
5. Class: ArticleTableViewCell と入力
6. Subclass of: UITableViewCell を選択
7. Also create XIB file: チェックなしのまま
8. Language: Swift を選択
9. Next を選択
10. 他のクラスファイルと同じディレクトリを選択
11. Create を選択

これで "ArticleTableViewCell" クラスが作成できました。

次にラベル等の部品用に、IBOutletを定義します。

今回定義したのは3つ。

• dateLbl: 日付用のLabel
• textLbl: テキスト用のLabel
• photoImgView: 写真用のImageView

Main.storyboardにカスタムセルの適用

まずはMain.Storyboardを開きます。

Main.Storyboardの画面サイズ設定
最初は、各画面がiPadのようなサイズになっています。
レイアウトするときにイメージしずらいので、iPhoneサイズにしました。
やり方は、ベースになるSplitViewControllerを選択して、Simulated MetricsのSizeで "iPhone 4.7-inch" を選択すると、画面がiPhoneサイズに変わります。

次に定義した3つの部品を配置していく...が、問題発生。
テンプレートで作成したTableViewCellには、始めからLabelが載っていたのだが、そのLabelの位置変更やサイズ調整が効かない、、削除することもできない。。。テンプレートの呪いですね。

そこで思い切ってTableViewCellごと削除して、新たに自分でTableViewCellを追加することにしました。
Cellを新しくすることで、Identifierと詳細画面の遷移が消えてしまうので、追加後元に戻すことに注意します。

これで自由に部品を設置できるようになりました！
引き続きカスタムセルの適用をやっていきます。

今度こそ3つの部品を配置して、画面とクラスを紐付けていきます。

まずは部品をいい感じに配置します。
そしてCellのCustom ClassのClassに、先程作成した "ArticleTableViewCell" を設定します。
そうすると、画面とクラスが紐付きます。

今度はOutletsで、先程定義した3部品を紐付けます。

後は、MasterViewController.swiftに3部品の処理を実装していきます。

実装は UITableViewCell → ArticleTableViewCell に変えていくのと、部品にダミーデータを設定することです。
修正箇所は以下の3メソッドになります。

セルのレイアウト

最後にレイアウトの調整ですね。
Main.Storyboardの部品に、実際にテキストや画像を設定しながらやると調整しやすいです。
実機で確認すると、より雰囲気が掴めて楽しいです。
まあ今の段階ではFixせず、ある程度で良いと思います。
実装している内に変更点がいっぱい出てくるので、今はあまり時間を掛けずに実装の終盤でレイアウトを見直します。