オーマイガー東京

オーマイガー東京というブログを24歳東京暮らし新卒2年目のエンジニアが書いています。

【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