【NovelCollector開発日記】その２

こんにちは、こんばんはシフトです！

今回はアプリのDBに保存した小説の情報をリスト表示する処理を書いていきたいと思います。

小説データが空の場合

はじめに小説のデータが読込中だったりした場合の処理を実装していきます。

空の場合は小説のデータが入っている変数が null なのでこれを元に判定します！

 nullの場合は「小説が登録されていません」の文章を表示して、中身がある場合はとりあえず小説の数を表示しています。

プレビュー画面はこちらになります！

小説が登録されていない場合は専用の文字が表示されるようになりました🎉

次はこの表示した文字を画面の真ん中に表示するようにコードを変更していきます。

 画面の真ん中に文字を表示する

Textコンポーネントだけのコードを編集して画面の真ん中にメッセージを移動します

 TextコンポーネントをColumnコンポーネントで囲んでmodifierを適応できるようにします。

横幅などをMaxにして中身を真ん中に固定する処理を追記すれば、真ん中にメッセージが移動します！

問題なく文字が画面の真ん中に移動できました🎉

次はいよいよ、小説の情報を表示する処理になります

小説の情報をリストで表示

先程は空の場合の処理を書きました。次は実際に小説のデータがある場合の処理を書いていきます。

まずは、小説のデータをスクロールできるようにLazyColumnコンポーネントで囲みます

 小説のデータはListに入っているので itemsメソッドを使って中身を取り出しつつ、小説のデータを配置しています。

今回はそれぞれの小説は独立しているのでCardコンポーネントを使ってマテリアルデザインっぽさを出していきます。

小説の中身はColumnコンポーネントを使って作者名と小説名を縦に並べた形になります。

記事のはじめに貼ってあったサムネイルはここの画像でした。

CardのmodifierにfillMaxSizeを指定することで画面いっぱいにカードを広げています。

 完成画面

 最終的にアプリに実際に保存してあった小説データを組み合わせたのがこちらになります。

※動作確認で登録処理を連打してたので同じ小説が登録してあります。

なかなか良い感じに出来ました。

次回以降では、コンポーネントのパディングがおかしいので修正したり、背景色が白のままだとCardコンポーネントをだぶついて見えるのでこの辺を変更したいと思っています！

ではでは～　

Tips: 画面にちらっと写っていた小説は面白くておすすめです