更改目录结构

app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedCounter.kt

@@ -0,0 +1,41 @@
+package com.aiosman.riderpro.ui.composables
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.SizeTransform
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.animation.with
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.sp
+
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+fun AnimatedCounter(count: Int, modifier: Modifier = Modifier, fontSize: Int = 24) {
+    AnimatedContent(
+        targetState = count,
+        transitionSpec = {
+            // Compare the incoming number with the previous number.
+            if (targetState > initialState) {
+                // If the target number is larger, it slides up and fades in
+                // while the initial (smaller) number slides up and fades out.
+                (slideInVertically { height -> height } + fadeIn()).togetherWith(slideOutVertically { height -> -height } + fadeOut())
+            } else {
+                // If the target number is smaller, it slides down and fades in
+                // while the initial number slides down and fades out.
+                (slideInVertically { height -> -height } + fadeIn()).togetherWith(slideOutVertically { height -> height } + fadeOut())
+            }.using(
+                // Disable clipping since the faded slide-in/out should
+                // be displayed out of bounds.
+                SizeTransform(clip = false)
+            )
+        }
+    ) { targetCount ->
+        Text(text = "$targetCount", modifier = modifier, fontSize = fontSize.sp)
+    }
+}

app/src/main/java/com/aiosman/riderpro/ui/composables/AnimatedLikeButton.kt

@@ -0,0 +1,71 @@
+package com.aiosman.riderpro.ui.composables
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.painterResource
+import com.aiosman.riderpro.R
+import kotlinx.coroutines.launch
+
+@Composable
+fun AnimatedLikeIcon(
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null
+) {
+    var liked by remember { mutableStateOf(false) }
+    val animatableRotation = remember { Animatable(0f) }
+    val animatedColor by animateColorAsState(targetValue = if (liked) Color(0xFFd83737) else Color.Black)
+    val scope = rememberCoroutineScope()
+    suspend fun shake() {
+        repeat(2) {
+            animatableRotation.animateTo(
+                targetValue = 10f,
+                animationSpec = tween(100)
+            ) {
+
+            }
+            animatableRotation.animateTo(
+                targetValue = -10f,
+                animationSpec = tween(100)
+            ) {
+
+            }
+
+        }
+        animatableRotation.animateTo(
+            targetValue = 0f,
+            animationSpec = tween(100)
+        )
+    }
+    Box(contentAlignment = Alignment.Center, modifier = Modifier.clickable {
+        liked = !liked
+        onClick?.invoke()
+        // Trigger shake animation
+        scope.launch {
+            shake()
+        }
+
+    }) {
+        Image(
+            painter = painterResource(id = R.drawable.rider_pro_like),
+            contentDescription = "Like",
+            modifier = modifier.graphicsLayer {
+                    rotationZ = animatableRotation.value
+                },
+            colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(animatedColor)
+        )
+    }
+}

app/src/main/java/com/aiosman/riderpro/ui/composables/BottomNavigationPlaceholder.kt

@@ -0,0 +1,24 @@
+package com.aiosman.riderpro.ui.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+
+@Composable
+fun BottomNavigationPlaceholder(
+    color: Color? = null
+) {
+    val navigationBarHeight = with(LocalDensity.current) {
+        WindowInsets.navigationBars.getBottom(this).toDp()
+    }
+    Box(
+        modifier = Modifier.height(navigationBarHeight).fillMaxWidth().background(color ?: Color.Transparent)
+    )
+}

app/src/main/java/com/aiosman/riderpro/ui/composables/StatusBarMask.kt

@@ -0,0 +1,67 @@
+package com.aiosman.riderpro.ui.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+
+@Composable
+fun StatusBarMask(darkIcons: Boolean = true) {
+    val paddingValues = WindowInsets.systemBars.asPaddingValues()
+    val systemUiController = rememberSystemUiController()
+    LaunchedEffect(Unit) {
+        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = darkIcons)
+
+    }
+    Spacer(modifier = Modifier.height(paddingValues.calculateTopPadding()))
+
+}
+
+@Composable
+fun StatusBarMaskLayout(
+    modifier: Modifier = Modifier,
+    darkIcons: Boolean = true,
+    maskBoxBackgroundColor: Color = Color.Transparent,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    val paddingValues = WindowInsets.systemBars.asPaddingValues()
+    val systemUiController = rememberSystemUiController()
+    val navigationBarPaddings =
+        WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+    LaunchedEffect(Unit) {
+        systemUiController.setStatusBarColor(Color.Transparent, darkIcons = darkIcons)
+    }
+    Column(
+        modifier = modifier.fillMaxSize()
+    ) {
+        Box(
+            modifier = Modifier
+                .height(paddingValues.calculateTopPadding())
+                .fillMaxWidth()
+                .background(maskBoxBackgroundColor)
+        ) {
+
+        }
+        content()
+        if (navigationBarPaddings > 24.dp) {
+            Box(
+                modifier = Modifier
+                    .height(navigationBarPaddings).fillMaxWidth().background(Color.White)
+            )
+        }
+    }
+}