wear, fix content cutoff on increased font size

Razeeman · Razeeman · commit 54e2b80acf32 · 2024-07-13T08:11:56.000+03:00
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/screens/settings/SettingsItemType.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/screens/settings/SettingsItemType.kt
@@ -8,5 +8,6 @@ package com.example.util.simpletimetracker.presentation.screens.settings
 interface SettingsItemType {
 
     object AllowMultitasking : SettingsItemType
+    object AllowMultitaskingHint : SettingsItemType
     object ShowCompactList : SettingsItemType
 }
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/screens/settings/SettingsViewDataMapper.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/screens/settings/SettingsViewDataMapper.kt
@@ -29,14 +29,15 @@ class SettingsViewDataMapper @Inject constructor(
         items += SettingsItem.CheckBox(
             type = SettingsItemType.AllowMultitasking,
             text = resourceRepo.getString(R.string.settings_allow_multitasking),
-            hint = resourceRepo.getString(R.string.settings_allow_multitasking_hint),
             checked = wearSettings.allowMultitasking,
         )
-
+        items += SettingsItem.Hint(
+            type = SettingsItemType.AllowMultitaskingHint,
+            hint = resourceRepo.getString(R.string.settings_allow_multitasking_hint),
+        )
         items += SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = resourceRepo.getString(R.string.wear_settings_title_show_compact_list),
-            hint = "",
             checked = showCompactList,
         )
 
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsItems.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsItems.kt
@@ -24,15 +24,20 @@ import androidx.wear.tooling.preview.devices.WearDevices
 import com.example.util.simpletimetracker.presentation.screens.settings.SettingsItemType
 import com.example.util.simpletimetracker.presentation.theme.ColorAccent
 
+// TODO split into separate files
 sealed interface SettingsItem {
     val type: SettingsItemType
 
     data class CheckBox(
         override val type: SettingsItemType,
         val text: String,
-        val hint: String,
         val checked: Boolean,
     ) : SettingsItem
+
+    data class Hint(
+        override val type: SettingsItemType,
+        val hint: String,
+    ) : SettingsItem
 }
 
 @Composable
@@ -56,14 +61,6 @@ fun SettingsCheckbox(
                 text = state.text,
                 fontWeight = FontWeight.Medium,
             )
-            if (state.hint.isNotEmpty()) {
-                Text(
-                    text = state.hint,
-                    fontWeight = FontWeight.Light,
-                    fontSize = 11.sp,
-                    lineHeight = 11.sp,
-                )
-            }
         }
         Checkbox(
             modifier = Modifier,
@@ -78,14 +75,32 @@ fun SettingsCheckbox(
     }
 }
 
+@Composable
+fun SettingsHint(
+    state: SettingsItem.Hint,
+) {
+    Column(
+        Modifier
+            .padding(bottom = 3.dp)
+            .padding(horizontal = 4.dp)
+            .fillMaxWidth(),
+    ) {
+        Text(
+            text = state.hint,
+            fontWeight = FontWeight.Light,
+            fontSize = 11.sp,
+            lineHeight = 11.sp,
+        )
+    }
+}
+
 @Preview(device = WearDevices.LARGE_ROUND)
 @Composable
 private fun SettingsCheckboxPreview() {
     SettingsCheckbox(
         state = SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = "Check box",
-            hint = "",
             checked = false,
         ),
     )
@@ -98,7 +113,6 @@ private fun SettingsCheckboxCheckedPreview() {
         state = SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = "Check box",
-            hint = "Check box hint",
             checked = true,
         ),
     )
@@ -111,7 +125,6 @@ private fun SettingsCheckboxHintPreview() {
         state = SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = "Check box",
-            hint = "Check box hint",
             checked = false,
         ),
     )
@@ -124,8 +137,29 @@ private fun SettingsCheckboxLongPreview() {
         state = SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = "Check box Check box Check box Check box Check box Check box Check box Check box ",
-            hint = "Check box hint Check box hint Check box hint Check box hint Check box hint ",
             checked = false,
         ),
     )
