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.fillMaxSize
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

@Composable
fun HomeScreen(
  modifier: Modifier = Modifier
) {
  Column(
    modifier = modifier
      .fillMaxSize()
      .background(MaterialTheme.colorScheme.background)
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
  ) {
    Image(
      painter = painterResource(id = R.drawable.ic_logo_1),
      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(
    )
  }
}

24行目

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

30行目～32行目

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

36行目～42行目

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

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

43行目～49行目

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

55行目～64行目

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

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

56行目

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

65行目～71行目

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

76行目～83行目

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

なくても構いません。