メインコンテンツまでスキップ

一覧画面(ホーム画面)の実装

一覧画面を作成します。

デザインシステムとAPI仕様も参照しながら、作業を進めてください。

API呼び出しは後で実装するので、APIの戻り値は一旦、ソースコード上に直接記述して進めてください。

ホーム画面

補足

補足箇所説明
ヘッダー固定表示。スクロールしない。
ヘッダーの検索ボタン押下時の処理は実装対象外。
ヘッダーのお知らせボタン押下でお知らせのタイトル一覧を下に開くメニュー形式で表示する(見た目の参考)。お知らせのタイトルはリンクとする。
ヘッダーの設定ボタン押下時の処理は実装対象外。
フッター固定表示。スクロールしない。
フッターのホームボタン押下でホーム画面に遷移・再読み込みする。
フッターのユーザボタン押下時の処理は実装対象外。
フッターのタグボタン押下時の処理は実装対象外。
上スクロールボタンAndroidのみ表示する。押下で画面最上部にスクロールする。
ボタンは一覧画面の上に常に表示し、一覧画面をスクロールしても表示位置は固定とする。
iOSはステータスバーをタップすることでOSの機能により画面最上部にスクロールすることを確認すること。
新規作成ボタンボタンは一覧画面の上に常に表示し、一覧画面をスクロールしても表示位置は固定とする。
押下で質問入力画面に遷移する。

イベント表示部の補足

補足箇所説明
イベント一覧掲載期間中のイベントを全件表示する。
表示順はAPIから取得した順とする。
表示するイベントがない場合は「募集中のイベントはありません。」とラベル表示する。
イベントタイトル押下でイベント詳細画面に遷移する。
もっと見るリンク押下でイベント一覧画面に遷移する。

質問表示部の補足

補足箇所説明
質問一覧表示順はAPIから取得した順とする。
質問ラベル行縦スクロール時に質問部のラベル行を画面上部に固定する仕様は応用編で実装する。現時点では画面外にスクロールする状態でよい。
Pull-to-refreshページ最上部で下にスワイプして離すとPull-to-refreshとなるようにする。
refresh中はローディング中であることがわかるように、アクティビティインジケータを表示する。
ソートボタンソートアイコン押下で画面下部にソート条件の選択肢をスライドアップ表示する。初期選択は「最新順」。
現在選択されている選択肢がある場合は選択肢横にチェックマークを表示する。複数選択は不可とする。
最新順以外が選択されている状態のときはソートボタンに色を付ける。
質問のソートはサーバ側で実施する想定とし、APIから取得した順で質問を表示する。
フィルタボタン押下時の処理は実装対象外。
タグボタン押下で画面下部にタグの一覧をスライドアップ表示する。初期は未選択の状態。
スライドアップ表示するタグの一覧はタグ一覧取得APIで取得した全量を表示する。
タグは単一選択とし、選択しているタグについては色を変える。
タグでフィルタしている状態のときはタグボタンに色を付ける。ソートと同時指定可とする。
質問のフィルタはサーバ側で実施する想定とし、APIから取得した順で質問を表示する。
質問タイトル押下で質問詳細画面に遷移する。
縦の三点リーダー押下時の処理は実装対象外。