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

[Seo-4d696b75]

🖥️ 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