안드로이드 텍스트뷰 속성 11. [includeFontPadding, letterSpacing, lineSpacingExtra, lineSpacingMultiplier, lines, minLines, maxLines] (Android TextView Attributes 11)

2016. 11. 4. 11:17


1. TextView 속성 (11)

TextView 속성 리스트 및 요약 설명을 확인하시려면 [안드로이드 텍스트뷰 속성] 페이지를 참고하시기 바랍니다.


TextView 속성에 대한 자세한 설명 및 예제를 확인하시려면, 아래 표에서 속성 이름을 클릭하시기 바랍니다.


속성 속성 속성 속성 속성
autoLink autoText breakStrategy bufferType capitalize
cursorVisible digits drawableBottom drawableEnd drawableLeft
drawablePadding drawableRight drawableStart drawableTint drawableTintMode
drawableTop editable editorExtras elegantTextHeight ellipsize
ems fontFamily fontFeatureSettings freezesText gravity
height hint hyphenationFrequency imeActionId imeActionLabel
imeOptions includeFontPadding inputMethod inputType letterSpacing
lineSpacingExtra lineSpacingMultiplier lines linksClickable marqueeRepeatLimit
maxEms maxHeight maxLength maxLines maxWidth
minEms minHeight minLines minWidth numeric
password phoneNumber privateImeOptions scrollHorizontally selectAllOnFocus
shadowColor shadowDx shadowDy shadowRadius singleLine
text textAllCaps textAppearance textColor textColorHighlight
textColorHint textColorLink textIsSelectable textScaleX textSize
textStyle typeface width

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>

includeFontPadding 속성 예제


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 속성의 특이한 점은 속성에 음수(-) 값을 사용할 수 있다는 것입니다. 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>

letterSpacing 속성 예제 2


2.3 TextView의 텍스트 줄 간격 조절하기 (lineSpacingExtra, LineSpacingMultiplier)

TextView 텍스트의 줄 간격을 조절하기 위해서는 "lineSpacingExtra" 또는 "lineSpacingMultiplier" 속성을 사용합니다.

  * android:lineSpacingExtra - 텍스트 줄 간격 조절. (줄 간격에 바로 적용)
        > 텍스트 줄 간격을 "+" 연산으로 계산하여 적용.
        > 치수 단위 값 사용. (sp, px, dp, in, mm 단위 사용 가능)

  * android:lineSpacingMultiplier - 텍스트 줄 간격 조절. (텍스트 높이에서 곱한 값을 줄 간격으로 사용)
        > 텍스트 줄 간격을 "*" 연산으로 계산하여 적용.
        > 소수점 값이 사용. (치수 단위 아님)

두 가지 속성 모두 줄 간격을 조절하는데 사용되지만, 사용 결과는 좀 다릅니다. "lineSpacingExtra"에 지정된 값은 줄 간격 자체를 의미합니다. 즉, "lineSpacingExtra" 값이 바로 줄 간격을 의미하며, 텍스트 높이와 줄 간격을 포함한 높이는 (TEXT_HEIGHT + lineSpacingExtra)로 계산되죠.


반면 "lineSpacingMultiplier"는 줄 간격을 계산하기 위해 텍스트 높이 곱하게 됩니다. 즉, 줄 간격은 (TEXT_HEIGHT * lineSpacingMultiplier-1))이며, 텍스트 높이와 줄 간격을 포함하는 높이는 (TEXT_HEIGHT + (TEXT_HEIGHT*(lineSpacingMultiplier-1)))로 계산됩니다.

    <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>

lineSpacingExtra, lineSpacingMultiplier 속성 예제


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>

lines 속성 예제


위의 예제 실행 결과를 보면, 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 속성 예제


다음 예제는 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" />

minLines 속성 예제 2


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" />

maxLines 속성 예제


마지막으로, 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" />

lines, minLine, maxLines 속성 예제


3. 참고.


ANDROID 프로그래밍/TEXTVIEW