UITableView

本項目ではUITableViewの入門部分を書いていきます。 実装していく上でのステップは以下の通りです。

StoryBoardの設定

StoryBoardを使って

ソースコードのオブジェクトと紐付ける

StoryBoardで設置したオブジェクトをソースコード上で編集できるようにするには「@IBOutlet」を使います。 IBOutletについてはこちら どのように実装するかというととってもシンブルです。 以下のように、クラス変数としてUITableView!型の変数を定義してあげます。 そしたら次は、StoryBoardファイルを開きます。 今回追加したUITalbeViewにカーソルを合わせてメニューを表示します。 Reference Outletsの右にある丸いところからStoryboardへドラッグすると、 Storyboardと紐づいているソースコードで定義されたオブジェクトが表示されます。

デリゲートメソッドの実装

次にデリゲートメソッドを実装します。 デリゲートメソッドに関してはこちらで説明します。 まずはデリゲートメソッドを使える状態にしましょう。 手順は二つです。
  • UITableViewDelegateとUITableViewDataSourceを継承する。
  • UITableViewのオブジェクトのdelegateとdataSourceを設定する。
これでUITableViewのデリゲートメソッドを使えるようになります。 UITableViewのデリゲートメソッドはいくつかあります。
tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? セクションのヘッダーのビューを設定する
numberOfSections(in tableView: UITableView) -> Int セクションの数を設定する
tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int? 指定したセクションのセルの数を設定する
tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat セクションのヘッダーの高さを設定する
tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 各セルを設定する
詳しくはこちら 今回、デリゲートメソッドを使って以下のように実装しています。

xibファイルでカスタムセルを作成

カスタムビューを作成する手順は以下の通りです。
  • 「File -> New -> File」(command + N)から新しくファイルを作成
  • 「Cocoa Touch Class」を選択
  • 「Subclass of」はUITableViewCellを選択
  • 「Also create XIB file」にチェックを入れる
あとは保存先を選択してファイルを作成します。 余談ですが、今回はUITableViewCellでファイルを作ったので「Also create XIB file」にチェックを入れることができましたが、UIViewなどではそうはいきません。 その辺りはこちらに書きます。

カスタムセルを表示する

では、カスタムセルを実際に表示してみましょう。 手順は以下のような感じです。
  • xibファイルを好きなように構成する
  • xibファイルを読み込む
  • デリゲートメソッドで読み込んだxibファイルを表示する

xibファイルを好きなように構成する

ここは自由です。 まずは、Xibファイルから簡単に作成してみましょう。 ドラッグアンドドロップをしてUIを配置してみてください。

xibファイルを読み込む

では、作ったxibファイルを読み込んで、ソースコードで呼び出せるようにしましょう。 以下のように書くとできます。詳しく知りたい人はこちら

最終的なコード

最終的に、以下のようなコードが出来上がります。 UItableViewの初歩はこんな感じです。 お疲れ様です!