yumemi-inc / android-training-template

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Seo-4d696b75 opened this issue · comments

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

Note

Required(先に完了させましょう)

Next(次に取り組みましょう)

  • 必須課題
    #13

課題内容

  • Composeでメイン画面を組み立てる

画像やテキストは空もしくは適当なダミー画像・文字列で大丈夫です

UIレイアウトの構築

ComposeではColumn, Row, Boxといった標準コンポーネントを組み合わせて所望のレイアウトを組んでいきます。Viewとは異なり、Composeは何重にもネストしても計算コストの高騰を気に掛ける必要がありません!Viewでよく利用されるConstraintLayoutに相当するコンポーネントもComposeで用意されているので、好みの方法でUIを作成しましょう

メイン画面のデザイン

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

以下の条件のような画面をComposeで作成しましょう
(説明の画像はViewのものを利用しています)

  • Imageの幅は画面全体幅の半分
  • 2つのTextの幅はImageの半分

Layout

  • Imageの高さと幅は同じ
  • ImageとTextの隙間はあけない

  • Imageの水平**は画面の**と同じ
  • ImageとText合わせた矩形の垂直**は画面の**と同じ

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

参考資料