玩轉(zhuǎn)Jetpack Compose主題：讓你的APP變身時(shí)尚達(dá)人
作者：Reathin
主題系統(tǒng)是構(gòu)建統(tǒng)一視覺語言的基礎(chǔ)設(shè)施，建議從項(xiàng)目初期就建立規(guī)范。可以先從基礎(chǔ)配色開始，逐步完善文字和形狀系統(tǒng)，最終形成完整的設(shè)計(jì)體系。
主題的魔法衣櫥
什么是主題？
主題就像APP的穿搭指南，包含：
? ?? 顏色搭配（Color Palette）
? ?? 字體排版（Typography）
? ?? 形狀設(shè)計(jì)（Shapes）
Android Studio貼心地為你準(zhǔn)備了主題三件套：
圖片
主題變身咒語
看這段自動生成的代碼，像不像哈利波特的魔法咒語？
@Composable
fun SampleAndroidTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
// ?? 主題模式切換器
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
MaterialTheme(
colorScheme = colorScheme,// 顏色搭配
typography = Typography,// 字體庫
shapes = MaterialTheme.shapes,//形狀大全
content = content
)
}調(diào)色大師速成班
官方配色方案
Material Design貼心地準(zhǔn)備了顏色全家桶
// ?? 基礎(chǔ)色套餐
private val LightColorScheme = lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
onSecondary = Color.White,
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
)
圖片
DIY專屬配色
想加點(diǎn)特別顏色？試試自定義色卡
// ?? 彩虹獨(dú)角獸配色
val RainbowColors = lightColorScheme(
primary = Color(0xFFFF6B6B), // 珊瑚粉
secondary = Color(0xFF4ECDC4), // 薄荷綠
background = Color(0xFFFFF5E1) // 香草奶油
)
// ?? 使用方式
MaterialTheme(
colorScheme = RainbowColors,
typography = Typography,
shapes = MaterialTheme.shapes,
content = content
)
圖片
文字排版變變變
官方字體套餐
Compose自帶專業(yè)排版配置
val Typography = Typography(
h1 = TextStyle( // 超大標(biāo)題
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.Bold,
fontSize = 24.sp
),
body1 = TextStyle( // 正文
fontFamily = FontFamily.Default,
fontSize = 16.sp
),
button = TextStyle( // 按鈕文字
fontWeight = FontWeight.W500,
fontSize = 14.sp
)
)自定義字體秘籍
想用特殊字體？三步搞定：
1. 把字體文件(.ttf)放在 res/font 文件夾
2. 創(chuàng)建字體對象：
val ComicFont = FontFamily(
Font(R.font.comic_neue_regular),
Font(R.font.comic_neue_bold, weight = FontWeight.Bold)
)3. 使用自定義字體：
Text(
text = "我是萌萌噠阿里媽媽豎黑體字體",
style = TextStyle(fontFamily = ComicFont)
)
圖片
形狀改造計(jì)劃
官方形狀大全
Compose提供三種預(yù)設(shè)形狀：
Shapes(
small = RoundedCornerShape(4.dp), // 小圓角（藥丸形狀）
medium = RoundedCornerShape(8.dp), // 中圓角（卡片邊角）
large = RoundedCornerShape(0.dp) // 直角（復(fù)古風(fēng)格）
)腦洞形狀實(shí)驗(yàn)室
試試這些炫酷形狀：
// ?? 蘑菇按鈕
Button(
onClick = { },
modifier = Modifier.size(100.dp),
shape = CircleShape,
colors = ButtonDefaults.buttonColors(containerColor = Color.Red)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Box(
modifier = Modifier
.size(60.dp, 30.dp)
.background(
color = Color.White,
shape = RoundedCornerShape(50)
)
)
Spacer(modifier = Modifier.height(4.dp))
Text("采蘑菇", color = Color.White)
}
}
// ?? 六邊形頭像
Image(
painter = painterResource(R.drawable.img),
contentDescription = null,
modifier = Modifier.clip(PolygonShape(sides = 6)) // 六邊形裁剪
)
圖片
主題系統(tǒng)核心要點(diǎn)總結(jié)
主題三板斧
1. 顏色體系
? 使用MaterialTheme.colors統(tǒng)一管理配色方案
? 支持亮/暗模式自動切換
? 通過擴(kuò)展屬性添加自定義顏色
2. 文字排版
? 預(yù)定義h1-h6等標(biāo)題樣式
? 通過Typography類管理字體規(guī)范
? 支持加載自定義字體文件
3. 形狀系統(tǒng)
? 提供small/medium/large三級圓角配置
? 支持創(chuàng)建異形組件（圓角/切角/多邊形等）
? 通過Modifier.clip()實(shí)現(xiàn)形狀裁剪
最佳實(shí)踐建議
1. 命名規(guī)范
// 好的命名示例
val Colors.success = Color.Green
val Typography.cardTitle = TextStyle(...)
val Shapes.chatBubble = RoundedCornerShape(8.dp)2. 主題繼承
// 創(chuàng)建子主題
@Composable
fun DashboardTheme(content: @Composable () -> Unit) {
MaterialTheme(
colors = MaterialTheme.colors.copy(primary = Blue200),
content = content
)
}3. 響應(yīng)式適配
// 根據(jù)屏幕尺寸調(diào)整字體
val typography = Typography(
h1 = TextStyle(fontSize = if (isMobile) 24.sp else 32.sp)
)主題系統(tǒng)是構(gòu)建統(tǒng)一視覺語言的基礎(chǔ)設(shè)施，建議從項(xiàng)目初期就建立規(guī)范。可以先從基礎(chǔ)配色開始，逐步完善文字和形狀系統(tǒng)，最終形成完整的設(shè)計(jì)體系。
源碼https://github.com/Reathin/Sample-Android/tree/master/module_compose_theme
責(zé)任編輯：武曉燕
來源：
沐雨花飛碟
