app: Add horizontal screen layout

YuKongA · Jul 13, 2024 · b90429b · b90429b
1 parent 2fa755a
commit b90429b
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 37 deletions.
diff --git a/app/src/main/kotlin/top/yukonga/hq_icon/MainActivity.kt b/app/src/main/kotlin/top/yukonga/hq_icon/MainActivity.kt
@@ -8,9 +8,14 @@ import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
@@ -20,14 +25,14 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.FabPosition
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TopAppBarScrollBehavior
@@ -101,9 +106,15 @@ fun App() {
         Scaffold(
             modifier = Modifier
                 .fillMaxSize()
-                .nestedScroll(scrollBehavior.nestedScrollConnection),
-            topBar = { TopAppBar(scrollBehavior) },
-            floatingActionButton = { FloatActionButton(fabOffsetHeight, appName, country, platformCode, limit, resultsState, cornerStateCode, cornerState) },
+                .nestedScroll(scrollBehavior.nestedScrollConnection)
+                .background(MaterialTheme.colorScheme.background)
+                .displayCutoutPadding(),
+            topBar = {
+                TopAppBar(scrollBehavior)
+            },
+            floatingActionButton = {
+                FloatActionButton(fabOffsetHeight, appName, country, platformCode, limit, resultsState, cornerStateCode, cornerState)
+            },
             floatingActionButtonPosition = FabPosition.End
         ) { padding ->
             LazyColumn(
@@ -112,10 +123,35 @@ fun App() {
                     .padding(horizontal = 20.dp)
             ) {
                 item {
-                    MainCardView(appName, country)
-                    SecondCardView(platformCode, cornerStateCode, resolutionCode)
-                    ResultsView(resultsState.value, cornerStateCode.value, resolutionCode.value)
-                    Spacer(modifier = Modifier.padding(bottom = padding.calculateBottomPadding()))
+                    BoxWithConstraints {
+                        if (maxWidth < 768.dp) {
+                            Column {
+                                MainCardView(appName, country)
+                                SecondCardView(platformCode, cornerStateCode, resolutionCode)
+                                ResultsView(resultsState.value, cornerStateCode.value, resolutionCode.value)
+                                Spacer(Modifier.height(padding.calculateBottomPadding()))
+                            }
+                        } else {
+                            Column {
+                                Row {
+                                    Column(
+                                        modifier = Modifier
+                                            .weight(0.8f)
+                                            .padding(end = 20.dp)
+                                    ) {
+                                        MainCardView(appName, country)
+                                        Spacer(modifier = Modifier.height(20.dp))
+                                        SecondCardView(platformCode, cornerStateCode, resolutionCode)
+                                        Spacer(modifier = Modifier.height(20.dp))
+                                    }
+                                    Column(modifier = Modifier.weight(1.0f)) {
+                                        ResultsView(resultsState.value, cornerStateCode.value, resolutionCode.value)
+                                    }
+                                }
+                                Spacer(Modifier.height(padding.calculateBottomPadding()))
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -125,7 +161,7 @@ fun App() {
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun TopAppBar(scrollBehavior: TopAppBarScrollBehavior) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         title = {
             Text(
                 text = stringResource(R.string.app_name),

diff --git a/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/AboutDialog.kt b/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/AboutDialog.kt
@@ -2,6 +2,7 @@ package top.yukonga.hq_icon.ui.components
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -10,7 +11,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ImageSearch
 import androidx.compose.material3.BasicAlertDialog
@@ -91,14 +91,12 @@ fun AboutDialog() {
                         ) {
                             Text(
                                 text = stringResource(R.string.app_name),
-                                modifier = Modifier,
-                                style = MaterialTheme.typography.titleLarge,
-                                fontWeight = FontWeight.Bold
+                                fontWeight = FontWeight.SemiBold,
+                                fontSize = MaterialTheme.typography.titleLarge.fontSize
                             )
                             Text(
                                 text = stringResource(R.string.app_version, BuildConfig.VERSION_NAME, BuildConfig.VERSION_CODE.toString()),
-                                modifier = Modifier,
-                                style = MaterialTheme.typography.bodyMedium
+                                fontSize = MaterialTheme.typography.bodyMedium.fontSize
                             )
                         }
                     }
@@ -112,33 +110,37 @@ fun AboutDialog() {
                                 text = stringResource(R.string.view_source) + " ",
                                 style = MaterialTheme.typography.bodyMedium
                             )
-                            ClickableText(
+                            Text(
                                 text = AnnotatedString(
                                     text = "GitHub",
-                                    spanStyle = SpanStyle(textDecoration = TextDecoration.Underline)
+                                    spanStyle = SpanStyle(textDecoration = TextDecoration.Underline, color = MaterialTheme.colorScheme.primary)
                                 ),
-                                onClick = {
-                                    uriHandler.openUri("https://github.com/YuKongA/HQ-ICON_Compose")
-                                    hapticFeedback.performHapticFeedback(LongPress)
-                                },
-                                style = MaterialTheme.typography.bodyMedium + SpanStyle(color = MaterialTheme.colorScheme.primary)
+                                fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                                modifier = Modifier.clickable(
+                                    onClick = {
+                                        uriHandler.openUri("https://github.com/YuKongA/HQ-ICON_Compose")
+                                        hapticFeedback.performHapticFeedback(LongPress)
+                                    }
+                                )
                             )
                         }
                         Row {
                             Text(
                                 text = stringResource(R.string.join_group) + " ",
-                                style = MaterialTheme.typography.bodyMedium
+                                fontSize = MaterialTheme.typography.bodyMedium.fontSize
                             )
-                            ClickableText(
+                            Text(
                                 text = AnnotatedString(
                                     text = "Telegram",
-                                    spanStyle = SpanStyle(textDecoration = TextDecoration.Underline)
+                                    spanStyle = SpanStyle(textDecoration = TextDecoration.Underline, color = MaterialTheme.colorScheme.primary)
                                 ),
-                                onClick = {
-                                    uriHandler.openUri("https://t.me/YuKongA13579")
-                                    hapticFeedback.performHapticFeedback(LongPress)
-                                },
-                                style = MaterialTheme.typography.bodyMedium + SpanStyle(color = MaterialTheme.colorScheme.primary)
+                                fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                                modifier = Modifier.clickable(
+                                    onClick = {
+                                        uriHandler.openUri("https://t.me/YuKongA13579")
+                                        hapticFeedback.performHapticFeedback(LongPress)
+                                    }
+                                )
                             )
                         }
                     }

diff --git a/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/MainCardView.kt b/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/MainCardView.kt
@@ -18,7 +18,6 @@ import androidx.compose.ui.unit.dp
 import top.yukonga.hq_icon.R
 import top.yukonga.hq_icon.data.Data
 
-
 @Composable
 fun MainCardView(
     appName: MutableState<String>,

diff --git a/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/TextFieldWithDropdown.kt b/app/src/main/kotlin/top/yukonga/hq_icon/ui/components/TextFieldWithDropdown.kt
@@ -4,12 +4,13 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MenuAnchorType.Companion.PrimaryNotEditable
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -33,9 +34,10 @@ fun TextFieldWithDropdown(
     label: String,
     leadingIcon: ImageVector
 ) {
-    val hapticFeedback = LocalHapticFeedback.current
     var isDropdownExpanded by remember { mutableStateOf(false) }
 
+    val hapticFeedback = LocalHapticFeedback.current
+
     ExposedDropdownMenuBox(
         expanded = isDropdownExpanded,
         onExpandedChange = {
@@ -49,13 +51,19 @@ fun TextFieldWithDropdown(
             label = { Text(label) },
             readOnly = true,
             singleLine = true,
-            modifier = Modifier.menuAnchor().fillMaxWidth(),
             shape = RoundedCornerShape(10.dp),
+            modifier = Modifier
+                .menuAnchor(type = PrimaryNotEditable, enabled = true)
+                .fillMaxWidth(),
             trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(isDropdownExpanded) },
             leadingIcon = { Icon(imageVector = leadingIcon, null) },
         )
-        DropdownMenu(
-            modifier = Modifier.exposedDropdownSize().heightIn(max = 250.dp),
+        ExposedDropdownMenu(
+            modifier = Modifier
+                .exposedDropdownSize()
+                .heightIn(max = 250.dp),
+            shape = RoundedCornerShape(10.dp),
+            containerColor = MaterialTheme.colorScheme.background,
             expanded = isDropdownExpanded,
             onDismissRequest = { isDropdownExpanded = false },
         ) {

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -6,7 +6,7 @@ foundationLayoutAndroid = "1.6.8"
 kotlin = "2.0.0"
 kotlinxCoroutinesAndroid = "1.8.1"
 kotlinxSerializationJson = "1.6.3"
-material3 = "1.2.1"
+material3 = "1.3.0-beta04"
 materialIconsExtendedAndroid = "1.6.8"
 okhttp = "4.12.0"