Improve interactions with clickable elements

T8RIN · Feb 13, 2025 · 763c015 · 763c015
1 parent c31338d
commit 763c015
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/...ain/kotlin/ru/tech/imageresizershrinker/core/ui/widget/modifier/ContainerShapeDefaults.kt b/...ain/kotlin/ru/tech/imageresizershrinker/core/ui/widget/modifier/ContainerShapeDefaults.kt
@@ -20,9 +20,11 @@ package ru.tech.imageresizershrinker.core.ui.widget.modifier
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.animation.core.FiniteAnimationSpec
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.shape.CornerBasedShape
+import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -40,6 +42,7 @@ import androidx.compose.ui.graphics.Outline
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.channels.Channel
@@ -54,7 +57,7 @@ object ContainerShapeDefaults {
         index: Int,
         size: Int,
         forceDefault: Boolean = false,
-    ): Shape {
+    ): RoundedCornerShape {
         val internalShape by remember(index, size, forceDefault) {
             derivedStateOf {
                 when {
@@ -65,7 +68,24 @@ object ContainerShapeDefaults {
                 }
             }
         }
-        return animateShape(internalShape)
+        val topStart by animateDpAsState(
+            internalShape.topStart.dp
+        )
+        val topEnd by animateDpAsState(
+            internalShape.topEnd.dp
+        )
+        val bottomStart by animateDpAsState(
+            internalShape.bottomStart.dp
+        )
+        val bottomEnd by animateDpAsState(
+            internalShape.bottomEnd.dp
+        )
+        return RoundedCornerShape(
+            topStart = topStart,
+            topEnd = topEnd,
+            bottomStart = bottomStart,
+            bottomEnd = bottomEnd
+        )
     }
 
     val topShape = RoundedCornerShape(
@@ -74,19 +94,26 @@ object ContainerShapeDefaults {
         bottomStart = 6.dp,
         bottomEnd = 6.dp
     )
+
     val centerShape = RoundedCornerShape(
         topStart = 6.dp,
         topEnd = 6.dp,
         bottomStart = 6.dp,
         bottomEnd = 6.dp
     )
+
     val bottomShape = RoundedCornerShape(
         topStart = 6.dp,
         topEnd = 6.dp,
         bottomStart = 16.dp,
         bottomEnd = 16.dp
     )
+
     val defaultShape = RoundedCornerShape(16.dp)
+
+    private val CornerSize.dp: Dp
+        @Composable
+        get() = with(LocalDensity.current) { toPx(Size.Unspecified, this).toDp() }
 }
 
 @Stable

diff --git a/.../kotlin/ru/tech/imageresizershrinker/core/ui/widget/preferences/PreferenceItemOverload.kt b/.../kotlin/ru/tech/imageresizershrinker/core/ui/widget/preferences/PreferenceItemOverload.kt
@@ -59,6 +59,7 @@ import ru.tech.imageresizershrinker.core.ui.utils.provider.ProvideContainerDefau
 import ru.tech.imageresizershrinker.core.ui.widget.enhanced.hapticsClickable
 import ru.tech.imageresizershrinker.core.ui.widget.enhanced.hapticsCombinedClickable
 import ru.tech.imageresizershrinker.core.ui.widget.modifier.container
+import ru.tech.imageresizershrinker.core.ui.widget.modifier.shapeByInteraction
 
 
 @Composable
@@ -72,6 +73,7 @@ fun PreferenceItemOverload(
     startIcon: (@Composable () -> Unit)? = null,
     endIcon: (@Composable () -> Unit)? = null,
     shape: Shape = RoundedCornerShape(16.dp),
+    pressedShape: Shape = RoundedCornerShape(6.dp),
     color: Color = Color.Unspecified,
     contentColor: Color = contentColorFor(backgroundColor = color),
     overrideIconShapeContentColor: Boolean = false,
@@ -96,6 +98,11 @@ fun PreferenceItemOverload(
             ) else it
         }
     ) {
+        val shape = shapeByInteraction(
+            shape = shape,
+            pressedShape = pressedShape,
+            interactionSource = interactionSource
+        )
         Card(
             shape = shape,
             modifier = modifier

diff --git a/.../src/main/kotlin/ru/tech/imageresizershrinker/core/ui/widget/preferences/PreferenceRow.kt b/.../src/main/kotlin/ru/tech/imageresizershrinker/core/ui/widget/preferences/PreferenceRow.kt
@@ -56,6 +56,7 @@ import ru.tech.imageresizershrinker.core.ui.shapes.IconShapeContainer
 import ru.tech.imageresizershrinker.core.ui.utils.provider.ProvideContainerDefaults
 import ru.tech.imageresizershrinker.core.ui.widget.enhanced.hapticsClickable
 import ru.tech.imageresizershrinker.core.ui.widget.modifier.container
+import ru.tech.imageresizershrinker.core.ui.widget.modifier.shapeByInteraction
 
 @Composable
 fun PreferenceRow(
@@ -84,6 +85,12 @@ fun PreferenceRow(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     drawContainer: Boolean = true,
 ) {
+    val shape = shapeByInteraction(
+        shape = shape,
+        pressedShape = RoundedCornerShape(6.dp),
+        interactionSource = interactionSource
+    )
+
     val internalColor = contentColor
         ?: contentColorFor(backgroundColor = color)
     CompositionLocalProvider(

diff --git a/...ch/imageresizershrinker/feature/main/presentation/components/ScreenPreferenceSelection.kt b/...ch/imageresizershrinker/feature/main/presentation/components/ScreenPreferenceSelection.kt
@@ -22,16 +22,13 @@ import android.net.Uri
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.SizeTransform
-import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
 import androidx.compose.animation.togetherWith
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -191,15 +188,6 @@ internal fun RowScope.ScreenPreferenceSelection(
                     contentPadding = contentPadding,
                     content = {
                         items(currentScreenList) { screen ->
-                            val interactionSource = remember {
-                                MutableInteractionSource()
-                            }
-                            val pressed by interactionSource.collectIsPressedAsState()
-
-                            val cornerSize by animateDpAsState(
-                                if (pressed) 6.dp
-                                else 18.dp
-                            )
                             PreferenceItemOverload(
                                 onClick = {
                                     onNavigateToScreenWithPopUpTo(screen)
@@ -209,7 +197,7 @@ internal fun RowScope.ScreenPreferenceSelection(
                                     .widthIn(min = 1.dp)
                                     .fillMaxWidth()
                                     .animateItem(),
-                                shape = RoundedCornerShape(cornerSize),
+                                shape = RoundedCornerShape(18.dp),
                                 title = stringResource(screen.title),
                                 subtitle = stringResource(screen.subtitle),
                                 endIcon = {
@@ -283,8 +271,7 @@ internal fun RowScope.ScreenPreferenceSelection(
                                             )
                                         }
                                     }
-                                },
-                                interactionSource = interactionSource
+                                }
                             )
                         }
                     }