[Jetpack Compose] 2. Layouts, theming, and animation(3) #Styling Text

[Jetpack Compose] 2. Layouts, theming, and animation(3) #Styling Text

📌참고자료

• Layouts, theming, and animation | Android Developers

Styling Text

📌참고자료

• Use Downloadable Fonts | Android Developers
• Work with fonts | Android Developers
• FontFamily.Resolver | Andriod Developers

Downloadable Fonts

• Google Fonts

dependencies {
    ...
    implementation "androidx.compose.ui:ui-text-google-fonts:1.6.1"
}

//(1) configure Google Font Provider
val provider = GoogleFont.Provider(
    providerAuthority = "com.google.android.gms.fonts",
    providerPackage = "com.google.android.gms",
    certificates = R.array.com_google_android_gms_fonts_certs
)

//(2) pick your google font -> build your font family 
// can determine a chain of fallbacks for your font in case the font fails to download properly
val fontFamily = FontFamily(
	Font(googleFont = LobsterTwo, fontProvider = provider),
    Font(resId = R.font.my_font_regular), // define default
    Font(googleFont = googleFont, fontProvider = provider, weight = FontWeight.Bold),
    Font(resId = R.font.my_font_regular_bold, weight = FontWeight.Bold) // define default
)

//(3) set yout font famity to your Typography/individual Text composable 
Text(
    fontFamily = fontFamily, text = "Hello World!"
)

• Google Font Provider 생성자 파라미터

  • providerAuthority: The font provider authority for Google Fonts
  • providerPackage: The font provider package to verify the identity of the provider
  • certificates: A list of sets of hashes for the certificates to verify the identity of the provider

• test if google font provider is available & certificates are configured correctly

    val context = LocalContext.current
    LaunchedEffect(Unit) {
        if (provider.isAvailableOnDevice(context)) {
            Log.d(TAG, "Google Font Provider Configuration Success!")
        }
    }

FontFamily.Resolver

• optionally pre-fetch fonts to make sure they are available before first usage

    // pre-load downloadable fonts
    val fontFamilyResolver = LocalFontFamilyResolver.current
    val coroutineScope = rememberCoroutineScope()
    LaunchedEffect(Unit) {
        coroutineScope.launch(Dispatchers.IO) {
            fontFamilyResolver.preload(fontFamily)
        }
    }

• FontFamily.Resolver:
  Main interface for resolving FontFamily into a platform-specific typeface for use in Compose-based applications
• fonts are loaded via calling Resolver.resolve:

fun resolve(
    fontFamily: FontFamily? = null,
    fontWeight: FontWeight = FontWeight.Normal,
    fontStyle: FontStyle = FontStyle.Normal,
    fontSynthesis: FontSynthesis = FontSynthesis.All
): State<Any>

• fonts are pre-loaded via calling Resolver.preload
  • pre-loading is used to avoid text reflow when async fonts load
  • check cache first -> if there is a miss, fetch from the network

suspend fun preload(fontFamily: FontFamily): Unit

Variable Fonts

• Variable Fonts
  • a font format that allows one font file to contain different styles
  • Android O 이상 지원

• not currently supported via downloadable fonts
  -> ttf 형식의 폰트 파일 다운받아 app/res/font 폴더에 저장하여 사용
  (폰트 파일 이름 영어 소문자로만 & 특수문자 불가능)

• standard font axes(ex. weight, height, slant)를 정의하기 위해 FontVariation API 사용

// VariableFontDimension.kt
object DisplayLargeVFConfig {
    const val WEIGHT = 950
    const val WIDTH = 30f
    const val SLANT = -6f
    const val ASCENDER_HEIGHT = 800f
    const val COUNTER_WIDTH = 500
}

// In Typography.kt
val default = FontFamily(
    /*
    * This can be any font that makes sense
    */
    Font(
        R.font.robotoflex_static_regular
    )
)
@OptIn(ExperimentalTextApi::class)
val displayLargeFontFamily = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    FontFamily(
        Font(
            R.font.robotoflex_variable, 
            variationSettings = FontVariation.Settings(
                FontVariation.weight(DisplayLargeVFConfig.WEIGHT),
                FontVariation.width(DisplayLargeVFConfig.WIDTH),
                FontVariation.slant(DisplayLargeVFConfig.SLANT),
            )
        )
    )
} else {
    default
}

• 폰트 자체에 custom axis가 있는 경우 FontVariation.Setting으로 정의

fun counterWidth(counterWidth: Int): FontVariation.Setting {
	// define guardrails for the value
    require(counterWidth in 323..603) { "'Counter width' must be in 323..603" }
    // return font setting
    return FontVariation.Setting("XTRA", counterWidth.toFloat())
}