iOS
UITableView
Swift

5分でUITableViewを作ってみる。

More than 1 year has passed since last update.

自己紹介

じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。

HAL大阪3回生です。(2017/05/29現在)

イベントや、勉強会に参加してるので是非お会いした際はお声掛けください!

まえがき

僕自身、iOSのネイティブアプリを書くのはとても初心者です。

イケてない実装があるかもしれませんが、もし見つけたらPR投げてください。(PR投げる前に挨拶とかいらないです)

注意:今回は、コードオンリーでのレイアウトとtableViewをとりあえず出す!ってことを5分で作れるtableViewとして書いています。

UITableViewを使ってみよう。

つくるものはこんな感じです。

スクリーンショット 2017-05-29 1.48.00.png

つくっていくヨ

では、まずXcodeのプロジェクトをつくりましょう。

Single View Applicationで大丈夫です。

スクリーンショット 2017-05-29 1.55.11.png

準備ができたら、早速コードを書いていきます。

まずはtabeviewを作ってあげよう。

使うのはViewController.swiftだけです。

編集していきます。

まず、tableViewを保持するための変数と表示するデータの配列を書いておきます。

ViewController.swift
class ViewController: UIViewController {
  var tableView: UITableView?
  let items = ["Apple","Banana","Orange"]
}

この変数にtableViewがあとで入ってきます。

オプショナルにする(?をつける)か、アンラップする(!をつける)かは、個人によって違うようなのであまりここでは触れません。

では、実際のtableViewを作っていくコードを書いていきます。

ViewController.swift
override func viewDidLoad(){
  super.viewDidLoad()

  self.tableView = {
    let tableView = UITableView(frame: self.view.bounds, style: .plain)
    tableView.autoresizingMask = [
      .flexibleWidth,
      .flexibleHeight
    ]
    self.view.addSubview(tableView)

    return tableView

  }()

}

これで、tableViewを追加できました。

では、中身を作っていきます。

中身を構成するものをUITableViewCellでつくる(カスタムセル)こともできますが、今回はlabelだけしか使わないので、カスタムセルではなく普通に作っていきます。

まずはセクションの値を返すもの

ViewController.siwft
func numberOfSections(in tableView: UITableView) -> Int {
  return 1
}

とりあえずは1セクションにしておきます。

次にレンダリングするセルの個数を返すものをつくります。

データの個数分あればいいので、datas.countを返します。

ViewController.swift
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return self.items.count
}

さて、では次にcell本体の記述をしていきます。

ViewController.swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
  ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")

  cell.textLabel?.text = self.items[indexPath.row]

  return cell

}

これで、セルをつくることができました。

次に、セルを押された時のメソッドを実装します。

ViewController.swift
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  print("Selected! \(self.items[indexPath.row])")
}

これで、メソッドの実装が終わりました。

しかし、このままではデータを流し込めません。delegatedataSourceの設定をしないといけないからです。

一番上のクラスを定義している場所をみると

ViewController.swift
class ViewController: UIViewController{

となっていると思いますが、ここに少し付け足します。

ViewController.swift
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{

とします。

そして、tableViewdelegatedataSourceを自分にするために

ViewController
self.tableView = {
    let tableView = UITableView(frame: self.view.bounds, style: .plain)
    tableView.autoresizingMask = [
      .flexibleWidth,
      .flexibleHeight
    ]
    self.view.addSubview(tableView)

    return tableView

  }()

ここの実装に少し付け足します。

ViewController
self.tableView = {
    let tableView = UITableView(frame: self.view.bounds, style: .plain)
    tableView.autoresizingMask = [
      .flexibleWidth,
      .flexibleHeight
    ]
    tableView.delegate = self
    tableView.dataSource = self

    self.view.addSubview(tableView)

    return tableView

  }()

tableView.delegate = selftableView.dataSource = selfの2行を付け足すともう完成です!

さて、5分で書ききれたでしょうか!

実際は、もう少し色を変えるとかheaderにはnavigationがあるとか。

色々変わっていくと思いますが、コードベースでのtableViewに少しでも慣れるのにいいとおもいます。

あとがき

今回のコードはGitHubにあげています。

konojunya/ios-code-only-tableview

もしなにかございましたら、issueかPR投げてください!

Twitter @konojunya