[Xcode11・Swift5]メモアプリを作る＃04

※この記事は初心者の方や初めてアプリを作る人を対象にしています。
動作環境　Xcode Version 11.4　Swift version 5.2

この記事ではTableViewの基本操作パート2です！

セクションを複数設置してみよう

前回はTableViewにセルを表示させる方法について書きました。
今回はセルのセクションを2つに分けてみたいと思います。

配列の中に配列を入れよう

セクションを二つに分けると言う事なので配列がメモが書いてある配列を二つ用意すれば良いので配列の中に配列を入れちゃいます！

「変数memos」下記コードのように編集しましょう！

class MemoTableViewController: UITableViewController {
    
    var memos = [
        ["まゆげじお", "F-chan", "D-matsuo"],
        ["二枚貝", "さわ"]
    ]//ここ編集

セクションとセルの行数を変更

次にセクションの数とセルの行数のコードを編集しましょう！
では順に説明しますね。

まずセクションの数の設定ですが、3行目を変更しましょう。
今回セクションの数は2つなので普通に数字の2と書いてもいいのですが、もしかしたらセクションが増えるかもしれないので、「変数memos」の要素の数を指定しています。
（変数memosは配列の中に配列を入れるように変更したので、ここでの「要素の数」 == 「配列の数（セクションの数）」と言う事になります）

では次にセルの行数の設定ですが、こちらは8行目を変更しましょう。
「self.memos[section].count」とありますが、これは「変数memos」の要素（配列）の中の要素をカウントで取得しています。

要するに、セクションごとにメモを取り出している感じです。

override func numberOfSections(in tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return self.memos.count//これ変更
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return self.memos[section].count//これ変更
}

次に表示するセルの部分の編集をします。
変更する部分は6行目です。
ここでの考え方も先ほどと同じで、セクションごとのセルを表示するように書いています。
「変数memos」の中のセクションの中のセルです！

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MemoTableViewCell", for: indexPath)//ここ編集

    // Configure the cell...
    cell.textLabel?.text = self.memos[indexPath.section][indexPath.row]//変更
    return cell
}

ここまでOKなら一度シュミレータで確認してみましょう！
下記画像のようになりましたか？

でもこれではセクションの区切りがないのでよくわからない状態ですね。

セクションにヘッダーを付けてみよう

なのでセクションの区切りにヘッダーを付けみましょう！

ヘッダーを挿入するようのメソッドが用意されているのでその中にコードを書いていきます。
ただ、このメソッドは最初から書いていないので自分で入力する必要があります。

tableviewtitleheadersection的な感じで適当にうつと候補が出て来るので下記コードのメソッドを選択してください。

2行目のようにreturnとして文字列を返してあげればOKです！
「\(section)」の中にはセクション番号が入っています。

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return "section-\(section)やで〜！"
}

ではシュミレータで確認してみましょう。
下記画像のようになって入ればOKです。
ヘッダーがあればセクションごとに分かれているのがわかりやすいですね！

今回のソースコード

import UIKit

class MemoTableViewController: UITableViewController {
    
    var memos = [
        ["まゆげじお", "F-chan", "D-matsuo"],
        ["二枚貝", "さわ"]
    ]//ここ編集
                
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // MARK: - Table view data source

override func numberOfSections(in tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return self.memos.count//これ変更
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return self.memos[section].count//これ変更
}


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MemoTableViewCell", for: indexPath)//ここ編集

    // Configure the cell...
    cell.textLabel?.text = self.memos[indexPath.section][indexPath.row]//変更
    return cell
}
    
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return "section-\(section)やで〜！"
}

}

長くなるのでコメントアウトしてるコードは削除してたりします。

まとめ

今回はセクションの数を二つに分けて、ヘッダーをつける内容の記事を書きました〜！
では次回！