요즘 개발하는 앱들은 Custom 폰트들을 적용하는 경우가 많은데요.
Android 개발하면서 매번 폰트를 지정하는 일은 매우 비효율적인 일입니다.
오늘은 Android 의 Jetpack Compose 에서,
Default font를 지정하는 방법에 대해서 정리해 보도록 하겠습니다.
1. Custom 폰트 저장
가장 먼저 default 로 지정할 font 를,
font 폴더에 저장해 주어야 합니다.
먼저, 아래와 같이 New> resource directory를 선택해서 폰트를 넣을 디렉토리를 선택해 주구요.
아래와 같이 폰트디렉토리를 생성하고 나서,
이 곳에 폰트 파일을 복사해 줍니다.
폰트제작사에서는 otf 혹은 ttf 타입의 파일을 제공해주는데요.
보통은 안드로이드 기준으로 otf 파일이 용량이 더 적으면서도, 가독성도 떨어지지 않습니다.
2. FontFamily 함수 작성
아래와 같이 FontFamily 객체를 얻을 수 있는 함수를 fontUtil 같이 특정파일에 작성해 둡니다.
아래에서 "R.font." 다음 부분은 실제 다운로드한 폰트와 매칭시켜주면 됩니다.
fun getTestFontFamily(): FontFamily = FontFamily(
Font(R.font.test_font_regular, FontWeight.Normal),
Font(R.font.test_font_light, FontWeight.Light),
Font(R.font.test_font_bold, FontWeight.Bold),
Font(R.font.test_font_heavy, FontWeight.Bold),
)
다음으로 Typography 객체도 생성해 줍니다.
defaultFontFamily만 넣어주면 됩니다.
val myTypography = Typography(
defaultFontFamily = getTestFontFamily()
)
3. Theme.kt 파일에 적용
이제 위에서 만든 topography 객체를 MaterialTheme()안에 넣어주기만 하면 됩니다.
보통 Theme.kt파일에는 아래와 같이 설정이 되어 있는데요.
@Composable
fun MyAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = myTypography,
shapes = Shapes,
content = content
)
}
이제 Activity 의 setContent 안에 MyAppTheme 이 아래와 같이 적용되어 있는지만 확인해 주면 됩니다.
앱을 개발하면서 초반에 제거하지 않았다면, 대부분 아래와 같이 되어있을 것 입니다.
없다면, 아래와 같이 적용해 주면 되구요.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAppTheme {
// app content
}
}
}
}
앱을 다시 실행해 보면 모든 화면에 지정한 폰트가 적용된 것을 볼 수 있습니다.
'Android Jetpack Compose > Jetpack Compose' 카테고리의 다른 글
DisposableEffect 에서 화면종료 전 리소스 정리 구현 # 구 onDestroy jetpack Compose (0) | 2023.05.13 |
---|---|
LaunchedEffect , Side Effect 그리고 rememberCoroutine 정리 (0) | 2023.05.12 |
BackHandler 에 대한 정리 # 유저가 Back 버튼 누를 때 Jetpack Compose (1) | 2023.05.11 |
Row 와 Column 의 Arrangement 와 Space # Jetpack Compose (0) | 2023.05.02 |
IconButton Ripple Effect 구현 # Jetpack Compose (0) | 2023.04.28 |
TopAppBar 공유하는 방법 정리 # Jetpack Compose (0) | 2023.04.25 |
mutableStateOf 와 MutableStateFlow 비교 총정리 # collectAsState (1) | 2023.04.23 |
Paging Library 구현 방법 총정리 # Android (1) | 2023.04.17 |
collectAsState 로 Flow 타입 데이터 받기 구현 방법 # Jetpack Compose (0) | 2023.04.10 |
Jetpack Compose 화면 하단에 배치하기 (0) | 2023.03.22 |
댓글