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

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

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

今回はこのような事をします。

今回から先にシュミレーターで完成の形を確認してから細かい説明をしていきたいと思います。

今回は下記画像のようにタイトルがあって下に詳細が表示してみたいと思います。

タイトルと詳細を表示しよう

流れとしてはstoryboard上でセルのレイアウトを設定して、そのレイアウトに対応したコードを書く感じです。

セルのレイアウト設定

まずはセルのレイアウトを決めます。
下記画像の①、②の順番でクリックして下さい。
③でレイアウトを決めます。
（今回は「Subtitle」にしましたが色々試してみて下さい。storyboard上のセルのレイアウトが変わります）

ちなみに緑枠で囲んだ部分もレイアウトの設定です。
今回は使わないですが、こちらを変更するとセルの右側にアイコンが表示されるので試してみて下さいね。

タイトルと詳細を表示するコードを書こう

ではタイトルと詳細部分が表示されるようにコードを書いていきたいと思います。

まずはタイトルと詳細のデータを変数に代入しておきましょう！
ちなみに今回は配列ではなくディクショナリになっていますよ〜！

class MemoTableViewController: UITableViewController {
    
     var memos = [
         ["title": "5月18日", "detail": "今日は雨だった"],
         ["title": "5月19日", "detail": "今日は曇りだった"],
         ["title": "5月20日", "detail": "今日は晴れだった"]
     ]

次にセクションとセルのコードを変更します。
今回、セクションは1つなのでセクション部分は「1」に変更しました。
セルの数ですが、「変数memos」の要素の数になるようにしたいので「self.memos.count」に変更しました。

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

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

セルの表示の部分ですが、今回「変数memos」がディクショナリになっているのがポイントです。
ディクショナリについてはこちらの記事を参考にして下さい。

まず4行目の説明をしますね。
前回までは「変数memos」が配列だったので、「self.memos[indexPath.row]」だけでデータを取得できましたが、今回はディクショナリになっているので、keyを指定してあげないといけません。

4行目はタイトルを表示してあげたいのでkeyを「title」にします。

次に5行目です。
先ほどstoryboardでセルのレイアウト設定をした事によって、storyboardのDetailの部分にdetailTextLabelと言う命令が使えるようになりました。

「cell.textLabel?.text」の部分を「cell.detailTextLabel?.text」に変更してあげてあとは、4行目と同じでkeyを「detail」に変更すればOKです！

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.row]["title"] //これ変更
    cell.detailTextLabel?.text = self.memos[indexPath.row]["detail"] //ここ追加
    return cell
}

では「command + r」でシュミレーターを立ち上げて確認してみて下さい。
うまくいきましたか？

まとめ

今回の記事で、セルのレイアウトをstoryboardから設定してtitleとdetailに分けて表示する事ができるようになりました。

今回でTableViewの基礎操作は終わりです！
これまで勉強した事を踏まえて次回から実際にアプリを作っていきたいと思います。