見出し画像

マンガ読書管理アプリの設計メモ(14)

●「よんでる画面」のデータを一覧表示・登録するところの機能を作りました。ほとんど「よみたい画面」の流用で作成できますので、本機能に特化した場所を補足できればと思います。

1.StoryboardでUI部品をポチポチ配置する。


2.よんでる画面で登録する機能を追加する。

基本は、前回の「よみたい画面」と同じ機能なので、ほぼ流用で作成していきます。

読んだ巻数は、数字しか入れて欲しくないので、キーボードの設定を「number」にしています。あとはテキストフィールドはString型なので、登録時に型変換するようにしています。

        if self.editingFlag == false{
           let addBook = ReadingBooks()
           addBook.key = getNowDateString()
           addBook.title = title
           addBook.author = author
           addBook.publisher = publisher
           addBook.volume = Int(volume) ?? 1  // ここですね。
           addBook.doneFlag = self.doneSwitch.isOn
           addBook.tundokuFlag = self.tundokuSwitch.isOn
           if (self.doneSwitch.isOn == true){
               addBook.doneDay = getNowDayString()
           }
           addBook.memo = memo
           addBook.createDay = getNowDayString()
           
           try! realm.write {
               realm.add(addBook)
               
               ALRT.create(.alert, title: "登録しました").addOK(){
               action, textFields in
                   self.navigationController?.popViewController(animated: true)
               }.show()
           }
       }


3.登録したデータを一覧表示させる

これも、よみたい一覧機能と同じですが、ラベルやらセル単位でのボタンがあるので、そのあたりを補足します。

まず、読んでる巻数を表示させているのは、ラベルで作ってます。ラベルで作るとstoryboardでは角が丸くできないので、コードで丸くしています。

       cell.volumeLabel.layer.cornerRadius = 5
       cell.volumeLabel.clipsToBounds = true

また、セル内の上矢印と下矢印は、巻数を増減できるのですが、こちらについては、セルクラスにボタンを関連を貼っておき、コントローラクラスでアクションメソッドを作成しています。

class ReadingBookTableViewCell: UITableViewCell {
   
   @IBOutlet weak var titleLabel: UILabel!
   @IBOutlet weak var authorPublisherLabel: UILabel!
   @IBOutlet weak var volumeLabel: UILabel!
   @IBOutlet weak var upButton: UIButton!
   @IBOutlet weak var downButton: UIButton!
   
   override func awakeFromNib() {
       super.awakeFromNib()
   }
}
    @IBAction func tapUpButton(_ sender: Any) {
       let btn = sender as! UIButton
       let cell = btn.superview?.superview as! ReadingBookTableViewCell
       if let row = tableView.indexPath(for: cell)?.row{
           if (readingBooks[row].volume < 999){
               let realm = try! Realm()
               try! realm.write{
                   readingBooks[row].volume += 1
               }
               tableView.reloadData()
           }
           
       }
   }
   
   @IBAction func tapDownButton(_ sender: Any) {
       let btn = sender as! UIButton
       let cell = btn.superview?.superview as! ReadingBookTableViewCell
       if let row = tableView.indexPath(for: cell)?.row{
           if (readingBooks[row].volume > 1){
               let realm = try! Realm()
               try! realm.write{
                   readingBooks[row].volume -= 1
               }
               tableView.reloadData()
           }
       }
   }

ボタンがあるセルは、テーブルの何行目?というのを取得したのちに、データを取得するのがミソかなと思ったりします。


4.セルを選択したら編集モードとして、登録画面を表示する。

セルをタップすると編集画面にいくようにするには、segueをセルから貼ったのちに、prepareメソッド経由で選択セルの行数に該当するデータを引き渡していきます。

    override func prepare(for segue: UIStoryboardSegue, sender: Any?){
       guard let identifier = segue.identifier else {
           return
       }
       
       if(identifier == "toEditingReadingBook"){
           let next = segue.destination as! InputReadingBookViewController
           
           let cell = sender as! ReadingBookTableViewCell
           if let row = tableView.indexPath(for: cell)?.row{
               next.editingFlag = true
               next.readingBook = self.readingBooks[row]
           }
       }
   }

登録画面の初期設定で、初期値として設定してあげます。

    // 編集モードかどうか判定するフラグ
   var editingFlag = false
   var readingBook = ReadingBooks()
   
   override func viewDidLoad() {
       super.viewDidLoad()
       
       // 引き渡し処理
       if editingFlag == true{
           titleTextField.text = readingBook.title
           authorTextField.text = readingBook.author
           publisherTextField.text = readingBook.publisher
           volumeTextField.text = String(readingBook.volume)
           doneSwitch.isOn = readingBook.doneFlag
           memoTextView.text = readingBook.memo
           tundokuSwitch.isOn = readingBook.tundokuFlag
       }


次から、読んだ画面を作っていきたいと思いますが、ここからはコレクションビューを初めてやってみたりするので、時間かかるかもしれません。汗

また、今回の部分で、この辺りはもっと詳しく、という話があれば、コメントいただければと思います!

素敵なアプリやサービスが作れるようにひとりで開発を頑張っています。応援してくれると嬉しいです!