LoginSignup
3
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-17

目的

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

バージョン情報

Xcode 7.3
Swift 2.2

UITableViewって?

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

スクリーンショット 2016-07-17 20.39.28.png

UITableViewには、

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

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

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

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

2.ViewControllerにTableView置きます。
tableview.gif

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

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

コーディング

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の操作についても記事にします。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2