マンガ読書管理アプリの設計メモ（１２）

●「よみたい画面」のDB取得から画面表示までの機能を作りました。

１．StoryboardでUI部品をポチポチ配置する。
UITableViewControllerだと色々制約も生まれる可能性があるので、UIViewControllerにTableViewとTableCellを配置してます。

NavigationBarとTabBarを両方使いたいので、[Editor] - [Enbed In]でTabBar・NavigationBarと追加しています。

tabBarControllerとUINavigationControllerを同時に使いたい！ - Takahiro Octopress Blog

カスタムフォントを使ってるので、プロジェクトに追加しています。

【Xcode8】カスタムフォントを使用する方法 - Qiita

ちなみに配置についても基本はオートレイアウトで位置を整えていますが、基本は、見た目をドラックアンドドロップで整えてから、制約で上から順に設定しつつ高さは固定にすると整理しやすいかと思います。

２．Realmで登録するデータモデルを定義する

こんな感じです。

class  WantBooks: Object{
   @objc dynamic var key: String = ""
   @objc dynamic var title: String = ""
   @objc dynamic var author:  String = ""
   @objc dynamic var publisher:  String = ""
   @objc dynamic var finishFlag:  Bool = false
   @objc dynamic var createDay: String = ""
}

詳しくはこちらを。これでDBに登録されるクラスは作成しました。

Realmを使ってTODOアプリを作ってみよう！/ Swift(Realmの使い方、初級編) - Qiita

３．コントローラークラスを作成する。

今回はTableViewControllerを使わずに、ViewControllerで作成しましたので、Delegate設定を追加しつつ、TableViewのお決まりの関数も定義していきます。

class WantBookViewController: 
UIViewController,UITableViewDelegate, UITableViewDataSource{

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{}
 
}

４．カスタムセルのクラスを作成する。

今回、セルの中に複数のラベルを表示する形となっています。汎用性を高めるとセルは別のxibファイルとかで定義することが多いようですが、セルの中にラベルを配置しちゃってます。

class WantBookTableViewCell: UITableViewCell {
   
   @IBOutlet weak var titleLabel: UILabel!
   @IBOutlet weak var authorPublisherLabel: UILabel!
   @IBOutlet weak var finishLabel: UILabel!
   @IBOutlet weak var createDateLabel: UILabel!

}

５．DBからデータを取得し、セルに設定する。

// RealmObjectとしてクラス変数定義
var wantBooks: Results<WantBooks>!

// viewDidLoad()内で登録データ取得
self.wantBooks = realm.objects(WantBooks.self).sorted(byKeyPath: "key", ascending: false)

// cellForRowAt内でデータセット
guard let cell = tableView.dequeueReusableCell(withIdentifier: "wantBookCell") as? WantBookTableViewCell else{
           return UITableViewCell()
}
       
cell.titleLabel.text = wantBooks[indexPath.row].title
cell.authorPublisherLabel.text = wantBooks[indexPath.row].author + "/" + wantBooks[indexPath.row].publisher
cell.createDateLabel.text = wantBooks[indexPath.row].createDay
       
if wantBooks[indexPath.row].finishFlag {
　　cell.finishLabel.text = "完結"
}
else{
　　cell.finishLabel.text = ""
}
       
return cell

（参考）．テスト用に初期データをDBに登録しておく。

let addBook = WantBooks()
addBook.key = getNowDateString()　//現在時間を文字列で返す関数を別途作成
addBook.title = "テストタイトル"
addBook.author = "テスト作者"
addBook.publisher = "テスト出版社"
addBook.finishFlag = false // 完結してない
addBook.createDay = getNowDayString()　//現在時間の日にちを文字列で返す関数を別途作成
try! realm.write {
　　realm.add(addBook)
}

ものすごくザクっとポイントを絞って書きました。
こういう形でnote書くのは初めてなので伝わりにくいかもしれません。
適宜、改善していきます。。

ちなみに、恥ずかしながら、私自身もプログラミングを始めて１年ですし、実務経験がない中でやってますので、気になるところや、こうすれば良い的なものがあればご教授いただけるととても嬉しいです。

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

次は登録画面を作っていきたいと思ってます。頑張るぞー！