android 如何在Jetpack Compose中以编程方式更改字体家族?

zfycwa2u  于 2023-06-04  发布在  Android
关注(0)|答案(2)|浏览(222)

我正在构建一个Android应用程序,我想在设置中添加一个选项,供用户选择他想要使用应用程序自定义字体系列或仅使用dafault系统字体系列,也许还可以选择其他字体。在compose中是否有选项可以做到这一点?

dy2hfwbg

dy2hfwbg1#

我可以通过使用defaultFontFamily参数来做到这一点,向MyAppTheme Composable添加一个额外的参数,并将typography对象传递给MaterialTheme()构造函数,而不是默认的构造函数,如下面的代码所示:

fun getTypography(fontFamily: FontFamily) = Typography(
    defaultFontFamily = fontFamily
)

Theme.kt中:

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Added fontFamily param
    fontFamily: FontFamily = Rubik,
    content: @Composable () -> Unit) {

    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    val typography = getTypography(fontFamily)

    MaterialTheme(
        colors = colors,
        typography = typography,
        shapes = Shapes,
        content = content
    )
}
hkmswyz6

hkmswyz62#

对于材料3(材料设计3):
注意:与M2 Typography类不同,M3 Typography类当前不包含defaultFontFamily参数。您需要在每个单独的TextStyles中使用fontFamily参数。(资料来源)
因此,下面是在M3中设置默认字体系列的示例:

// Type.kt

import androidx.compose.material3.Typography
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import com.example.exampleapp.R

// Declare the font families
object AppFont {
    val TitilliumWeb = FontFamily(
        Font(R.font.titillium_web_regular),
        Font(R.font.titillium_web_italic, style = FontStyle.Italic),
        Font(R.font.titillium_web_medium, FontWeight.Medium),
        Font(R.font.titillium_web_medium_italic, FontWeight.Medium, style = FontStyle.Italic),
        Font(R.font.titillium_web_bold, FontWeight.Bold),
        Font(R.font.titillium_web_bold_italic, FontWeight.Bold, style = FontStyle.Italic)
    )
}

private val defaultTypography = Typography()
val Typography = Typography(
    displayLarge = defaultTypography.displayLarge.copy(fontFamily = AppFont.TitilliumWeb),
    displayMedium = defaultTypography.displayMedium.copy(fontFamily = AppFont.TitilliumWeb),
    displaySmall = defaultTypography.displaySmall.copy(fontFamily = AppFont.TitilliumWeb),

    headlineLarge = defaultTypography.headlineLarge.copy(fontFamily = AppFont.TitilliumWeb),
    headlineMedium = defaultTypography.headlineMedium.copy(fontFamily = AppFont.TitilliumWeb),
    headlineSmall = defaultTypography.headlineSmall.copy(fontFamily = AppFont.TitilliumWeb),

    titleLarge = defaultTypography.titleLarge.copy(fontFamily = AppFont.TitilliumWeb),
    titleMedium = defaultTypography.titleMedium.copy(fontFamily = AppFont.TitilliumWeb),
    titleSmall = defaultTypography.titleSmall.copy(fontFamily = AppFont.TitilliumWeb),

    bodyLarge = defaultTypography.bodyLarge.copy(fontFamily = AppFont.TitilliumWeb),
    bodyMedium = defaultTypography.bodyMedium.copy(fontFamily = AppFont.TitilliumWeb),
    bodySmall = defaultTypography.bodySmall.copy(fontFamily = AppFont.TitilliumWeb),

    labelLarge = defaultTypography.labelLarge.copy(fontFamily = AppFont.TitilliumWeb),
    labelMedium = defaultTypography.labelMedium.copy(fontFamily = AppFont.TitilliumWeb),
    labelSmall = defaultTypography.labelSmall.copy(fontFamily = AppFont.TitilliumWeb)
)
// Theme.kt

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable

@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        typography = Typography,
        content = content
    )
}

单个组件的示例:

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import com.example.exampleapp.theme.AppFont

@Composable
fun ExampleScreen() {
    Text(
        text = "Hello World!", 
        fontFamily = AppFont.TitilliumWeb
    )
}

相关问题