asky

主にAndroidやiOSの開発について綴っています。また、使っている好きなアプリや全く関係のない話はDiaryで書いていきたいです。

Objective-C:カスタムセルを使ったUITableView

【環境】Xcode8.0

テーブルを使う時はセルのカスタマイズを よくすると思います。
私は作成する時に手順をよく忘れてしまいがちなので、
定型として使えるようのメモとして(^_^)

1. カスタムセルを作成

新規作成でセルを作成します。
New File > Cocoa Touch Class

f:id:asky0113:20161001215601p:plain

f:id:asky0113:20161001215603p:plain

Also create XIB fileにチェックを入れて
XIBファイルも作成できるようにします。

f:id:asky0113:20161001215602p:plain

今回のカスタムセルは
ImageView × 1つ、Label × 2つをセットしています。

どちらのLabelも高さは
動的に高さを変化させたいと思います。

2. Main.storybardにTableViewを配置

( 1 ) テーブルビューを配置。

f:id:asky0113:20161001220505p:plain

( 2 ) セルを配置&指定。

Table View Cell をテーブルビュー内に配置します。
そして、作成するセルのクラス名を指定します。

f:id:asky0113:20161001221647p:plain

( 3 ) セルのIdentifierを指定

コードを書いてビルド後
Prototype table cells must have reuse identifiers
というエラーが出ました(´・_・`)

という事で、Table View Cellのidentifierに"Cell"を指定します。
コードを見ると「確かに!!」ですね(・ω・)ノ

f:id:asky0113:20161001225051p:plain

3. ViewControllerを編集

ViewController.hへTableViewを紐付けておきます。
※ Table View Cell は紐付けません。

結果画面

f:id:asky0113:20161001235437p:plain

今回は定型として極力シンプルにしたかったので、
セル数やセルの高さは固定にしています。

ラベルのテキスト・画像の指定も同じものが繰り返されています。

参考サイト
【Xcode5】xibファイルを使ったカスタムセルの作り方 » ブロードヒューマンネットワーク社員ブログ

4. セルの高さを動的にする

今回は画像・タイトル・コンテンツをNSArrayへ入れたものを
取り出して表示します。
その時、タイトルとコンテンツの文字列の長さはまちまちなので、
セルの高さを計算し、動的にしました。 < br />

先ほどのViewController.mを編集していきます。


結果画面

f:id:asky0113:20161010163838p:plain

備忘録
swift3の時は下記コード
【viewDidLoad】
// カスタムセルを使用
_tblView.register(UINib(nibName: "MainTableViewCell", bundle: nil), forCellReuseIdentifier: "Cell")
【cellForRowAt indexPath】
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! CustomCell