[도토링][AOS] #13 회원가입 화면 구현 - (1) string resource와 font

1. String resource 활용

화면에 들어가는 텍스트 내용들은 모두 String resource에 작성해두어야 한다. String resource를 활용하는 이유는 앱의 글로벌 확장성을 위해서이다.

2. String resource naming convention

string resource의 이름은 어떻게 지을까 고민하다 다음과 같은 레퍼런스를 찾아 해당 네이밍 컨벤션을 따르기로 했다. 레퍼런스는 이곳에서 참조하였다.

3. Font의 적용

도토링에는 NanumSquare 폰트가 적용된다.

폰트를 적용하기 위해서는 우선 FontFamily를 정의해야 한다.
우선 font 파일에 폰트를 넣은 후 ui/theme/Type.kt에서 FontFamily를 다음과 같이 정의한다.

val nanumSquareFamily = FontFamily(
        Font(R.font.nanumsquare_light, FontWeight.Light),
        Font(R.font.nanumsquare_regular, FontWeight.Normal),
        Font(R.font.nanumsquare_bold, FontWeight.Bold),
        Font(R.font.nanumsquare_extrabold, FontWeight.ExtraBold),
        Font(R.font.nanumsquare_ac_light, FontWeight.Light),
        Font(R.font.nanumsquare_ac_regular, FontWeight.Normal),
        Font(R.font.nanumsquare_ac_bold, FontWeight.Bold),
        Font(R.font.nanumsquare_ac_extrabold, FontWeight.ExtraBold))
)

ui/theme/Type.kt에서 정의한 FontFamily를 DotoringTypography의 defaultFontFamily로 설정한다.

val DotoringTypography = Typography(
	defaultFontFamily = nanumSquareFamily
)

Theme의 MaterialTheme의 typography에 DotoringTypography를 인자로 전달한다.

MaterialTheme(
        colors = colors,
        typography = DotoringTypography,
        shapes = Shapes,
        content = content
    )

Text의 style 속성에 자유롭게 적용한다!

Text( 
	text = stringResource(R.string.register_title),
	style = MaterialTheme.typography.body1
)

이렇게 하면 텍스트의 폰트, 사이즈 등을 일일히 적어줄 필요가 없이 style만 적용하면 되어 매우 편리해진다.

여기를 확인하면 typography의 멤버 변수들의 기본 설정값을 확인할 수 있다.

4. String resource styling

도토링의 회원가입 첫화면은 다음과 같이 구성된다. 여기서 각 string의 "멘토"부분에 스타일이 적용된 것을 확인할 수 있다. string에서 특정 단어에만 색상을 적용하려면 어떻게 해야할까?

여기에서 동일한 Text안에 다른 스타일을 적용하는 법을 확인할 수 있다.

Text(
        text = buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("멘토")
            }
            append("로 회원 가입 하기")
        },
        style = MaterialTheme.typography.body1
	)

Text에서 buildAnnotatedString을 이용하면 Composable에서 스타일이 적용된 텍스트를 만들 수 있다.
다만 이 방식을 이용하면 string resource를 이용하기는 어려울 것 같다.

AnnotatedString 소스 코드를 확인하다 위와 같은 addStyle 함수가 있는 것을 확인했다. addStyle은 주어진 범위의 텍스트에 스타일을 적용할 수 있는 함수이다. 이를 이용하면 string resource를 이용하면서 한 string에 여러 스타일을 적용할 수 있다.

다만 문제점은 string resource 파일을 수정하면, addStyle의 start와 end도 함께 수정해야 한다는 것이다.

코드의 유지보수를 쉽게 하기 위해 xml파일만 수정하여 string의 style을 바꿀 수 있도록 하고싶었다. 이 소스를 이용하면 Text Composable이 string resource의 html text를 적용하도록 할 수 있다. Preview에서는 보이지 않고 애뮬레이터를 실행해야만 가능하다.

Reference

1. A successful xml naming convention | Jeroen Mols
2. Text in Compose | Jetpack Compose | Android Developers
3. The type system - Material Design
4. Annotated String | Android Developers
5. ch4rl3x | HtmlText at androidexample.365.com | Github