04.ホーム画面の作成(1)

package jp.co.progress_llc.portal.presentation

import androidx.compose.runtime.Composable
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()
      .padding(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
  ) {
    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(
    )
  }
}

23行目

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

29行目～30行目

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

34行目～40行目

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

47行目～56行目

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

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

57行目～63行目

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

68行目～75行目

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

なくても構いません。