JetpackComposeでガラケー風UIを加えてみた

はじめに

前回のガラケー風UIをさらにバージョンアップしてものです！

実践

@Composable
fun GarakeScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
            .padding(8.dp)
    ) {
        Spacer(modifier = Modifier.height(8.dp))

        // 上部バー
+        StatusBar()

+        Spacer(modifier = Modifier.height(8.dp))

        // メニュー
+        MenuList(
+            items = listOf("メッセージ", "電話帳", "インターネット", "設定")
+        )

+        Spacer(modifier = Modifier.weight(1f))

        // 下部テンキー
        T9Keypad()
    }
}

+@Composable
+fun StatusBar() {
+    Row(
+        modifier = Modifier.fillMaxWidth()
+            .padding(top = 40.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Text(
+            text = "📶 LTE",
+            color = Color.White,
+            fontSize = 12.sp
+        )
+        Text(
+            text = "12:34",
+            color = Color.White,
+            fontSize = 12.sp
+        )
+        Text(
+            text = "🔋 85%",
+            color = Color.White,
+            fontSize = 12.sp
+        )
+    }
+}

+@Composable
+fun MenuList(items: List<String>) {
+    Column {
+        items.forEachIndexed { index, item ->
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 4.dp)
+                    .background(if (index == 0) Color.Gray else +Color.Transparent),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = "${index + 1}. $item",
+                    color = Color.White,
+                    fontSize = 18.sp,
+                    modifier = Modifier.padding(8.dp)
+                )
+            }
+        }
+    }
+}

@Composable
fun T9Keypad() {
    val keys = listOf(
        listOf("1", ""), listOf("2", "ABC"), listOf("3", "DEF"),
        listOf("4", "GHI"), listOf("5", "JKL"), listOf("6", "MNO"),
        listOf("7", "PQRS"), listOf("8", "TUV"), listOf("9", "WXYZ"),
        listOf("*", ""), listOf("0", "+"), listOf("#", "")
    )

    Column {
        for (row in keys.chunked(3)) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 2.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                row.forEach { (num, letters) ->
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        modifier = Modifier
                            .size(64.dp)
                            .border(1.dp, Color.White)
                            .padding(4.dp)
                    ) {
                        Text(text = num, color = Color.White, fontSize = 20.sp)
                        if (letters.isNotEmpty()) {
                            Text(text = letters, color = Color.Gray, fontSize = 10.sp)
                        }
                    }
                }
            }
        }
    }
}