UITableViewのセルをプロトタイプセルでカスタマイズ

シェアする

Header

UITableViewのセル(UITableViewCell)をプロトタイプセルを使ってカスタマイズする方法を説明します。デフォルトのセルではうまく表示できない情報を表示したい場合、独自のセルを作成するのが簡単です。

Interface Builderを使用してセルをデザインすることができるので、セル内の部品にオートレイアウトを適用し、適切に配置することもできます(iPhone / iPadに対応するのも簡単です)。

今回は上の画像のように各行に年齢と名前を表示するカスタムセルを作成します。

画面の準備

Table Viewの上にTable View Cellをドロップします。

Layout

「Prototype Cells」と表示された領域でセルをデザインします。例えば年齢と名前を表示したい場合、2つのLabelをドロップします。Labelの配置は通常の場合と同様オートレイアウトを適用できます

カスタムセルの作成

セルに対応したUITableViewCellのサブクラスを作成します。今回はPersonCellとしました。

Outlet

2つのラベルをPersonCellにCtrl+ドラッグしアウトレットを作成します。

PersonCellのソースコードは以下のようになります。

再びInterface Builderに戻ります。

Class

Identity InspectorでClassを「PersonCell」に変更し、Attributes InspectorでIdentifierを「personCell」に変更します。

ViewControllerの仕上げ

後はViewControllerのソースコードを編集してプログラムを仕上げます。

Personは名前と年齢を保持するだけの単純なクラスです。

cellForRowAtIndexPath内の処理がポイントで、dequeueReusableCellWithIdentifierで、”personCell”を取得していること、configureCellでセル内の情報を設定していることに注目してください。

まとめ

複雑な処理のように思えますが、一度慣れてしまえば簡単な作業です。UITableViewを使いこなす上でセルのカスタマイズはほぼ不可欠な作業かもしれません。早めにマスターしてしまえば今後の作業が楽になるでしょう。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

フォローする