Android Unit Converter

简介

本文将介绍一个基于 Jetpack Compose 的 Android 应用，该应用能够帮助用户在不同的单位之间进行转换。我们将深入了解该应用的实现细节以及使用的关键组件和概念。

实现界面

首先，让我们创建一个 UnitConverter 组件。该组件将负责显示应用的界面和处理用户输入。

在 UnitConverter 组件中，我们将使用 Column 和 Row 布局来排列组件。在界面的顶部，我们将显示一个标题，用于向用户说明该应用是一个单位转换器。

接下来，我们将添加一个输入框，用于用户输入要转换的值。我们将使用 Jetpack Compose 的 OutlinedTextField 组件实现此输入框，并通过绑定一个变量来跟踪用户输入的值。

在输入框下方，我们将添加两个下拉框。一个用于选择输入单位，另一个用于选择输出单位。我们将使用 Jetpack Compose 的 Button 和 DropdownMenu 组件实现这些下拉框。当用户选择单位时，我们将更新相应的状态，并触发单位转换逻辑。

最后，我们将在界面底部显示转换结果。我们将使用 Jetpack Compose 的 Text 组件来显示转换后的值，并在文本中指明所选择的输入和输出单位。

单位转换逻辑

在 UnitConverter 组件中，我们将定义一些状态变量来跟踪用户输入和选择的单位。每当用户输入值或选择单位时，我们将更新相应的状态变量，并触发单位转换逻辑。

单位转换的逻辑非常简单。我们将获取用户输入的值，并将其乘以输入单位和输出单位之间的转换系数，从而得到转换后的结果。然后，我们将在界面上显示这个结果。

应用展示

代码

完整的代码示例可以在 GitHub 上找到。

package com.samsung.unitconverter

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.material3.Button
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.samsung.unitconverter.ui.theme.UnitConverterTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            UnitConverterTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    UnitConverter()
                }
            }
        }
    }
}

@Composable
fun UnitConverter() {

    var inputValue by remember{ mutableStateOf("1") }
    var outputValue by remember{ mutableStateOf("1") }
    var inputUnit by remember{ mutableStateOf("Meters") }
    var outputUnit by remember{ mutableStateOf("Meters") }
    // DropdownMenu(left input) should be expanded or not expanded
    var iExpanded by remember{ mutableStateOf(false) }
    var oExpanded by remember{ mutableStateOf(false) }
    // 100cm * 0.01 = 1m
    val iConversionFactor = remember{ mutableStateOf(1.0) }
    val oConversionFactor = remember{ mutableStateOf(1.0) }

    fun converUnits() {
        // elvis operator: if value is null or not a number -> 0.0 else value.toDouble()
        val inputValueDouble = inputValue.toDoubleOrNull() ?: 0.0
        val result = inputValueDouble * iConversionFactor.value / oConversionFactor.value
        outputValue = result.toString()
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Unit Converter", style = MaterialTheme.typography.headlineLarge)
        Spacer(modifier = Modifier.height(16.dp))
        OutlinedTextField(
            value = inputValue,
            onValueChange = {
            // it means whatever you type on the TextField
                inputValue = it
                converUnits()
        },
            // description
            label = { Text(text = "Enter Value")})
        Spacer(modifier = Modifier.height(16.dp))

        Row {
            // input box
            Box {
                Button(onClick = { iExpanded = true }) {
                    Text("Select")
                    Icon(Icons.Default.ArrowDropDown,
                        contentDescription = "Arrow Down")
                }
                DropdownMenu(expanded = iExpanded,
                    // 点击下拉菜单外的区域触发
                    onDismissRequest = { iExpanded = false }) {
                    DropdownMenuItem(text = { Text("Centimeters") },
                        onClick = {
                            iExpanded = false
                            inputUnit = "Centimeters"
                            iConversionFactor.value = 0.01
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Meters") },
                        onClick = {
                            iExpanded = false
                            inputUnit = "Meters"
                            iConversionFactor.value = 1.0
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Feets") },
                        onClick = {
                            iExpanded = false
                            inputUnit = "Feets"
                            iConversionFactor.value = 0.3048
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Mil继续：

```kotlin
                    DropdownMenuItem(text = { Text("Milimeters") },
                        onClick = {
                            iExpanded = false
                            inputUnit = "Milimeters"
                            iConversionFactor.value = 0.001
                            converUnits()
                        })
                }

            }
            Spacer(modifier = Modifier.width(16.dp))
            // output box
            Box {
                Button(onClick = { oExpanded = true }) {
                    Text("Select")
                    Icon(Icons.Default.ArrowDropDown,
                        contentDescription = "Arrow Down")
                }
                DropdownMenu(expanded = oExpanded, onDismissRequest = { oExpanded = false }) {
                    DropdownMenuItem(text = { Text("Centimeters") },
                        onClick = {
                            oExpanded = false
                            outputUnit = "Centimeters"
                            oConversionFactor.value = 0.01
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Meters") },
                        onClick = {
                            oExpanded = false
                            outputUnit = "Meters"
                            oConversionFactor.value = 1.0
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Feets") },
                        onClick = {
                            oExpanded = false
                            outputUnit = "Feets"
                            oConversionFactor.value = 0.3048
                            converUnits()
                        })
                    DropdownMenuItem(text = { Text("Milimeters") },
                        onClick = {
                            oExpanded = false
                            outputUnit = "Milimeters"
                            oConversionFactor.value = 0.001
                            converUnits()
                        })
                }
            }
        }
        Spacer(modifier = Modifier.height(16.dp))
        Text("${inputValue} ${inputUnit} = ${outputValue} ${outputUnit}", style = MaterialTheme.typography.headlineMedium)
    }

}

@Preview
@Composable
fun UnitConverterPreview() {
    UnitConverter()
}