*

Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法

公開日: : 最終更新日:2014/08/05 Objective-C


スポンサードリンク



本エントリーでは、Xcode5のテーブルビューにUINibを使ったカスタムセル(UITableViewCell)を表示する方法を説明させていただきます。

Xcodeのバージョンは5.1.1となります。

1 プロジェクトの作成

まずは、プロジェクトを作成します。

プロダクト名:UseUinibTableViewSample
テンプレート:SingleView View Template
デバイス:iPhone
を指定してプロジェックとを作成してください。

2 UITableViewの配置とカスタムセルクラスの作成

UITableViewの配置

Main.storyboardを選択しストーリーボードをエディタエリアに表示し「Table View」を配置します。
スクリーンショット 2014-08-04 13.35.37

とりあえず画面全体に配置しました。Outlet接続も配置後に行っておく必要があります。

スクリーンショット 2014-08-04 14.56.06

表示された画面のnameにtableViewを指定して「Connect」をクリックします。
スクリーンショット 2014-08-04 15.19.35

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

次はカスタムセルクラスの作成です。

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

プロジェクトナビゲーターで右クリックメニューを表示し「New File …」をクリックします。
スクリーンショット 2014-08-04 13.42.49

表示された画面でObjective-C classを選択し「Next」をクリックします。
スクリーンショット 2014-08-04 13.46.14

次の画面ではclassにCustomTableViewCell、Subclass ofにUITableViewCellを指定し、
Auto create XIB fileをチェックし「Next」をクリックします。
スクリーンショット 2014-08-04 13.46.14

最後の画面は「create」ボタンを押すだけです。
スクリーンショット 2014-08-04 13.59.03

以上でカスタムセルクラスの作成が完了しました。

3 UITableViewのセルにカスタムセルクラスを設定する

Table View Cellを配置し作成したカスタムセルクラスを指定する

Table View Cellの配置

ストーリーボードで配置済みのテーブルビューに「Table View Cell」を配置します。
スクリーンショット 2014-08-04 14.15.59

配置後の画面は以下のようになります。
スクリーンショット 2014-08-04 14.19.53

カスタムセルクラスの設定

先ほど配置した「Table View Cell」を選択し「Identity inspector」の「Custom Class」にCustomTableViewCellを指定します。
スクリーンショット 2014-08-04 14.29.53

同様に「Table View Cell」を選択し「Attributes inspector」の「identifier」に”Cell”を指定します。
スクリーンショット 2014-08-04 15.48.13

4 xibに固定のラベルを配置し、ViewControllerでカスタムセルを表示するように変更を実施する

xibに固定のラベルを配置

プロジェクトナビゲーターでCustomTableViewCell.xibをクリックし、エディタエリアに表示します。
スクリーンショット 2014-08-04 14.39.14

Labelをxibに配置します。
スクリーンショット 2014-08-04 14.40.35

Labelをダブルクリックして表示Textを”カスタムセルに配置したラベル”に変更します。スクリーンショット 2014-08-04 14.44.26

ViewControllerの変更

ViewController.hの変更

テーブルビューを制御するために必要なUITableViewDelegateプロトコルとUITableViewDataSourceプロトコルを追加しました。

ViewController.mの変更

変更点は4つです。

  • viewDidLoadでtableViewのdelegateとdataSourceにselfをセット
  • viewDidLoadでtableViewにカスタムセル(CustomTableViewCell)を指定
  • -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)sectionメソッドを追加
  • -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPathメソッドを追加

ViewController.mは以下のようになりました。

実行結果

実行結果は以下のようになりました。
スクリーンショット 2014-08-04 16.03.28

iOS7でおこる問題に対応していないのでテーブルビューの位置がいけてないですが
行数は5で、全ての行にCustomTableViewCell.xibで定義したラベルの内容がそのまま表示されています。

5 xibに配置されたコンポーネントに動的に値を表示する

動的と言っても配列に辞書を格納して、辞書に格納されている値をCustomTableViewCell.xibの各コンポーネントに格納するだけです。

