style(横竖屏): 横竖屏样式调整

jiaoyaning · jiaoyaning · commit 51e6efda492c · 2022-08-09T16:09:50.000+08:00
diff --git a/app/src/main/java/com/jyn/composecalculator/DateViewModel.kt b/app/src/main/java/com/jyn/composecalculator/DateViewModel.kt
@@ -6,8 +6,10 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.AndroidViewModel
 
 class DateViewModel(application: Application) : AndroidViewModel(application) {
+    var idpPortrait = true
     var textBoxHeight = 0.dp
     var inputText = mutableStateOf("")
+    var resultText = mutableStateOf("")
 
     fun append(text: String) {
         inputText.value = inputText.value + text
@@ -21,4 +23,8 @@ class DateViewModel(application: Application) : AndroidViewModel(application) {
     fun clear() {
         inputText.value = ""
     }
+
+    fun calculate() {
+        resultText.value = "XXXXX"
+    }
 }
diff --git a/app/src/main/java/com/jyn/composecalculator/MainActivity.kt b/app/src/main/java/com/jyn/composecalculator/MainActivity.kt
@@ -1,5 +1,6 @@
 package com.jyn.composecalculator
 
+import android.content.res.Configuration.ORIENTATION_PORTRAIT
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -10,19 +11,25 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.apkfuns.logutils.LogUtils
 import com.jyn.composecalculator.ui.BottomBtnView
 import com.jyn.composecalculator.ui.TopResultView
 import com.jyn.composecalculator.ui.theme.ComposeCalculatorTheme
 
+const val BOTTOM_FRACTION = 0.67f
+var isPortrait = false
+
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         LogUtils.getLogConfig().configShowBorders(false)
         setContent {
             ComposeCalculatorTheme {
+                //是否是竖屏
+                isPortrait = LocalConfiguration.current.orientation == ORIENTATION_PORTRAIT
                 val viewModel = viewModel<DateViewModel>()
                 LogUtils.tag("viewModel").i("MainActivity viewModel : $viewModel")
                 ContentView()
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt b/app/src/main/java/com/jyn/composecalculator/ui/BottomBtnView.kt
@@ -1,19 +1,23 @@
 package com.jyn.composecalculator.ui
 
+import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.jyn.composecalculator.BOTTOM_FRACTION
 import com.jyn.composecalculator.DateViewModel
 import com.jyn.composecalculator.R
+import com.jyn.composecalculator.isPortrait
 
 /**
  * 底部按钮
@@ -26,22 +30,30 @@ private val numberColumns = listOf(
     listOf("÷", "×", "-", "+", "="),
 )
 
-const val BOTTOM_FRACTION = 0.67f
-
 @Preview(showBackground = true)
 @Composable
 fun BottomBtnView() {
-    Surface(
+    Row(
         Modifier
             .padding(bottom = 10.dp)
-            .background(MaterialTheme.colorScheme.secondary)
             .fillMaxHeight(BOTTOM_FRACTION)
-            .fillMaxWidth()
     ) {
+        if (!isPortrait) {
+            Row( //数列
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .weight(1f)
+                    .padding(10.dp),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+            }
+        }
+
+        //竖屏基础按钮
         Row( //数列
             modifier = Modifier
                 .fillMaxHeight()
-                .fillMaxWidth()
+                .weight(1f)
                 .padding(10.dp),
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
@@ -58,7 +70,7 @@ fun BottomBtnView() {
                             modifier = Modifier
                                 .padding(bottom = 10.dp)
                                 .weight(1f)
-                                .aspectRatio(1f)
+                                .then(if (isPortrait) Modifier.aspectRatio(1f) else Modifier)
                         ) {
                             ItemBtn(text = it)
                         }
@@ -88,12 +100,16 @@ fun ItemBtn(text: String) {
             contentAlignment = Alignment.Center
         ) {
             if (text == "D") {
-                Icon(painter = painterResource(R.drawable.ic_backspace), contentDescription = "")
+                Icon(
+                    modifier = Modifier.size(if (isPortrait) 30.dp else 15.dp),
+                    painter = painterResource(R.drawable.ic_backspace),
+                    contentDescription = ""
+                )
                 return@Box
             }
             Text(
                 text = text,
-                fontSize = 30.sp
+                fontSize = if (isPortrait) 30.sp else 15.sp
             )
         }
     }
@@ -108,5 +124,7 @@ fun textClick(viewModel: DateViewModel, text: String) {
         -> viewModel.delete()
         "C"
         -> viewModel.clear()
+        "="
+        -> viewModel.calculate()
     }
 }
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt b/app/src/main/java/com/jyn/composecalculator/ui/TopResultView.kt
@@ -1,8 +1,6 @@
 package com.jyn.composecalculator.ui
 
-import androidx.compose.animation.animateColor
-import androidx.compose.animation.core.*
-import androidx.compose.foundation.background
+import android.content.res.Configuration
 import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.indication
@@ -15,14 +13,12 @@ import androidx.compose.material.FractionalThreshold
 import androidx.compose.material.SwipeableDefaults.resistanceConfig
 import androidx.compose.material.rememberSwipeableState
 import androidx.compose.material.swipeable
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 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.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
@@ -33,7 +29,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.apkfuns.logutils.LogUtils
+import com.jyn.composecalculator.BOTTOM_FRACTION
 import com.jyn.composecalculator.DateViewModel
+import com.jyn.composecalculator.ui.draw.CursorView
 import com.jyn.composecalculator.ui.draw.SlideIndicator
 
 /**
@@ -73,7 +71,7 @@ fun TopResultView() {
                 resistance = resistanceConfig(
                     anchors.keys,
                     10.dp.value,
-                    5f
+                    0f
                 ),
                 velocityThreshold = 60.dp
             ),
@@ -87,7 +85,6 @@ fun TopResultView() {
 
 @Composable
 fun TextBox(process: Float) {
-    val isMax = process >= 100
     val viewModel = viewModel<DateViewModel>()
     Column(
         modifier = Modifier
@@ -120,11 +117,16 @@ fun InputText(input: String) {
     val viewModel = viewModel<DateViewModel>()
 
     val mutableInteractionSource = remember { MutableInteractionSource() }
-    val scrollState = rememberScrollState()
-    val textWidth = remember { mutableStateOf(0) }
+    val inputScrollState = rememberScrollState()
+    val resultScrollState = rememberScrollState()
+    val inputTextWidth = remember { mutableStateOf(0) }
+    val resultTextWidth = remember { mutableStateOf(0) }
 
-    LaunchedEffect(textWidth.value) {
-        scrollState.scrollTo(textWidth.value) //自动滚动到最后一个
+    LaunchedEffect(inputTextWidth.value) {
+        inputScrollState.scrollTo(inputTextWidth.value) //自动滚动到最后一个
+    }
+    LaunchedEffect(inputTextWidth.value) {
+        resultScrollState.scrollTo(resultTextWidth.value) //自动滚动到最后一个
     }
 
     Column(
@@ -135,40 +137,31 @@ fun InputText(input: String) {
             Text(
                 modifier = Modifier
                     .weight(1f)
-                    .horizontalScroll(scrollState)
+                    .horizontalScroll(inputScrollState)
                     .indication( //水波纹效果怎么去除无效呢，bug?
                         indication = null,
                         interactionSource = mutableInteractionSource
                     )
-                    .onSizeChanged { textWidth.value = it.width },
+                    .onSizeChanged { inputTextWidth.value = it.width },
                 text = input,
                 maxLines = 1,
                 fontSize = 50.sp,
                 textAlign = TextAlign.End,
             )
             CursorView()
         }
-    }
-}
 
-/**
- * 光标
- */
-@Preview(showBackground = true)
-@Composable
-fun CursorView() {
-    val infiniteTransition = rememberInfiniteTransition()
-    val float = infiniteTransition.animateFloat(
-        initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable(
-            animation = tween(1000, easing = LinearEasing),
-            repeatMode = RepeatMode.Restart
+        Text(
+            text = viewModel.resultText.value,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(end = 5.dp)
+                .horizontalScroll(inputScrollState)
+                .onSizeChanged { resultTextWidth.value = it.width },
+            maxLines = 1,
+            fontSize = 30.sp,
+            color = Color.Gray,
+            textAlign = TextAlign.End,
         )
-    )
-
-    Spacer(
-        modifier = Modifier
-            .background(if (float.value > 0.5) Color.Red else Color.Transparent)
-            .width(2.dp)
-            .height(50.dp)
-    )
+    }
 }
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/calculate/Calculate.kt b/app/src/main/java/com/jyn/composecalculator/ui/calculate/Calculate.kt
@@ -0,0 +1,5 @@
+package com.jyn.composecalculator.ui.calculate
+
+fun calculateU(input: String): String {
+    return "XXXXX"
+}
diff --git a/app/src/main/java/com/jyn/composecalculator/ui/draw/CursorView.kt b/app/src/main/java/com/jyn/composecalculator/ui/draw/CursorView.kt
@@ -0,0 +1,34 @@
+package com.jyn.composecalculator.ui.draw
+
+import androidx.compose.animation.core.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+/**
+ * 光标
+ */
+@Preview(showBackground = true)
+@Composable
+fun CursorView() {
+    val infiniteTransition = rememberInfiniteTransition()
+    val float = infiniteTransition.animateFloat(
+        initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable(
+            animation = tween(1000, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart
+        )
+    )
+
+    Spacer(
+        modifier = Modifier
+            .background(if (float.value > 0.5) Color.Red else Color.Transparent)
+            .width(2.dp)
+            .height(50.dp)
+    )
+}
