Edited at

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