UITableViewのセルのカスタマイズの基本

シェアする

Header

UITableViewのセルを簡単にカスタマイズする方法を説明します。UITableViewCellにはもともとカスタマイズ能力が備わっているため、プロトタイプセルを作成して一から独自のカスタムクラスを作成しなくても、ある程度自由に表示内容を変更することができます。

デフォルトのセルのスタイルをうまく使いこなせれば、他のアプリと親和性が高く、見た目の違和感が少ないテーブルビューを作成することができます。

スタイルの使い分け

UITableViewのセルのスタイルによる見た目の違いを説明します。

まずSingle Viewプロジェクトを作成します。

S 2016 08 15 15 03 01 2

Interface BuilderでTable Viewをドロップし、その上にTable View Cellを4つドロップします。上からスタイルとIdentifierを以下のように設定します。

  • Basic: 基本スタイル。IDは”basic”
  • Right Detail: 説明が右寄せのスタイル。IDは”rightDetail”
  • Left Detail: 説明が左寄せのスタイル。IDは”leftDetail”
  • Subtitle: タイトルの下に説明のスタイル。IDは”subtitle”

Table ViewのデータソースとしてViewControllerを設定しておきます。ViewControllerのソースコードは以下のようになります。Personクラスは、名前やフリガナを保持するだけのシンプルなクラスです。

cellForRowAtIndexPathでは、Basic、Right Detail、Left Detail、Subtitleセルが順番に表示されるよう行ごとにIDを切り替えていることに注目してください。

Result

以下の順に表示されています。

  • Basic: 基本スタイル。1行目
  • Right Detail: 説明が右寄せのスタイル。2行目
  • Left Detail: 説明が左寄せのスタイル。3行目
  • Subtitle: タイトルの下に説明のスタイル。4行目

セルのスタイルによって、名前を設定したtextLabelや、読み仮名を設定したdetailTextLabelの有無や位置が変更されていることに注目です。

画像・アクセサリの追加

セルの左側に画像を、右側にアクセサリを追加する事もできます。

cellForRowAtIndexPathでセルのimageViewとaccessoryTypeを設定します。

Result2

画像とアクセサリ(矢印)が表示されました。アクセサリはaccessoryTypeで設定する以外にもaccessoryViewにUIViewのサブクラスを設定することもできます。

accessoryViewには、例えばUISegmentedControlやUISwitchを埋め込むことができるので、設定画面で各種設定値を保存する場合に便利に使うことができます。

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

シェアする

フォローする