+}
+
+@Preview(device = WearDevices.LARGE_ROUND)
+@Composable
+private fun SettingsHintPreview() {
+    SettingsHint(
+        state = SettingsItem.Hint(
+            type = SettingsItemType.AllowMultitaskingHint,
+            hint = "Check box hint",
+        ),
+    )
+}
+
+@Preview(device = WearDevices.LARGE_ROUND)
+@Composable
+private fun SettingsHintLongPreview() {
+    SettingsHint(
+        state = SettingsItem.Hint(
+            type = SettingsItemType.AllowMultitaskingHint,
+            hint = "Check box hint Check box hint Check box hint Check box hint Check box hint ",
+        ),
+    )
 }
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsList.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/components/SettingsList.kt
@@ -47,6 +47,7 @@ fun SettingsList(
 ) {
     ScaffoldedScrollingColumn(
         startItemIndex = 0,
+        spacedBy = 0.dp,
     ) {
         when (state) {
             is SettingsListState.Loading -> item {
@@ -111,6 +112,11 @@ private fun ScalingLazyListScope.renderContent(
                         onClick = onClick,
                     )
                 }
+                is SettingsItem.Hint -> {
+                    SettingsHint(
+                        state = item,
+                    )
+                }
             }
         }
     }
@@ -131,9 +137,37 @@ private fun Content() {
         SettingsItem.CheckBox(
             type = SettingsItemType.ShowCompactList,
             text = "Setting",
-            hint = "",
             checked = true,
         ),
+        SettingsItem.Hint(
+            type = SettingsItemType.AllowMultitaskingHint,
+            hint = "Hint",
+        ),
+    )
+    SettingsList(
+        state = SettingsListState.Content(
+            items = items,
+        ),
+    )
+}
+
+@Preview(
+    device = WearDevices.LARGE_ROUND,
+    showSystemUi = true,
+    fontScale = 1.5f,
+)
+@Composable
+private fun ContentLong() {
+    val items = listOf(
+        SettingsItem.CheckBox(
+            type = SettingsItemType.ShowCompactList,
+            text = "Setting Setting Setting Setting Setting",
+            checked = true,
+        ),
+        SettingsItem.Hint(
+            type = SettingsItemType.AllowMultitaskingHint,
+            hint = "Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint Hint ",
+        ),
     )
     SettingsList(
         state = SettingsListState.Content(
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/layout/ScaffoldedScrollingColumn.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/layout/ScaffoldedScrollingColumn.kt
@@ -6,18 +6,22 @@
 package com.example.util.simpletimetracker.presentation.ui.layout
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.ScalingLazyListScope
 import androidx.wear.compose.material.rememberScalingLazyListState
 
 @Composable
 fun ScaffoldedScrollingColumn(
     startItemIndex: Int,
+    spacedBy: Dp = 10.dp,
     content: ScalingLazyListScope.() -> Unit,
 ) {
     val scrollState = rememberScalingLazyListState()
     Scaffolding(scrollState) {
         ScrollingColumn(
             startItemIndex = startItemIndex,
+            spacedBy = spacedBy,
             scrollState = scrollState,
             content = content,
         )
diff --git a/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/layout/ScrollingColumn.kt b/wear/src/main/java/com/example/util/simpletimetracker/presentation/ui/layout/ScrollingColumn.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.AutoCenteringParams
 import androidx.wear.compose.material.MaterialTheme
@@ -27,6 +28,7 @@ import com.google.android.horologist.compose.rotaryinput.rotaryWithScroll
 @Composable
 fun ScrollingColumn(
     startItemIndex: Int,
+    spacedBy: Dp,
     scrollState: ScalingLazyListState = rememberScalingLazyListState(),
     content: ScalingLazyListScope.() -> Unit,
 ) {
@@ -41,7 +43,7 @@ fun ScrollingColumn(
         autoCentering = AutoCenteringParams(
             itemIndex = startItemIndex,
         ),
-        verticalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(spacedBy),
         state = scrollState,
         content = content,
     )

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,6 @@ package com.example.util.simpletimetracker.presentation.screens.settings`
`8`	`8`	`interface SettingsItemType {`
`9`	`9`
`10`	`10`	`object AllowMultitasking : SettingsItemType`
	`11`	`+ object AllowMultitaskingHint : SettingsItemType`
`11`	`12`	`object ShowCompactList : SettingsItemType`
`12`	`13`	`}`