技術な話し

【Swift】iOSのtableViewの使用方法

SwiftでのtableViewの使用方法を簡潔に説明します。

UI側ViewControllerにTableViewとTableViewCellをセットする

f:id:maru_33:20180331132243p:plain

f:id:maru_33:20180331132304p:plain

code側ViewControllerに継承クラスを追加する

class SandBoxViewController: UIViewController {

これをこう

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

で、これを追加するとこういうのが出るのでFixを押します

f:id:maru_33:20180331132317p:plain

すると、以下の状態になります。

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
<#code#>
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
<#code#>
}

データソースを用意する

次にデータソースを用意します。

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
let dataSource = ["test1", "test2", "test3", "test4"]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
<#code#>
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
<#code#>
}

セルの個数を指定します

だいたい、データソースのサイズを返します。

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
let dataSource = ["test1", "test2", "test3", "test4"]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
<#code#>
}

セルの値を指定します

まず、UI側でcellの名前を指定します

f:id:maru_33:20180331132334p:plain

UI側で指定したcell名で実際にcellを取得し中身を書き換えます

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
let dataSource = ["test1", "test2", "test3", "test4"]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return dataSource.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "sand_cell", for: indexPath)
cell.textLabel!.text = dataSource[indexPath.row]
return cell
}

UI側からTableViewのデータソースとdelegateをコントローラーに紐付けます

TableViewでControlボタン押しながらドラッグして、ViewControllerの上で離します。そうすると、delegateとdataSorceが指定できるのでこの状態にしてください

f:id:maru_33:20180331132355p:plain

完成

ジャジャーン

f:id:maru_33:20180331132404p:plain

ABOUT ME
maru
maru
オーマイガー東京(編集長)/キグルミだ熱狂(gt, 作詞作曲)/新卒2年目エンジニアです。赤坂と浅草におります。最近作った→ https://lgtmeow3.tokyo