ユーザ用ツール

サイト用ツール


サイドバー

プログレス合同会社

広告

android:studio:application:app:home-01

06.ホーム画面の作成

:appモジュールにホーム画面を作成します。

共通リソースモジュールへの依存を追記

:appモジュールに:core:resourcesモジュールへの依存関係を追記します。

   :
dependencies {
   :
  implementation(project(":core:resources"))
   :
}

4行目
共通リソースモジュールへの依存関係を追記しています。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

ホーム画面の作成

UI層として:appモジュールにpresentationディレクトリ(パッケージ)を作成し、直下にAppHomeScreen.ktを作成します。

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.*
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.stringResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.material3.*
import jp.co.progress_llc.portal.R
import jp.co.progress_llc.portal.core.ui.theme.AppTheme
import jp.co.progress_llc.portal.core.resources.R as CoreR

@Composable
fun AppHomeScreen() {
  Scaffold(
  ) {  innerPadding ->
    Column(
      modifier = Modifier
        .padding(innerPadding)
        .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 = stringResource(CoreR.string.company_name) + "\n"
            + stringResource(CoreR.string.app_name),
        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 AppHomeScreenPreview() {
  AppTheme {
    AppHomeScreen()
  }
}

18行目
appモジュールのリソースR(16行目)と区別するため、別名CoreRを定義しています。
20行目
UIを描くCompose関数を宣言しています。
22行目~23行目、26行目
コンテンツの表示領域を安全に確保させます。
27行目~29行目
端末画面全体に描画し、上下左右に16dpの余白を設定しています。
33行目
上部に48dpの空白を入れています。
34行目~40行目
会社のロゴを表示しています。
ロゴ画像は/app/src/main/res/drawable/に用意しておきます。
41行目~48行目
アプリケーションのタイトルを表示しています。
55行目~64行目
アイコン画像をボタンとして表示しています。
アイコン画像は/app/src/main/res/drawable/に用意しておきます。
56行目
クリックしても画面遷移しないようにしています。
65行目~71行目
アイコン画像の説明を表示しています。
77行目~83行目
Android Studioで画面のプレビューを表示するための関数を定義しています。
なくても構いません。

アプリケーションタイトルとアイコンボタンだけの画面なので、ViewModelは不要です。

android/studio/application/app/home-01.txt · 最終更新: by 管理者