ホーム画面実装

app/src/main/java/com/example/runningavater/MyAppNavHost.kt

@@ -8,11 +8,13 @@ import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.navigation.NavDestination
 import androidx.navigation.NavDestination.Companion.hierarchy
@@ -29,6 +31,7 @@ import com.example.runningavater.settings.GoalSettingsScreen
 import com.example.runningavater.settings.ProfileScreen
 import com.example.runningavater.settings.SettingsScreen
 import com.example.runningavater.settings.SpanSettingsScreen
+import com.example.runningavater.ui.theme.NuclearMango
 
 @Composable
 fun MyAppNavHost(
@@ -72,7 +75,9 @@ private fun MainBottomBar(
     currentDestination: NavDestination?,
     navController: NavHostController,
 ) {
-    NavigationBar {
+    NavigationBar(
+        containerColor = NuclearMango,
+    ) {
         MainScreenTab.entries.forEachIndexed { _, item ->
             NavigationBarItem(
                 icon = { Icon(item.icon, contentDescription = item.label) },
@@ -93,6 +98,14 @@ private fun MainBottomBar(
                         restoreState = true
                     }
                 },
+                colors =
+                    NavigationBarItemDefaults.colors(
+                        selectedIconColor = Color.White,
+                        selectedTextColor = Color.White,
+                        unselectedIconColor = Color.White.copy(alpha = 0.5f),
+                        unselectedTextColor = Color.White.copy(alpha = 0.5f),
+                        indicatorColor = Color.White.copy(alpha = 0.3f),
+                    ),
             )
         }
     }

app/src/main/java/com/example/runningavater/home/Bear3D.kt

@@ -1,24 +1,26 @@
 package com.example.runningavater.home
 
+import androidx.compose.foundation.background
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import com.example.runningavater.ui.theme.SungYellow
 import io.github.sceneview.Scene
 import io.github.sceneview.math.Position
 import io.github.sceneview.node.ModelNode
 import io.github.sceneview.rememberCameraNode
 import io.github.sceneview.rememberEngine
-import io.github.sceneview.rememberEnvironmentLoader
 import io.github.sceneview.rememberModelLoader
 import io.github.sceneview.rememberNode
 
 @Composable
 fun Bear3D(
     assetFileLocation: String,
     modifier: Modifier = Modifier,
+    backgroundColor: Color = SungYellow,
 ) {
     val engine = rememberEngine()
     val modelLoader = rememberModelLoader(engine)
-    val environmentLoader = rememberEnvironmentLoader(engine)
     val cameraNode =
         rememberCameraNode(engine).apply {
             position = Position(x = 0f, y = +1.5f, z = -3f)
@@ -28,7 +30,10 @@ fun Bear3D(
             .addChildNode(cameraNode)
 
     Scene(
-        modifier = modifier,
+        modifier =
+            modifier.background(
+                color = backgroundColor,
+            ),
         engine = engine,
         modelLoader = modelLoader,
         cameraNode = cameraNode,
@@ -49,14 +54,9 @@ fun Bear3D(
                     )
                 },
             ),
-        isOpaque = true,
-        // viewNodeWindowManager = ViewNode2.WindowManager(),
+        isOpaque = false,
         onFrame = {
             cameraNode.lookAt(centerNode)
         },
-        environment =
-            environmentLoader.createHDREnvironment(
-                assetFileLocation = "snowy_forest_4k.hdr",
-            )!!,
     )
 }

app/src/main/java/com/example/runningavater/home/HomeScreen.kt

@@ -1,8 +1,123 @@
 package com.example.runningavater.home
 
+import android.graphics.BitmapFactory
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.runningavater.ui.theme.NuclearMango
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScreen() {
-    Bear3D(assetFileLocation = "fatBear.glb")
+    // 現在の日付と曜日を保持するState
+    val currentDate = remember { mutableStateOf(getCurrentDate()) }
+
+    // 日時を更新するためのLaunchedEffect
+    LaunchedEffect(Unit) {
+        while (true) {
+            currentDate.value = getCurrentDate()
+            kotlinx.coroutines.delay(60000L) // 1分ごとに更新
+        }
+    }
+    Scaffold(
+        topBar = {
+            // ヘッダーの表示
+            TopAppBar(
+                colors =
+                    TopAppBarDefaults.topAppBarColors(
+                        containerColor = NuclearMango,
+                        titleContentColor = MaterialTheme.colorScheme.background,
+                    ),
+                title = {
+                    // 日付と曜日を表示
+                    Text(text = currentDate.value)
+                },
+            )
+        },
+    ) {
+        Box(Modifier.padding(it)) {
+            Bear3D(assetFileLocation = "fatBear.glb")
+            Row(
+                modifier =
+                    Modifier
+                        .align(Alignment.TopCenter)
+                        .offset(y = 15.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                SetImage(
+                    fileName = "flowers_big.PNG",
+                    modifier = Modifier.size(120.dp),
+                )
+
+                // 歩数の数字の部分
+                Text(
+                    text = "35",
+                    fontSize = 96.sp,
+                    color = NuclearMango,
+                )
+                // 調整のためのスペース挿入
+                Spacer(Modifier.width(11.dp))
+                // ”歩”の文字
+                Text(
+                    text = "歩",
+                    fontSize = 32.sp,
+                    color = NuclearMango,
+                )
+                SetImage(
+                    fileName = "flowers_right.PNG",
+                    modifier = Modifier.size(120.dp),
+                )
+            }
+        }
+    }
+}
+
+// 現在の日付と曜日を取得する関数
+// トップバーで使ってます
+fun getCurrentDate(): String {
+    // 日付と曜日をフォーマットする（例：09/11 (Wed)）
+    val dateFormat = SimpleDateFormat("MM/dd (E)", Locale.getDefault())
+    return dateFormat.format(Date())
+}
+
+@Composable
+fun SetImage(
+    fileName: String,
+    modifier: Modifier = Modifier,
+) {
+    // assets フォルダから画像をロード
+    val context = LocalContext.current
+    val assetManager = context.assets
+    val bitmap = BitmapFactory.decodeStream(assetManager.open(fileName))
+
+    // 画像を表示
+    Image(
+        bitmap = bitmap.asImageBitmap(),
+        contentDescription = null,
+        modifier = modifier,
+    )
 }

app/src/main/java/com/example/runningavater/ui/theme/Color.kt

@@ -9,6 +9,7 @@ val Pink80 = Color(0xFFEFB8C8)
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
+
 val NuclearMango = Color(0xFFEDA02C)
-val SungYellow = Color(0xFFFEDB81)
+val SungYellow = Color(0xFFFFE6B6)
 val GranulatedSugar = Color(0xFFFFFCF3)