안드로이드 텍스트뷰 속성 11. [includeFontPadding, letterSpacing, lineSpacingExtra, lineSpacingMultiplier, lines, minLines, maxLines] (Android TextView Attributes 11)
1. TextView 속성 (11)
TextView 속성 리스트 및 요약 설명을 확인하시려면 [안드로이드 텍스트뷰 속성] 페이지를 참고하시기 바랍니다.
TextView 속성에 대한 자세한 설명 및 예제를 확인하시려면, 아래 표에서 속성 이름을 클릭하시기 바랍니다.
2. TextView 속성 활용
2.1 텍스트 폰트 위/아래 padding 없애기. (includeFontPadding)
TextView에 텍스트가 표시될 때 텍스트의 상단에 폰트 자체의 ascent, descent 영역 보다 좀 더 충분한 padding을 추가할지, 아니면 정확하게 ascent, descent 영역만을 사용할지 여부를 지정할 수 있습니다. 이 때 "includeFontPadding" 속성을 사용합니다.
* android:includeFontPadding - Font 위/아래 padding 추가 여부
> true 또는 false 값 지정 (기본 값 true).
음, 그런데 폰트의 ascent, descent 영역이 무엇을 의미하는지 모르는 분들이 있을 것 같습니다. 그럼 먼저, 영어 문자가 폰트 내에서 어떤 구조로 구성되어 있는지 살펴볼 필요가 있는데, 이러한 폰트 구조를 폰트 메트릭스(Font Metrics)라고 합니다.
안드로이드에서 텍스트가 그려질 때의 폰트 메트릭스는 다음과 같이 표현될 수 있습니다.
폰트 메트릭스의 각 요소들에 대한 의미는 다음과 같습니다.
요소 | 의미 |
---|---|
ascent | baseline에서 위쪽 방향으로 글자까지의 권장 거리. |
baseline | 폰트 글자의 기준이 되는 라인. |
bottom | baseline에서 아래쪽 방향으로 가장 낮은 문자를 위한 최대 거리. |
descent | baseline에서 아래쪽 방향으로 글자까지의 권장 거리. |
leading | 텍스트 줄 사이에 들어가는 추가적인 공간. |
top | baseline에서 위쪽 방향으로 가장 높은 문자를 위한 최대 거리. |
폰트 메트릭스(Font Metrics)에 대한 그림을 보면, 실질적으로 텍스트가 그려지는 ascent와 descent 보다 좀 더 위/아래로 top, bottom이 존재하고, 그 사이에 여백이 존재하는 것을 확인할 수 있습니다. (이 공간은 아마도 텍스트가 여러 라인에 걸쳐 그려졌을 때의 폰트 가독성을 높이기 위한 정책이라고 판단됩니다.)
includeFontPadding 속성은 텍스트가 출력될 때 ascent와 descent를 폰트 메트릭스의 ascent와 descent에 정확히 맞출 것인지, 조금 더 여백을 추가할 것인지를 결정하는 속성입니다. 즉, includeFontPadding 속성을 false로 지정하면 폰트 메트릭스의 ascent, descent에 정확히 맞춰서 출력하고, true(기본 값)로 지정하면 ascent와 descent에 여백을 조금 더 추가한 텍스트를 출력하는 것입니다.
결과적으로 includeFontPadding 속성을 true로 지정하면 텍스트 위/아래로 padding이 추가되는 효과를 볼 수 있게 됩니다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:textColor="#FFFFFF"
android:textSize="32sp"
android:text="DEFAULT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FF00"
android:textSize="32sp"
android:includeFontPadding="false"
android:text="FALSE" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000FF"
android:textColor="#FFFFFF"
android:textSize="32sp"
android:includeFontPadding="true"
android:text="TRUE" />
</LinearLayout>
2.2 TextView의 텍스트 글자 간격 (letterSpacing)
TextView에 표시되는 텍스트의 글자 간격을 조절하기 위해서 "letterSpacing" 속성을 사용합니다.
* android:letterSpacing - 글자 간격 조절.
> 소수점 값이 사용되어야 함. (예. "1.2")
> 기본 값은 "0.0".
> API Level 21 부터 사용 가능.
letterSpacing에 값을 지정할 때, dp 또는 sp 등의 치수 단위를 사용하면 안됩니다. letterSpacing의 실질적인 단위는 "EM"이며, 어떠한 치수 단위도 사용되지 않은 소수점 값만 사용될 수 있습니다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:letterSpacing="1.0"
android:text="TEXT2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:letterSpacing="2.0"
android:text="TEXT3" />
</LinearLayout>
letterSpacing 속성의 특이한 점은 속성에 음수(-) 값을 사용할 수 있다는 것입니다. letterSpacing 속성에 음수(-) 값을 사용하면 글자 간격을 좁힐 수 있으며, 글자를 중첩되게 만들 수도 있습니다. 하지만 너무 큰 값을 지정하면 글자가 화면에서 사라질 수 있으므로 적절한 값을 지정해야 합니다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="TEXT1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:letterSpacing="-0.2"
android:text="TEXT2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:letterSpacing="-1.0"
android:text="TEXT3" />
</LinearLayout>
2.3 TextView의 텍스트 줄 간격 조절하기 (lineSpacingExtra, LineSpacingMultiplier)
TextView 텍스트의 줄 간격을 조절하기 위해서는 "lineSpacingExtra" 또는 "lineSpacingMultiplier" 속성을 사용합니다.
* android:lineSpacingExtra - 텍스트 줄 간격 조절. (줄 간격에 바로 적용)
> 텍스트 줄 간격을 "+" 연산으로 계산하여 적용.
> 치수 단위 값 사용. (sp, px, dp, in, mm 단위 사용 가능)
* android:lineSpacingMultiplier - 텍스트 줄 간격 조절. (텍스트 높이에서 곱한 값을 줄 간격으로 사용)
> 텍스트 줄 간격을 "*" 연산으로 계산하여 적용.
> 소수점 값이 사용. (치수 단위 아님)
두 가지 속성 모두 줄 간격을 조절하는데 사용되지만, 사용 결과는 좀 다릅니다. "lineSpacingExtra"에 지정된 값은 줄 간격 자체를 의미합니다. 즉, "lineSpacingExtra" 값이 바로 줄 간격을 의미하며, 텍스트 높이와 줄 간격을 포함한 높이는 (TEXT_HEIGHT + lineSpacingExtra)로 계산되죠.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#DDDDDD"
android:textSize="24sp"
android:text="LINE1 \nLINE2 default" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:lineSpacingExtra="12sp"
android:text="LINE1 \nLINE2 lineSpacingExtra=12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FF00"
android:textSize="24sp"
android:lineSpacingExtra="24sp"
android:text="LINE1 \nLINE2 lineSpacingExtra=24sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0000FF"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:lineSpacingMultiplier="2.0"
android:text="LINE1 \nLINE2 lineSpacingMultiplier=2.0" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00FF"
android:textSize="24sp"
android:lineSpacingMultiplier="3.0"
android:text="LINE1 \nLINE2 lineSpacingMultiplier=3.0" />
</LinearLayout>
TextView 텍스트의 줄 간격 지정을 위해 어떤 속성을 사용할 것인지는 개발자가 결정할 문제이지만, "lineSpacingMultiplier" 속성을 사용할 것을 권장합니다. TextView 텍스트의 글자 크기를 기준으로 줄 간격이 조절되기 때문에 다양한 크기의 화면에서도 충분한 가독성을 유지할 수 있기 때문입니다.
2.4 TextView의 높이를 텍스트 줄 단위로 설정하기. (lines, minLines, maxLines)
TextView가 화면에 표시되는 높이를 설정하는 방법은 View에서 상속받은 "layout_height" 속성을 사용하는 방법이 있습니다. 그런데 "layout_height" 속성은 치수(dimension)단위로 높이를 지정하므로, TextView의 텍스트가 TextView 경계에 일치하지 않으면 내용이 잘려서 출력될 수 있습니다. 이 때 "lines" 속성을 사용하면 현재 TextView의 줄 단위로 높이를 정확하게 설정하기 때문에 텍스트 잘림 문제를 방지할 수 있습니다.
* android:lines - 정확히 텍스트 줄 단위로 TextView 높이 설정.
> 정수 값 사용. (예. 100)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:lines="4"
android:text="LINE1 \nLINE2 \nLINE3 \nLINE4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00FF00"
android:textSize="24sp"
android:lines="2"
android:text="LINE1 \nLINE2 \nLINE3 \nLINE4" />
</LinearLayout>
위의 예제 실행 결과를 보면, TextView가 표시하는 텍스트와 관계없이 lines에 지정한 값만큼 TextView의 높이가 결정되는 것을 확인할 수 있습니다.
TextView의 최소, 최대 높이를 줄(line)단위로 지정하기 위해서는 "minLines", "maxLines" 속성을 사용합니다.
* android:minLines - TextView의 줄(line) 단위 최소 높이 지정.
> 정수 값 사용. (예. 100)
* android:maxLines - TextView의 줄(line) 단위 최대 높이 지정.
> 정수 값 사용. (예. 100)
아래와 같이 텍스트가 한 줄(line)인 TextView일지라도 minLines가 3인 경우, 3줄(line)의 높이로 표시됩니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#00FF00"
android:minLines="3"
android:text="TEXT1" />
다음 예제는 minLines 값이 3이라도 텍스트가 4줄(line)이기 때문에 4줄(line)의 높이로 표시되는 것을 보여줍니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#00FF00"
android:minLines="3"
android:text="TEXT1 \nTEXT2 \nTEXT3 \nTEXT4" />
maxLines는 TextView의 최대 표시 줄(line)을 표시하기 때문에, 아래 예제와 같이 실제 텍스트가 4줄(line)이더라도 maxLines값이 3이면 TextView는 3줄(line)의 크기로 표시됩니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#00FF00"
android:maxLines="3"
android:text="TEXT1 \nTEXT2 \nTEXT3 \nTEXT4" />
마지막으로, minLines 또는 maxLines 속성보다 lines 속성이 우선순위가 높으므로, lines 속성이 사용된 TextView에서는 minLines와 maxLines 값이 무시됩니다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#00FF00"
android:lines="2"
android:minLines="1"
android:maxLines="3"
android:text="TEXT1 \nTEXT2 \nTEXT3 \nTEXT4" />
3. 참고.
- 안드로이드 텍스트뷰 속성 개요
- [안드로이드 텍스트뷰 속성] 내용을 참고하세요.
- TextView 속성에 대한 자세한 도움말.
- [안드로이드 개발 참조문서 TextView 항목] 내용을 참고하세요.
- R.attr에 대한 도움말.
- [안드로이드 개발 참조문서. R.attr 항목]의 내용을 참고하세요.
- 안드로이드 FontMetrics에 대한 자세한 도움말.
- [안드로이드 개발 참조문서 Paint.FontMetrics 항목] 내용을 참고하세요.