xibの変更とOutlet接続

名前と生年月日を表示するようにします。
スクリーンショット 2014-08-04 17.33.47

実際に名前が表示されるラベルと実際に生年月日が表示されるラベルをCustomTableViewCell.hにOutlet接続します。
実際に名前が表示されるラベルの名前はlblName
実際に生年月日が表示されるラベルの名前はlblBirthDay
とそれぞれします。

Outlet接続後のCustomTableViewCell.hは以下のようになりました。

ViewControllerの変更

変更する内容は以下の通りです。

  • テーブルビューに表示する辞書を要素とする配列を定義し、viewDidLoadで値をセットする。
  • ダミー実装の2メソッドの修正

テーブルビューに表示する辞書を要素とする配列を定義し、viewDidLoadで値をセット

テーブルビューに表示する辞書を要素とする配列はViewController.hに追加しました。

ViewController.h

viewDidLoadで値をセットで値をセットしますが、リテラルで辞書のキーを指定しないといけない箇所が複数あるため、辞書のキーとなる文字列をViewController.mで下のようにdefineしました。

rowsDataArrayに値をセットする処理を追加したviewDidLoadは以下のようになりました。

実際にはrowsDataArrayにCoreData等のデータを読み込むのですが、データを流し込んでしまうとデータソースを意識することはないです。とはいえ、取り扱うデータ量が多くなる場合は一括読み込みではなく、分割読み込みにしないといけないので注意が必要です。

ダミー実装の2メソッドの修正

ダミー実装の2メソッドの修正はお膳立てが全てできているので特に説明すべき内容はありません。

実行結果

修正後の実行結果は以下のようになりました。
今回のカスタムセルは文字だけですのでイマイチ見栄えがしませんが、このやり方で色々なカスタムセルに対応できると思います。
スクリーンショット 2014-08-04 18.39.57

「Xcode5&Objective-CでUITableViewでUINibを使ったカスタムセル(UITableViewCell)を利用する方法」は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Xcode5の「Auto Layout」機能の使い方[制約の編集方法]

Xcode5の「Auto Layout」機能の使い方と Xcode5の「Auto Layout

記事を読む

iOS(Xcode6とObjective-C)におけるマルチスレッド(非同期)処理の実装方法その2[GCD(Grand Central Dispatch)の利用]

本エントリーではGCD(Grand Central Dispatch)を利用したiOSのマルチスレッ

記事を読む

Xcode5のプロジェクトへのファイルやフォルダの追加方法

Xcodeでアプリ開発を行う時に、イメージ(画像)の表示は必須な処理であると言えます。 本エントリ

記事を読む

Xcode(Objective-C)のデリゲートとプロトコルの使い方[前編]

Xcode(Xcode5でも同様)でアプリ開発をしていて、少し複雑な事をしようとするとデリゲートと言

記事を読む

Xcodeのユーティリティエリアの使い方[ソースファイル表示時]

本エントリーでは、Xcodeの「ユーティリティエリア」の使い方を説明させていただきます。 利用

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[後編:データのやり取り]

では、セグエを利用した画面遷移を実装しました。 後編では、各画面間でデータのやり取りを行えるよ

記事を読む

Xcode5&Objective-Cでセグエを利用して画面遷移を実現する。[前編:モックの作成]

iPhoneアプリの画面遷移と言えば、真っ先に挙がるのが「ナビゲーションコントローラ」なのですが

記事を読む

Xcode5でSchemeを利用する。[前編]

Xcode5の「Scheme」の作成方法や使い方のエントリーとなります。 思った以上に内容が多くな

記事を読む

Xcodeの使い方

Objective-Cでコーディングを行うための統合開発環境のXcodeの利用方法のエントリーです。

記事を読む

Xcodeのユーティリティエリアの使い方[ストーリーボード表示時の「Attributes」,「Size」,「Connections」Inspector]

本エントリーでは、「Xcodeのユーティリティエリアの使い方」に引き続き、「ストーリーボード」表示時

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