Swift TableView 初心者向け とりあえず動かす


目的

初心者の頃に非常に苦しんだUITableViewを、
情報整理ついで記事にしてみようと思います。
※かなりざっくりなので、わかっている人向けではないです。
完成版をgithubにあげています。

バージョン情報

Xcode 7.3
Swift 2.2

UITableViewって?

UITableViewはiPhoneアプリを使ったことがある人なら見たことがあると思います。
様々なアプリを作る上で、使う場面がかなり多いUIになります。
以下の写真は今回作るやつです。

UITableViewには、

  • UITableViewDataSource (データを表示するデータについて)
  • UITableViewDelegate (どんな操作がテーブルビューにされたか)

大きく上の2つがありますが、正直意味わからないと思います。
今回はこれらを意識して組まずに、ViewControllerのみで組みたいと思います。
という意味もわからないと思いますので、とりあえず組んでみましょう。

プロジェクト作成〜ストーリーボード

1.プロジェクト作成
File->New->Project->Single View Application->適当に名前つける。

2.ViewControllerにTableView置きます。

3.cellを置いて、名前つけます。(cellって名前です)

4.TableViewとStoryBoardを関連づけます。(ctr押しながらドラッグ)
 outletのままで、simpleTableViewと入力してconnectしてください

コーディング

swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

UITableViewDataSource, UITableViewDelegateを追加してください。
エラーが出ますが、正しい動きなので気にしないでください。


swift
let itemes = ["Sleepy", "Sneezy", "Bashful", "Happy",
              "Doc", "Grumpy", "Dopey", "Thorin", "Dorin",
              "Nori", "Ori","Balin", "Dwalin", "Fili", "Kili",
              "Oin", "Gloin", "Bifur", "Bofur", "Bombur"
              ]

配列を適当に用意します。


swift
// 何行?
func tableView(tableView: UITableView,numberOfRowsInSection section: Int) -> Int {
    return itemes.count
}

表示行数
表示するcell数を、配列の数で教えています。
つまり、ここには、数字で入れることもできます。


swift
// cellは何表示?
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell  = UITableViewCell(style: UITableViewCellStyle.Subtitle,reuseIdentifier: "cell")
    cell.textLabel?.text = itemes[indexPath.row]
    return cell
}

表示内容
storyBoradで設定したcellという名前のUITableViewCellに対して、何を表示するのかを決めています。
そして、cellにもともと用意されているtextLabelに対して、配列の中身を格納しています。
最後にその結果をreturnしています。

indexPath.rowについて
indexPath.rowというのは、現在の行数にあたる数値が入っています。
items[○行目]で、今回は配列の中身の表示を実現しています。
indexPath.rowはTableViewでよく使う変数なので、ほんのり理解しておきましょう。


実行!!!

これで、cmd + Rで起動でエミュレーターを起動してみましょう。
おそらく問題なく動いていると思います。簡単でしょう?
時間があれば、もっと掘り下げたTableViewの操作についても記事にします。