style(theme): 优化样式

jiaoyaning · Aug 21, 2022 · 96b4558 · 96b4558
1 parent ee76fbc
commit 96b4558
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 45 deletions.
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt b/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt
@@ -2,6 +2,7 @@ package com.jyn.composecalculator.ui
 
 import androidx.activity.OnBackPressedCallback
 import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -13,11 +14,9 @@ import androidx.compose.material.*
 import androidx.compose.material.SwipeableDefaults.resistanceConfig
 import androidx.compose.material.TabRowDefaults.Divider
 import androidx.compose.material3.Surface
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
@@ -28,6 +27,7 @@ import com.apkfuns.logutils.LogUtils
 import com.jyn.composecalculator.BOTTOM_FRACTION
 import com.jyn.composecalculator.DateViewModel
 import com.jyn.composecalculator.isPortrait
+import com.jyn.composecalculator.ui.theme.evaluator
 import com.jyn.composecalculator.ui.theme.myTheme
 import com.jyn.composecalculator.ui.view.InputText
 import com.jyn.composecalculator.ui.view.ItemText
@@ -63,7 +63,7 @@ fun TopResultView() {
 
     val coroutineScope = rememberCoroutineScope()
 
-    val process = state.offset.value / blockSizePx
+    val process = 1 - state.offset.value / blockSizePx
 
     Surface(
         modifier = Modifier
@@ -83,7 +83,10 @@ fun TopResultView() {
                 velocityThreshold = 60.dp
             ),
         color = myTheme.topBg,
-        shape = RoundedCornerShape(bottomStart = 25.dp, bottomEnd = 25.dp),
+        shape = RoundedCornerShape(
+            bottomStart = 25.dp * (1 - process),
+            bottomEnd = 25.dp * (1 - process)
+        ),
         tonalElevation = 3.dp,
         shadowElevation = 3.dp
     ) {
@@ -123,7 +126,9 @@ fun TextBox(process: Float) {
     ) {
         LazyColumn(
             modifier = Modifier
-                .weight(1f),
+                .weight(1f)
+                .background(myTheme.topListBg)
+                .padding(start = 10.dp, end = 10.dp),
             reverseLayout = true,
             userScrollEnabled = true,
         ) {
@@ -143,16 +148,20 @@ fun TextBox(process: Float) {
             }
         }
 
-        InputText(process)
-
-        Spacer(modifier = Modifier.height(5.dp))
+        Surface(
+            modifier = Modifier.background(myTheme.topListBg),
+            color = myTheme.topListBg,
+            shape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
+            tonalElevation = 3.dp * (process),
+            shadowElevation = 3.dp * (process),
+        ) {
+            InputText(process)
+        }
 
         Box(
             modifier = Modifier
-                .padding(
-                    top = 10.dp,
-                    bottom = 10.dp
-                )
+                .background(evaluator(1 - process, myTheme.bottomBg, myTheme.topBg))
+                .padding(top = 10.dp, bottom = 10.dp)
                 .fillMaxWidth()
         ) {
             SlideIndicator(process)

diff --git a/app/src/main/java/com/jyn/composecalculator/ui/theme/Color.kt b/app/src/main/java/com/jyn/composecalculator/ui/theme/Color.kt
@@ -29,6 +29,7 @@ val btnEqualBgLight = Color(0xFFD1E3FD)
 val btnClearBgLight = Color(0xFFC3EFD0)
 val bottomBgLight = Color(0xFFFFFFFF)
 val topBgLight = Color(0xFFEAEFFA)
+val topListBgLight = Color(0xFFF1F6FD)
 
 val textColorDark = Color(0xFFC0E7FB)
 val btnNumBgDark = Color(0xFF29292B)
@@ -37,3 +38,4 @@ val btnEqualBgDark = Color(0xFF0742A0)
 val btnClearBgDark = Color(0xFF105225)
 val bottomBgDark = Color(0xFF1F1F1F)
 val topBgDark = Color(0xFF38393C)
+val topListBgDark = Color(0xFF2E2F32)
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/theme/Theme.kt b/app/src/main/java/com/jyn/composecalculator/ui/theme/Theme.kt
@@ -31,6 +31,7 @@ open class MyTheme(
     val btnClearBg: Color,      // C号
     val bottomBg:Color,         // 底部背景色
     val topBg: Color,           // 顶部背景色
+    val topListBg: Color,       // 顶部列表背景色
 )
 
 private val MyLightColor = MyTheme(
@@ -41,6 +42,7 @@ private val MyLightColor = MyTheme(
     btnClearBg = btnClearBgLight,
     bottomBg = bottomBgLight,
     topBg = topBgLight,
+    topListBg = topListBgLight,
 )
 
 private val MyDarkColor = MyTheme(
@@ -51,6 +53,7 @@ private val MyDarkColor = MyTheme(
     btnClearBg = btnClearBgDark,
     bottomBg = bottomBgDark,
     topBg = topBgDark,
+    topListBg = topListBgDark,
 )
 
 val myTheme: MyTheme

diff --git a/app/src/main/java/com/jyn/composecalculator/ui/view/ItemTextView.kt b/app/src/main/java/com/jyn/composecalculator/ui/view/ItemTextView.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -15,26 +14,21 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.text.ExperimentalTextApi
 import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.jyn.composecalculator.DateViewModel
 import com.jyn.composecalculator.isPortrait
 import com.jyn.composecalculator.ui.theme.evaluator
 import com.jyn.composecalculator.ui.theme.myTheme
 
-
 @Composable
 fun InputText(process: Float) {
     val viewModel = viewModel<DateViewModel>()
@@ -51,40 +45,52 @@ fun InputText(process: Float) {
         resultScrollState.scrollTo(resultTextWidth.value) //自动滚动到最后一个
     }
 
-    Column(
-        modifier = Modifier
-            .background(evaluator(process, myTheme.bottomBg, myTheme.topBg))
-            .height(viewModel.textBoxHeight * 1f)
-            .alpha(1f)
-            .padding(start = 10.dp, end = 10.dp),
-        verticalArrangement = Arrangement.Center
-    ) {
-        Row(verticalAlignment = Alignment.CenterVertically) {
+    Box {
+        Column(
+            modifier = Modifier
+                .align(Alignment.CenterEnd)
+                .background(evaluator(1- process, myTheme.bottomBg, myTheme.topBg))
+                .height(viewModel.textBoxHeight * 1f)
+                .alpha(1f)
+                .padding(start = 10.dp, end = 10.dp),
+            verticalArrangement = Arrangement.Center
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text(
+                    modifier = Modifier
+                        .weight(1f)
+                        .horizontalScroll(inputScrollState)
+                        .onSizeChanged { inputTextWidth.value = it.width },
+                    text = viewModel.inputText.value,
+                    color = myTheme.textColor,
+                    maxLines = 1,
+                    fontSize = if (isPortrait) 50.sp else 25.sp,
+                    textAlign = TextAlign.End,
+                )
+                CursorView(if (isPortrait) 50.dp else 25.dp)
+            }
+
             Text(
+                text = viewModel.resultText.value,
                 modifier = Modifier
-                    .weight(1f)
-                    .horizontalScroll(inputScrollState)
-                    .onSizeChanged { inputTextWidth.value = it.width },
-                text = viewModel.inputText.value,
-                color = myTheme.textColor,
+                    .fillMaxWidth()
+                    .padding(end = 5.dp)
+                    .horizontalScroll(resultScrollState)
+                    .onSizeChanged { resultTextWidth.value = it.width },
                 maxLines = 1,
-                fontSize = if (isPortrait) 50.sp else 25.sp,
+                fontSize = if (isPortrait) 30.sp else 15.sp,
+                color = Color.Gray,
                 textAlign = TextAlign.End,
             )
-            CursorView(if (isPortrait) 50.dp else 25.dp)
         }
 
         Text(
-            text = viewModel.resultText.value,
             modifier = Modifier
-                .fillMaxWidth()
-                .padding(end = 5.dp)
-                .horizontalScroll(resultScrollState)
-                .onSizeChanged { resultTextWidth.value = it.width },
-            maxLines = 1,
-            fontSize = if (isPortrait) 30.sp else 15.sp,
+                .padding(10.dp)
+                .alpha(process),
+            text = "当前表达式",
             color = Color.Gray,
-            textAlign = TextAlign.End,
+            fontSize = if (isPortrait) 20.sp else 10.sp,
         )
     }
 }

diff --git a/app/src/main/java/com/jyn/composecalculator/ui/view/SlideIndicator.kt b/app/src/main/java/com/jyn/composecalculator/ui/view/SlideIndicator.kt
@@ -22,7 +22,7 @@ import com.jyn.composecalculator.ui.theme.myTheme
  */
 @Composable
 fun SlideIndicator(process: Float) {
-    var offsetProcess = 1 - process
+    var offsetProcess = process
     if (offsetProcess < 0) offsetProcess *= 10
     LogUtils.tag("SlideIndicator").i("process: $offsetProcess")
     val width = 30.dp