Help us understand the problem. What is going on with this article?

5分でUITableViewを作ってみる。

More than 3 years have 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

iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした