Swift UIDatePickerとUITableViewでデータを連携させたい

Question

実現したいこと
swift初学者ですが、食べたものを日記のように記録できる簡易な記録アプリを作っています。
食べたものを後から日を遡って記録できるように、
食べた日付をUIDatePickerで選択し、
選択した日付のセクションにある文字(食べ物)を表示する配列に
ピンクのUITextfieldから記録をしたい食べたものを入力しButtonを押すと追加できるようにしたい。

以下、現在のソースコードです。

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
    @IBOutlet weak var table: UITableView!
    @IBOutlet weak var foodtextField: UITextField!
    @IBOutlet weak var textField: UITextField!
    
    var datePicker: UIDatePicker = UIDatePicker()
    
    // section毎に配列を用意
    var Array1: Array = ["コンビニ弁当"]
    var Array2: Array = ["イタリアン"]
    var Array3: Array = ["カレー"]
    var Array4: Array = [""]
　　　〜〜省略〜〜
    var Array26: Array = [""]
    var Array27: Array = [""]
    var Array28: Array = [""]

    
    // Sectionのタイトル
    let sectionTitle = ["2/1","2/2","2/3","2/4","2/5","2/6","2/7","2/8","2/9","2/10",
　　　　　　　　　　　　　　"2/11","2/12","2/13","2/14","2/15","2/16","2/17","2/18","2/19","2/20",
　　　　　　　　　　　　　　"2/21","2/22","2/23","2/24","2/25","2/26","2/27","2/28"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        table.delegate = self
        table.dataSource = self
        
        // ピッカー設定
        datePicker.datePickerMode = UIDatePicker.Mode.date
        datePicker.timeZone = NSTimeZone.local
        datePicker.locale = Locale.current
        textField.inputView = datePicker
        
        // 決定バーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(buttonon(_:)))
        toolbar.setItems([spacelItem, doneItem], animated: true)
        
        // インプットビュー設定
        textField.inputView = datePicker
        textField.inputAccessoryView = toolbar
        
    }
    
    // Section数
       func numberOfSections(in tableView: UITableView) -> Int {
           return sectionTitle.count
       }
       // Sectioのタイトル
       func tableView(_ tableView: UITableView,titleForHeaderInSection section: Int) -> String? {
           return sectionTitle[section]
    }
       
       // Table Viewのセルの数を指定
       func tableView(_ table: UITableView,numberOfRowsInSection section: Int) -> Int {
           if section == 0 {
               return Array1.count
           }
           else if section == 1 {
               return Array2.count
           }
           else if section == 2 {
               return Array3.count
           }
           else if section == 3 {
               return Array4.count
           }
           else if section == 4 {
               return Array5.count
           }
           else if section == 5 {
               return Array6.count
           }
           〜〜省略〜〜
           else{
               return 0
           }
       }
       
       //各セルの要素を設定する
       func tableView(_ table: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
           
           // tableCell の ID で UITableViewCell のインスタンスを生成
           let cell = table.dequeueReusableCell(withIdentifier: "tableCell",for: indexPath)
        
           // Tag番号 1 で UILabel インスタンスの生成
           let label = cell.viewWithTag(1) as! UILabel
           
           // Section毎に処理を分ける、ちょっと冗長的です
           if indexPath.section == 0 {
               //cell.textLabel?.text? = imgArray1[indexPath.row] as! String
               
               label.text = String(describing: Array1[indexPath.row])
           }
           else if indexPath.section == 1 {
               label.text = String(describing: Array2[indexPath.row])
           }
           else if indexPath.section == 2 {
               label.text = String(describing: Array3[indexPath.row])
           }
           else if indexPath.section == 3 {
               label.text = String(describing: Array4[indexPath.row])
           }
           else if indexPath.section == 4 {
               label.text = String(describing: Array5[indexPath.row])
           }
           
　　　　　　　〜〜以下省略〜〜

           return cell
       }
       
       func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
           return 40.0
       }
    
    @IBAction func buttonon(_ sender: Any) {
        
        textField.endEditing(true)
        
        // 日付のフォーマット
        let formatter = DateFormatter()
        formatter.dateFormat = "MM/dd HH:mm"
        textField.text = "(formatter.string(from: Date()))"
        
        table.reloadData()
    }
    
}

何か良い方法はございますでしょうか？

Answer 1

本当ならば、Realm なり、クラウド（mBaaS）などのデータベースと連携させた方がより柔軟で見通しの良い作りとなるのですが、とりあえず現在の構成をなるべく変更しない方法で考えてみたいと思います。

まず、28日分の配列を個別に用意するのは現実的ではないので、28日分の食事は二次元配列で管理したいと思います。

    // MARK: section毎に配列を用意
    // 28日分の配列を用意する
    var foods: [[String]] = []

この様に宣言することで、[String]を含む配列（Array）を作ることができます。
この段階ではとりあえず中身は空にしておきます（repeatingを使ってこの段階で中身を入れることも可能ですが、とりあえずそれは置いておきます）。

また、28日分の日付を作るのも現実的ではないので、とりあえず配列だけ用意しておきます。

   // MARK: Sectionのタイトル
    var sectionTitle: [String] = []

次に、これらの配列に具体的に中身を入れていきます。
日付については、

        // MARK: 日付タイトルを作る
        for i in 1...28 {
            sectionTitle.append("2/(i)")
        }

こんな感じで作った方が楽に作れます。

食べたものについては、とりあえず28日分の要素だけ作っておきます。

        // MARK: 食べたものの初期データを作る
        for _ in 1...28 {
            // からの配列だけを追加する
            foods.append([])
        }

保存したり読み込んだりすることは、先の段階で考えてみてください。

ところで、食べたものの記録はどの様に行えばよいのでしょうか。
それは、食べた日に相当する要素に対して、食べたものを追加する、とう考え方でやりたいと思います。

たとえば、2月1日は初期状態では空の状態です。
つまり、

food[0] -> []

と中身がからの状態になっています（上記は Swift の表記ではなく、あくまでもイメージです）
また、配列の要素は0から始めるのが慣習なので、日付より1少なくなる点にも注意してください。

ここで、2月1日に「ラーメン」を食べたとしましょう。
何らかの方法で追加すると

food[0] -> ["ラーメン"]

となります。
同じ日に「ニラレバ」を追加したとすれば

food[0] -> ["ラーメン", "ニラレバ"]

という感じでデータを追加します。

food[]は28日分のデータを持った配列なので、最初の要素（subscripton）にアクセスすれば、その日に食べた物を全て得ることが可能です。

ちなみに、2月1日に最初に食べたものは

food[0][0] -> "ラーメン"

みたいな感じで逐次得ることが可能です。

したがって、UITableView のセクション内の要素数は

    // Table Viewのセルの数を指定
    func tableView(_ table: UITableView,numberOfRowsInSection section: Int) -> Int {
        // MARK: 対応する日付の要素数を返す
        // section =
        return foods[section].count
    }

という感じで、該当する日の要素数（食べたものの数）を返すようにします。section == 日付 - 1です。

食べたものの詳細については、

//各セルの要素を設定する
    func tableView(_ table: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // tableCell の ID で UITableViewCell のインスタンスを生成
        let cell = table.dequeueReusableCell(withIdentifier: "tableCell",for: indexPath)
        
        cell.textLabel?.text = foods[indexPath.section][indexPath.row]
        
        return cell
    }

この様にすることで、該当するセクション（つまり日付）に対し、その日食べたものを一行ずつ表示させることが可能です。

ただ、最初にも述べた通り、これはあくまでも現状をなるべく変更しない方法で記述させる方法であり、最適解ではありません。

もし、Realm などのデータベースを使った、より適切な解決方法を知りたいようであれば、「Realm ToDoアプリ」みたいな感じで調べていくと、いろいろ習作が出てくるかと思います。

ちなみに、ご提示いただいたコードは次の様に変更してあります。
多少コメントも入れていますので、それも参考によんでみてください。

import UIKit

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
    @IBOutlet weak var table: UITableView!
    @IBOutlet weak var foodtextField: UITextField!
    @IBOutlet weak var textField: UITextField!
    
    var datePicker: UIDatePicker = UIDatePicker()
    
    // MARK: section毎に配列を用意
    // 28日分の配列を用意する
    var foods: [[String]] = []
    
    // MARK: Sectionのタイトル
    var sectionTitle: [String] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // MARK: 日付タイトルを作る
        for i in 1...28 {
            sectionTitle.append("2/(i)")
        }
        
        // MARK: 食べたものの初期データを作る
        for _ in 1...28 {
            // からの配列だけを追加する
            foods.append([])
        }

        // Do any additional setup after loading the view.
        table.delegate = self
        table.dataSource = self
        
        // ピッカー設定
        datePicker.datePickerMode = UIDatePicker.Mode.date
        datePicker.timeZone = NSTimeZone.local
        datePicker.locale = Locale.current
        // MARK: 以前のホイール形式の datePicker にする
        datePicker.preferredDatePickerStyle = .wheels
        textField.inputView = datePicker
        
        //　MARK: 食べたものを入力する UITextFiled に何か変化が生じたら delegate が呼ばれる様にする
        foodtextField.delegate = self
        
        // 決定バーの生成
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 35))
        let spacelItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)
        let doneItem = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(buttonon(_:)))
        toolbar.setItems([spacelItem, doneItem], animated: true)
        
        // インプットビュー設定
        textField.inputView = datePicker
        textField.inputAccessoryView = toolbar
        
    }
    
    // MARK: Accessory View のボタン
    @objc func buttonon(_ sender: Any) {
        textField.endEditing(true)
        // 日付のフォーマット
        let formatter = DateFormatter()
        formatter.dateFormat = "MM/dd HH:mm"
        // MARK: Date() だと今日の日付になるので、datePicker.date で選択した日付を入れる
        textField.text = "(formatter.string(from: datePicker.date))"
    }

    // Section数
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitle.count
    }
    // Sectioのタイトル
    func tableView(_ tableView: UITableView,titleForHeaderInSection section: Int) -> String? {
        return sectionTitle[section]
    }
    
    // Table Viewのセルの数を指定
    func tableView(_ table: UITableView,numberOfRowsInSection section: Int) -> Int {
        // MARK: 対応する日付の要素数を返す
        // section =
        return foods[section].count
    }
    
    //各セルの要素を設定する
    func tableView(_ table: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // tableCell の ID で UITableViewCell のインスタンスを生成
        let cell = table.dequeueReusableCell(withIdentifier: "tableCell",for: indexPath)
        
        cell.textLabel?.text = foods[indexPath.section][indexPath.row]
        
        return cell
    }
    
    func tableView(_ table: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 40.0
    }
    
    @IBAction func setFoodButtonon(_ sender: Any) {
        // MARK: datePicker で選んだ日付から、「日」だけを選ぶ
        let selectedDate = Calendar.current.component(.day, from: datePicker.date)
        // MARK: (日付 - 1) 日の要素に食べた食事を追加する
        foods[selectedDate - 1].append(foodtextField.text!)
        
        table.reloadData()
    }
    
}

// Enter キーを押すとキーボードを隠す
extension ViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.endEditing(true)
    }
}

Comments

[maplemee]

詳しい解説と全体コードによる丁寧な解説ありがとうございますm(_ _)m
実現したいことが全て実現できました。ベストアンサーとさせていただきました。

ご指摘の通り、記録をするアプリなのでデータベースとの連携を模索していましたが、
TableViewの仕組みにいまいち慣れていない段階でしたので後回しにしております。
二次元配列という言葉が出てきたのでTableViewで多次元配列を扱った初歩的な記事があまり検索しても出てこず、少し理解するのに時間を取りましたがその後おおよその動きは掴めました。

自分なりにsectionとrowが二次元配列になっている部分が難しいポイントだったので
以下のように置き換えて理解に繋げております。

foods[indexPath.section][indexPath.row]
↓
foods[0] ["ラーメン", "ニラレバ"]
・
・
・
foods[27][indexPath.row]

配列の用意に関しても今回のコードを参考にして効率的な書き方で進めていこうと思いますm(_ _)m