Material Design设计和美化APP应用

在上一篇博客Jetpack Compose开发一个Android WiFi导航应用-CSDN博客中，我用Jetpack compose开发了一个安卓应用，实现了对Wifi信号的测量。Jetpack compose提供了Material Design的实现，这是一个用于创建数字化界面的综合设计系统。我们可以用Material Design来进行主题设计，包括了配色，排版，字体等方面，使得我们的应用更加的美观和对用户更加友好。

首先我们先设计一下整个APP的配色方案，好的配色可以使APP各个页面的效果保持统一，让用户界面更加友好。Material Design提供了一个theme builder的在线工具，可以很方便的帮我们设计配色方案。打开网站Material Design，设置一个Primary Color，例如我输入#825500作为主色，工具会自动根据主色调来生成其他的配色。然后点击右上角的Export，选择Jetpack compose格式，这样我们就可以获取到设计好的theme.kt和color.kt文件。把这两个文件的内容拷贝替换我们APP的ui.theme目录下的对应文件，注意的是package那么要做相应改动和我们APP的package保持一致。

以下是根据#825500主色生成的两个主题的配色，我们可以根据系统当前的时间来切换不同的主题，例如晚上采用Dark Scheme。

在Theme.kt文件里面，可以定义切换theme

@Composable
fun WifiPositionTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (!useDarkTheme) {
        LightColors
    } else {
        DarkColors
    }

    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

在MainActivity的setConent里面，要在主题下面应用Surface，例如以下代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            WifiPositionTheme {
                // A surface container using the 'background' color from the theme
                Surface(tonalElevation = 5.dp, modifier = Modifier.fillMaxHeight()) {
                    AppNavHost()
                }
            }
        }
    }
}

之后我们在component里面可以设置color为MaterialTheme.colorScheme.primary或者secondary等等，字体风格可以设置为MaterialTheme.typography的bodyLarge, displayLarge。例如以下代码设置Text这个component

        Text(
            text = stringResource(id = R.string.report_result)+": ",
            style = MaterialTheme.typography.bodyLarge,
            color = MaterialTheme.colorScheme.secondary
        )