Swift言語で始めるiOSアプリ入門 – UITableViewを使ってみる

技術

どうも、松山事務所の石丸です。

前回まででLabel、Buttonの基本的な使い方をやってきたので、今回は少し複雑な TableView というコントロールを使ってみます。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる

テーブルといってもiPhoneのメモアプリのトップ画面のような、リスト形式でデータを表示するコントロールになります。

開発環境はOS X Yosemite(ver10.10.4)、Xcode(ver6.4)になります。

 

 icon-check 下準備

今回もiOSのSingle View Applicationプロジェクトを作成したら、画面左のProject NavigatorからMain.storyboard選択し、画面いっぱいにTableViewを配置します。

TableViewControllerではなく TableView であることに注意してください。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像1

TableViewをコードに接続するためにアシスタントエディタに切り替えます。

画面左のInterface Builderからcontrolキーを押しながらTableViewを、画面右のソースコードエディタにドラッグ&ドロップします。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像2

変数名は memoTableView としました。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像3

 

 icon-check TableView

今回使用する TableViewコントロールは前回使用したLabelやButtonに比べて複雑なコントロールです。
表示する行数や表示する内容はアプリケーションごとに異なるので、TableViewを使用するためには次の2つの情報が必要になります。

・何行表示するのか
・N行目には何を表示するのか

TableViewがどこに対して問い合わせたらその情報が得られるのか。その問い合わせ先をInterfaceBuilderで設定していきます。

IntefaceBuilderでTableViewをcontrol+クリックすると、接続情報が確認できるダイアログが表示されます。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像4

このdataSourceとdelegateをViewControllerに接続します。

 

controlキーを押しながらViewControllerへドラッグ・アンド・ドロップしてください。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像5

dataSourceとdelegateの両方を接続したら接続情報ダイアログは次のようになります。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像6

 

 icon-check プロトコルの実装

TableViewの問い合わせ先に指定したViewControllerに、問い合わせに答える処理を実装していきます。

TableViewが表示される適切なタイミングで、TableViewから問い合わせがくるので、アプリケーションはその問い合わせに対して答えてあげればあとはTableViewがやってくれます。

TableView 何行表示すればいいですか?
アプリ 10行お願い
TableView N行目に表示する情報をください
アプリ これを表示しといて

 

こんな会話を成立させるために、アプリケーションで「行数を伝える」、「表示する内容を伝える」といったプロトコル(会話の約束事、手順)を実装します。

ViewController.swiftは次のようになります。

1行目:クラス定義に UITableViewDelegate , UITableViewDataSource プロトコルを追加。
7行目:TableViewのセルを識別するIDの登録処理を追加。
15〜17行目:TableViewが表示する行数を返すメソッドを実装。
19〜23行目:TableViewが表示する内容を返すメソッドを実装。

TableViewの表示内容を返すメソッドは1行分のデータを表すTableViewCellオブジェクトを取得して、表示するテキストに行番号を設定しています。TableViewが何行目の情報を要求しているのかは indexPath rowに設定されています。

 icon-exclamation-circle ハマリポイント
さらっと説明しましたが、7行目 registerClass を忘れると実行時にエラーになります。WebでTableViewのサンプルを探すと、 dequeueReusableCellWithIdentifier でcellが取得できなかったら作成する形になっているものをよく見かけますが、TableViewの仕様変更で今では前もって registerClass で登録しておく必要があるようです。

 

 icon-check 実行

さて、長々とやってきた割に見た目には全くおもしろくありませんが一応実行しておきましょう。

Swift言語で始めるiOSアプリ入門-UITableViewを使ってみる_画像7

20行のリストが表示されてテキストには行番号が表示されています。行番号は0からのようですね。

TableViewは結構な頻度で使用されるコントロールかと思います。

 

今回はここまで。

ありがとうございました!

 

̃Gg[͂ĂȃubN}[Nɒlj