Material Design设计和美化APP应用

发布时间:2023年12月22日

在上一篇博客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
        )

文章来源:https://blog.csdn.net/gzroy/article/details/135088957
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。