应用换肤,这真的是一个老生常谈的问题,从原生安卓开始、到后来的 Flutter
,再到现在的 Compose
,虽说老生常谈,但其实还是新瓶装旧酒。
安卓原生的主题切换这里不再说了,这不是本文的重点,况且那个一篇文章估计也说不清😂。
Flutter
的主题切换主要依赖于 provider
状态管理,其实在 Compose
中也差不多,且听完娓娓道来!
GitHub 地址在文章末尾。先来看看实现效果吧:
其实 Compose
虽说换肤实现很简单,但是这也需要在你遵守 Compose
开发规范的前提下,比如定义颜色的时候不使用硬编码,而使用 MaterialTheme
中的颜色,当然还有 Shape
、Typography
等。
Compose
中的主题大家应该都很熟悉了,但应该还有不是很熟悉的,这里先来简单说下吧。
当你创建一个新的 Compose
项目之后,系统会自动帮你创建下面的结构:
可以看到系统一共创建了四个文件,顾名思义,分别为:颜色、形状、主题、类型,本文咱们主要看颜色及主题。
先来看看 Color 文件默认是什么样子的吧:
val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
上面就是 Color 文件中的代码,只是简单定义了四种颜色。
下面再来看看 Theme 文件吧:
private val DarkColorPalette = darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200
)
@Composable
fun PlayAndroidTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
可以看到 Theme 中先是定义了深色和浅色两个颜色,然后通过判断是否为夜间模式来动态适配。
下面来看看 lightColors 方法吧:
fun lightColors(
primary: Color = Color(0xFF6200EE),
primaryVariant: Color = Color(0xFF3700B3),
secondary: Color = Color(0xFF03DAC6),
secondaryVariant: Color = Color(0xFF018786),
background: Color = Color.White,
surface: Color = Color.White,
error: Color = Color(0xFFB00020),
onPrimary: Color = Color.White,
onSecondary: Color = Color.Black,
onBackground: Color = Color.Black,
onSurface: Color = Color.Black,
onError: Color = Color.White
): Colors
通过上面代码可以得知,可以在这里设置每种颜色值,深浅模式都类似,都可以进行设置。
上面简单说了下 Compose
中的主题,那么主题写好之后应该如何进行使用呢?来看代码:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// 使用主题
PlayAndroidTheme {
NavGraph()
}
}
}
没错,就这么简单,只需要在页面外层嵌套下刚才设置的主题即可。现在主题是设置上了,那应该如何使用刚才设置到主题中的那些颜色呢?亦或是别的资源?上代码:
// 颜色使用
MaterialTheme.colors.primary
// 形状使用
MaterialTheme.shapes.large
// 字体类型使用
MaterialTheme.typography.body1
还记得上面所说的需要遵守 Compose
的开发规范吧,所说的其实就是使用这些资源的时候尽量使用咱们定义好的。
首先需要思考如何来进行主题的切换,整个主题肯定使用在项目的开始——启动 Activity 中,但切换主题的页面肯定不在一块,那这个时候应该如何在切换主题页面切换了之后让 Activity 知道呢?
最开始的时候我的想法还是不够 Compose
,我想的是使用广播,在切换主题页面点击之后发送一个广播,然后在 Activity 中进行接收,然后接收到之后刷新。我确实这样做了,功能也确实实现了,但是总感觉哪里不对,感觉 Compose
中不应该这样才对。
中午在食堂吃饭的时候突然想到:Compose
中全部都是以状态驱动 UI 改变的,我直接将主题切换设置成一个状态不得了!
说干就干,首先先来设置下咱们默认的几套主题吧:
// 天蓝色
const val SKY_BLUE_THEME = 0
// 灰色
const val GRAY_THEME = 1
// 深蓝色
const val DEEP_BLUE_THEME = 2
// 绿色
const val GREEN_THEME = 3
// 紫色
const val PURPLE_THEME = 4
// 橘黄色
const val ORANGE_THEME = 5
// 棕色
const val BROWN_THEME = 6
// 红色
const val RED_THEME = 7
// 青色
const val CYAN_THEME = 8
// 品红色
const val MAGENTA_THEME = 9
这里为了之后代码简单点没有使用枚举,其实都差不多的。
然后添加一个主题的状态:
/**
* 主题状态
*/
val themeTypeState: MutableState<Int> by lazy(mode = LazyThreadSafetyMode.SYNCHRONIZED) {
mutableStateOf(getDefaultThemeId())
}
可以看到主题状态中有一个名为 getDefaultThemeId 的方法,用来获取默认主题 ID,来看下吧:
/**
* 获取当前默认主题
*/
fun getDefaultThemeId(): Int = DataStoreUtils.getSyncData(CHANGED_THEME, SKY_BLUE_THEME)
这里使用了 DataStore
来进行数据的存取,DataStore
也是 Jetpack
中的一员,感兴趣的可以看看我之前写的文章:再抱一抱DataStore
然后修改下主题方法:
@Composable
fun PlayAndroidTheme(
themeId: Int = 0,
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
playDarkColors()
} else {
getThemeForThemeId(themeId)
}
MaterialTheme(
colors = colors,
typography = typography,
shapes = Shapes,
content = content
)
}
可以看到上面添加了一个参数 themeId 用来表示当前需要使用的主题 id,getThemeForThemeId 方法用来通过主题 ID 来获取需要的主题颜色集,来看下实现吧:
/**
* 通过主题 ID 来获取需要的主题
*/
private fun getThemeForThemeId(themeId: Int) = when (themeId) {
SKY_BLUE_THEME -> {
playLightColors(
primary = primaryLight
)
}
GRAY_THEME -> {
playLightColors(
primary = gray_theme
)
}
// 别的主题类似,篇幅原因省略
}
接下来修改下 Activity 中的调用吧:
PlayAndroidTheme(themeTypeState.value) {
NavGraph()
}
由于 themeTypeState 是一个 State,所以当它的值改变的时候,就会自动刷新 UI。
先做下准备工作,先来创建一个用来存放主题信息的实体类吧:
data class ThemeModel(val color: Color, val colorId: Int, val colorName: String)
接下来将咱们添加的主题放到一个 List 中:
// 主题model列表
private val themeList = arrayListOf(
ThemeModel(primaryLight, SKY_BLUE_THEME, "天蓝色"),
ThemeModel(gray_theme, GRAY_THEME, "灰色"),
ThemeModel(deep_blue_theme, DEEP_BLUE_THEME, "深蓝色"),
ThemeModel(green_theme, GREEN_THEME, "绿色"),
ThemeModel(purple_theme, PURPLE_THEME, "紫色"),
ThemeModel(orange_theme, ORANGE_THEME, "橘黄色"),
ThemeModel(brown_theme, BROWN_THEME, "棕色"),
ThemeModel(red_theme, RED_THEME, "红色"),
ThemeModel(cyan_theme, CYAN_THEME, "青色"),
ThemeModel(magenta_theme, MAGENTA_THEME, "品红色"),
)
万事具备,只欠东风。现在主题这块已经全部准备好了,只需要再创建一个主题切换的页面,点击的时候保存下来主题 ID 并刷新下 themeTypeState 的值即可。
由上图可以看出这个布局最好使用 LazyVerticalGrid,然后设置下一行放 5 个 item 即可:
LazyVerticalGrid(
cells = GridCells.Fixed(5),
modifier = Modifier.padding(horizontal = 10.dp)
) {
items(themeList) { item: ThemeModel ->
ThemeItem(playTheme, item) {
val playTheme = item.colorId
themeTypeState.value = playTheme
DataStoreUtils.putSyncData(CHANGED_THEME, playTheme)
}
}
}
OK了,结束了,这样就可以了,已经可以实现文章开头 Gif 图的那种效果了。
这么快就到结局了,还有点不舍,哈哈哈。光顾着写实现了,还没放 Github 地址呢,在这里:https://github.com/zhujiang521/PlayAndroid
别忘了切换分支:compose
好了,先写到这里吧,再会!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。