04.ホーム画面の作成

package jp.co.progress_llc.portal.presentation

import androidx.compose.runtime.Composable
import androidx.compose.foundation.background
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.IconButton
import jp.co.progress_llc.portal.R
import jp.co.progress_llc.portal.core.ui.theme.AppTheme
import jp.co.progress_llc.portal.feature.depart.navigation.DEPART_ROUTE

@Composable
fun HomeScreen(
  modifier: Modifier = Modifier
) {
  Column(
    modifier = modifier
      .fillMaxSize()
      .background(MaterialTheme.colorScheme.background)
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Top
  ) {
    Spacer(modifier = Modifier.height(48.dp))
    Image(
      painter = painterResource(id = R.drawable.ic_logo),
      contentDescription = "ロゴ",
      modifier = Modifier
        .size(120.dp)
        .padding(bottom = 16.dp)
    )
    Text(
      text = "プログレス合同会社\nポータルアプリ",
      style = MaterialTheme.typography.headlineMedium,
      fontWeight = FontWeight.Bold,
      textAlign = TextAlign.Center,
      modifier = Modifier.padding(bottom = 32.dp)
    )

    Column(
      horizontalAlignment = Alignment.CenterHorizontally,
      verticalArrangement = Arrangement.Center,
      modifier = Modifier.padding(16.dp)
    ) {
      IconButton(
        onClick = { },
        modifier = Modifier.size(80.dp)
      ) {
        Image(
          painter = painterResource(id = R.drawable.ic_button_train),
          contentDescription = "発車予定ボタン",
          modifier = Modifier.size(64.dp)
        )
      }
      Text(
        text = "発車予定",
        style = MaterialTheme.typography.bodyLarge,
        fontWeight = FontWeight.Bold,
        color = MaterialTheme.colorScheme.onSurface,
        modifier = Modifier.padding(top = 0.dp)
      )
    }
  }
}

@Preview(showBackground = true)
@Composable
fun HomeScreenPreview() {
  AppTheme {
    HomeScreen()
  }
}

27行目

UIを描くCompose関数を宣言しています。

33行目～35行目

端末画面全体に描画し、上下左右に16dpの余白を設定しています。

39行目

上部に48dpの空白を入れています。

40行目～46行目

会社のロゴを表示しています。

ロゴ画像は/app/src/main/res/drawable/に用意しておきます。

47行目～53行目

アプリケーションのタイトルを表示しています。

60行目～69行目

アイコン画像をボタンとして表示しています。

アイコン画像は/app/src/main/res/drawable/に用意しておきます。

61行目

クリックしても画面遷移しないようにしています。

70行目～76行目

アイコン画像の説明を表示しています。

81行目～87行目

Android Studioで画面のプレビューを表示するための関数を定義しています。

なくても構いません。