保存食一覧画面の作成

[yamanetaisei]

タイトル

• 保存食一覧画面の作成

やることリスト

• 「飲料水」、「主食」、「間食」のジャンルごとの保存食リストを作る
• 保存食の名前を表示させる
• 期限を表示させる
• 消費したときに量を減らして買いものリストに追加するボタンを作る
• 保存食の個数を表示させる
• 保存食の画像の表示させる
• 保存食の保存場所を表示させる
• 保存食の保存場所のアイコンを追加する
• ヘッダーを作る
• フッターを作る
• 3点バーの追加
• 並べ替えボタンを作る
• 起動時に主食のフラグメントが開くようにする

作成している画面のイメージ

保存食一覧の画面

メニューを出したときの画面

[tomu28]

大きな実装の流れ

1. ヘッダーを作成する
2. 「飲料水」「主食」「間食」アクションバーを作成。参考
3. 「飲料水」「主食」「間食」のセル部分を作成(中身はダミーデータでUIのみ作成)
4. データの中身を入れていく(追加する機能の実装後)
5. 買い物リストとデータを紐つける(別Issuesになるかな)
6. 並び替えボタンを設置し、昇順・降順の変更ができるようにする
7. 3点バーが出てくるボタンを設置し、実装する

具体的な実装について

1. ヘッダーを作成する

• ヘッダーの背景色を変更すること(#FFDA4D)
• テキストの中身を「保存食一覧」に変更する

2. 「飲料水」「主食」「間食」アクションバーを作成。

• 参考などを見て、3つ表示する
• 中身のテキストを「飲料水」「主食」「間食」とする
• 背景色をそれぞれ変更する
• 選択されているアクションバーには、総数を表示する
  • 今選択されているアクションバーを判定
  • 対応するアクションバーの.setTextみたいなのを総数表示されているものに更新する

または、

• アクションバーを画像として読み込む
• 選択されている画像の上に総数をテキスト表示する
  ※ 選択されているものが、出っ張って表示されるUIを再現するのが難しい場合は、UI的に選択されていることを強調して表示すること

3. 「飲料水」「主食」「間食」のセル部分を作成(中身はダミーデータでUIのみ作成)

1つのセルを構成する要素

• 1.商品名
• 2.期限(タップしたら、再度変更できるようにする。※追加する際のUIと合わせること NumberPickerとか使うのかな)
• 3.アイコン(※追加する際のUIと合わせること)
• 4.場所の名前のテキスト
• 5.個数
• 6.消費ボタン(タップされると、買い物リストに追加される)
• 7.商品画像

用語メモ

• BaseAdapter
• ListView

4. データの中身を入れて、タップされた時などのロジックを実装(追加する機能の実装後)

期限ボタンがタップされた時の処理を書く

• 再度変更できるようにする(※追加する際のUIと合わせること)
  • 変更された場合は、期限を更新する

消費ボタンがタップされた時の処理を書く

• タップされた場合は、個数を更新する

飲料水の場合

• タップされたら、数字のみのキーボード入力できるようにする
  • 単位：L

主食・間食の場合

• 個数を1つ減らす

消費ボタンを間違って押してしまった時の対応を行う

• 色々やり方はあると思います

5. 買い物リストとデータを紐つける(別Issuesになるかな)

• 消費ボタンが押されたら、買い物リストに関連するイベント処理を実装する

6. 並び替えボタンを設置し、昇順・降順の変更ができるようにする

• セルの並び替えを期限ベースで行う
  • 並び順を反転する処理になるかな

7. 3点バーが出てくるボタンを設置し、実装する

• 3点バーが押されたらサイドメニューが表示されるようにする参考:kotlinでandroid入門 サイドメニュー : NavigationView
• 各項目をタップしたら、対応する画面に遷移させる

8. アクションバーのUIを調整する(任意)