マンガ読書管理アプリの設計メモ(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
}
次から、読んだ画面を作っていきたいと思いますが、ここからはコレクションビューを初めてやってみたりするので、時間かかるかもしれません。汗
また、今回の部分で、この辺りはもっと詳しく、という話があれば、コメントいただければと思います!
素敵なアプリやサービスが作れるようにひとりで開発を頑張っています。応援してくれると嬉しいです!