Viewでメイン画面を作成する

[k_senda]

🖥️ Fragmentでメイン画面を追加しましょう

Note

Required（先に完了させましょう）

• #2

Next（次に取り組みましょう）

• 必須課題
  #7

課題内容

• Fragmentの依存関係をapp/build.gradleに追加
• XMLでメイン画面を組み立てる
• メイン画面をFragmentで表示する

Fragment

mainブランチのappを実行すると"Hello World!"と表示されますが、文字を表示するViewはMainActivityのレイアウトファイルactivity_main.xmlに直接書かれています。しかし単一Activityのアプリでは往々にしてActivityが肥大化しがちです😰

そこでUIの機能単位ごとにViewをまとめてFragmentとして扱うと、Activityのコードやレイアウトファイルが簡潔になるだけでなく、画面の切り替えやUIの再利用が容易になります👍

UIレイアウトの構築

レイアウトを構成するViewGroupは様々ありますが、何重にもネストしたViewGroupは計算コストが高くなる傾向にあります。一方でConstraintLayoutは自由度が高く、1層で多くのViewGroupを重ねたようにレイアウトすることが可能です。ただし、ConstraintLayoutはそれ自身が既に計算コストが高くなる傾向にあります 🤔

適宜、どのViewGroupを選択するか十分に検討するのが良いでしょう。

メイン画面のデザイン

詳細なデザインはこちらのFigmaを参照してください

以下の条件のレイアウトファイルをConstraintLayoutで作ってみましょう（画像やテキストは空もしくは適当なダミー画像・文字列で大丈夫です）

• ImageViewの幅は画面全体幅の半分
• 2つのTextViewの幅はImageViewの半分

• ImageViewの高さと幅は同じ
• ImageViewとTextViewの隙間はあけない

• ImageViewの水平**は画面の**と同じ
• ImageViewとTextViewを合わせた矩形の垂直**は画面の**と同じ

• ButtonとTextViewの隙間は80dp
• ButtonとTextViewの水平**は同じ

参考資料

• Android developers - Fragment
• Android developers - レイアウト Part of Android Jetpack