オーマイガー東京

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

【Swift】iOSのGrouped tableViewの使用方法を写真付き解説

iOSのGrouped table viewの使用方法を簡単に写真付きでまとめておこうと思います。

f:id:maru_33:20180403000638p:plain

tableviewを使用する時のようにtableviewとcellをセット

こんな感じでセットしてください。

f:id:maru_33:20180403000412p:plain

セットした時にcellの名前を定義しておきます。

こんな感じでcellに名前を定義しておいてください

f:id:maru_33:20180403000428p:plain

Tableviewがまず出来んって人はこっちから

www.ohmg.tokyo

継承するclassを指定します

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

出現するエラーを自動fixします

このようなエラーが出るのでfixボタンを押します。

f:id:maru_33:20180403000659p:plain

すると、このように保管されるはずです。

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

section持ちのtableview用のメソッドを追加します

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

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        <#code#>
    }

テストデータを作成します

もちろん本番データでも構いませんが、とりあえずなんらかのデータを作成します。

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var sections = ["section1", "section2"]
    var values = [["1_test1", "1_test2"],["2_test1", "2_test2"]]
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        <#code#>
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        <#code#>
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        <#code#>
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        <#code#>
    }
    

必要なコードを埋めていきます

sectionのサイズを返します

    func numberOfSections(in tableView: UITableView) -> Int {
       return sections.count 
    }

各sectionの中身のサイズを返します

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return values[section].count
    }

cell内の詳細を記述します

ここで、先ほどセットしたcell名を元にリンクしていきます。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell_sandbox", for: indexPath)
        cell.textLabel!.text = values[indexPath.section][indexPath.row]
        return cell;
    }

section内の詳細を記述します

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let label : UILabel = UILabel()
        label.text = sections[section]
        label.backgroundColor =  #colorLiteral(red: 0, green: 0.5801698565, blue: 0.6911261082, alpha: 1)
        label.textColor =  #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        return label
    }

コードを全部埋めきるとこんな感じになっています

class SandBoxViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    var sections = ["section1", "section2"]
    var values = [["1_test1", "1_test2"],["2_test1", "2_test2"]]
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return values[section].count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell_sandbox", for: indexPath)
        cell.textLabel!.text = values[indexPath.section][indexPath.row]
        return cell;
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return sections.count
    }
    
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let label : UILabel = UILabel()
        label.text = sections[section]
        label.backgroundColor =  #colorLiteral(red: 0, green: 0.5801698565, blue: 0.6911261082, alpha: 1)
        label.textColor =  #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
        return label
    }

tableviewとコードを連携します

Controlボタン押しながら、Controllerまでドラッグするとデータ連携できます。

この状態になったらOKです。

f:id:maru_33:20180403000720p:plain

Plainのsectionありtableviewが完成しました。

ここまでで完成の方も多いことでしょう。

f:id:maru_33:20180403000733p:plain

左端の隙間をなくしたい人はこちら

www.ohmg.tokyo

Grouped化していく。

さて、さらにPlainからGroupedにしたい人に捧ぐ

tableviewのstyleをGroupedに設定

こんな感じ

f:id:maru_33:20180403000816p:plain

高さを指定してあげる

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
    }

完成

こんな感じになります!めでたし

f:id:maru_33:20180403000831p:plain