안드로이드 텍스트뷰 속성 14. [textIsSelectable, textScaleX, textStyle, typeface] (Android TextView Attributes 14)

2016. 12. 28. 19:53


1. TextView 속성 (14)

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 TextView의 텍스트 선택 가능하도록 만들기. (textIsSelectable)

기본적으로 TextView를 화면에 배치하면, 표시된 텍스트를 선택할 수 있는 기능이 제공되지 않습니다. 하지만 "textIsSelectable" 속성을 사용하면 TextView의 텍스트가 선택 가능하도록 만들 수 있습니다.

  * android:textIsSelectable - 텍스트 선택 가능 여부 지정.
        > true 또는 false 값 지정 (기본 값 false).
        > EditText에서는 기본 값 true.
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textIsSelectable="true"
        android:text="This is textIsSelectable example." />

위의 예제코드와 같이 textIsSelectable 속성 값을 "true"로 지정한 다음, 화면에 표시된 TextView의 텍스트 영역을 드래그(Drag) 하여 원하는 범위의 텍스트를 선택할 수 있습니다. 만약 하나의 단어만 선택하려면 선택하고자 하는 단어 위에서, 터치를 계속 누르고 있거나, 더블 클릭(연속 두 번 터치)을 수행하면 됩니다.

텍스트뷰 textIsSelectable 속성 예제


일단 텍스트가 선택되고 나면 선택 영역 조절 버튼을 사용하여 텍스트 선택 영역을 문자 단위로 조절할 수 있습니다.

텍스트뷰 텍스트 선택 영역 조절


그리고 TextView의 선택 영역 배경 색상을 변경하려면 textColorHighlight 속성을 사용할 수 있습니다.

  * android:textColorHighlight - TextView의 선택 텍스트 배경 색상 지정.
        > 컬러 값 지정. (#rgb, #argb, #rrggbb, #aarrggbb 등의 형식)

다음은 초록색(#00FF00)으로 선택 영역 배경 색상을 지정한 예제입니다.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textIsSelectable="true"
        android:textColorHighlight="#00FF00"
        android:text="This is textColorHighlight example." />

텍스트뷰 textColorHighlight 속성 예제


2.2 TextView의 텍스트 글자 너비 조절하기. (textScaleX)

TextView의 텍스트 글자 너비를 설정하려면 "textScaleX" 속성을 사용합니다.

  * android:textScaleX - 텍스트 글자 너비 조절(늘리기/줄이기).
        > 소수 점 사용. (예. 1.2)
        > 기본 값 1.0.

textScaleX 속성의 경우, dp 또는 sp 등의 단위가 정해진 값이 아닙니다. 기본으로 표시되는 텍스트 글자 너비(1.0)에 대비한 배율로 적용됩니다.

텍스트뷰 textScaleX 속성 개념


아래 예제는 각각 "기본 값", "0.5", "1.0", "1.5", "2.0" 값을 지정한 예제 입니다.

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is textScaleX example. (default)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textScaleX="0.5"
            android:text="This is textScaleX example. (0.5)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textScaleX="1.0"
            android:text="This is textScaleX example. (1.0)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textScaleX="1.5"
            android:text="This is textScaleX example. (1.5)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textScaleX="2.0"
            android:text="This is textScaleX example. (2.0)" />

    </LinearLayout>

텍스트뷰 textScaleX 속성 예제


2.3 텍스트 스타일(진하게 표시:bold, 기울이기:italic) 설정하기. (textStyle)

TextView의 텍스트에 bold(진하게 표시) 또는 italic(기울이기) 스타일을 지정하려면 "textStyle" 속성을 사용합니다.

  * android:textStyle - 텍스트 스타일(bold, italic) 지정.
        > normal, bold, italic 중 하나 이상의 값을 '|' 기호를 사용하여 조합.
          -. normal (0) : 기본 스타일 사용.
          -. bold (1) : 텍스트를 진하게 표시.
          -. italic (2) : 텍스트를 기울여서 표시.
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="normal"
            android:text="This is textStyle example. (normal)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="italic"
            android:text="This is textStyle example. (italic)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="bold"
            android:text="This is textStyle example. (bold)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textStyle="italic|bold"
            android:text="This is textStyle example. (italic|bold)" />

    </LinearLayout>

텍스트뷰 textStyle 속성 예제


2.4 텍스트 폰트 바꾸기. (typeface)

TextView의 폰트를 바꾸기 위해 "typeface" 속성을 사용합니다.

  * android:typeface - 텍스트 폰트 설정.
        > normal, sans, serif, monospace 중 한 가지 선택.
          -. normal (0).
          -. sans (1).
          -. serif (2).
          -. monospace (3).

안드로이드에는 normal, sans, serif, monospace 라는 폰트를 기본적으로 탑재하고 있기 때문에, 네 가지 중 하나의 값을 typeface 속성에 지정할 수 있습니다.

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:typeface="normal"
            android:text="This is typeface example. (normal)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:typeface="sans"
            android:text="This is typeface example. (sans)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:typeface="serif"
            android:text="This is typeface example. (serif)" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:typeface="monospace"
            android:text="This is typeface example. (monospace)" />

    </LinearLayout>

텍스트뷰 typeface 속성 예제


그런데 [안드로이드 텍스트뷰 속성 8. [fontFamily, fontFeatureSettings]]에서 설명했듯이, TextView의 텍스트 폰트를 변경하기 위한 속성으로 fontFamily라는 속성이 존재합니다. 각 속성에 지정할 수 있는 값의 종류는 다르지만, 분명, 텍스트 폰트를 변경한다는 점에서 typeface와 유사한 기능을 수행하죠.


그럼 typeface와 fontFamily는 어떤 차이가 있는 것일까요?

2.4.1 typeface vs fontFamily

일반적으로, typeface와 fontFamily는 화면에 표시되는 텍스트의 글자체를 의미하는 용어이기 때문에, 혼용되어 사용되는 경우가 많은데요. 뭐, 대부분의 경우에 큰 문제가 없지만, 그 의미를 어느 정도 짚고 넘어갈 필요는 있다고 생각합니다.


먼저, typeface는 글자체가 가지는 가장 도드라진, 그리고 다른 글자체와 명확히 구분되는 특징을 의미합니다. TextView의 typeface 속성에 사용할 수 있는 값에는 "serif", "sans", "monospace"가 있는데, 각각 아래와 같은 특징을 가지고 있죠.


typeface 특징
serif 글자와 기호를 이루는 획의 끝이 돌출된 형태의 글자체.
sans 획의 끝에 돌출된 형태가 없는 글자체.
monospace 한 글자가 차지하는 너비가 일정한 글자체.

serif(세리프)는 텍스트 인쇄 영역에서 "글자와 기호를 이루는 획의 일부 끝이 돌출된 형태"를 가리키는 용어 입니다. 그리고 sans(산스)는 "없음"을 뜻하는 프랑스어에서 유래된 단어인데, serif가 없는 글자체를 의미하죠.
아래의 그림에서 빨간색으로 표시된 영역이 serif(세리프)를 나타냅니다. 즉, 빨간색으로 표시된 영역의 유무에 따라 serif 또는 sans-serif로 구분되는 것이죠. ([https://ko.wikipedia.org/wiki/세리프]에서 인용)

serif(세리프)의 의미



그리고 fontFamily는 (항상 그런 것은 아니지만) 이 typeface 범주 내에서 그 형태가 조금씩 가변된 글자체를 의미합니다. 즉, 글자 선의 굵기, 전체적인 글자의 기울기 등은 조금씩 다르지만, typeface만의 특징은 그대로 유지한 형태를 말하는 것이죠.


아래는 구글에서 제공하는 Roboto 폰트에 속한 폰트 종류를 출력한 그림입니다. Roboto 폰트는 sans(=sans-serif, 획의 끝에 돌출된 형태가 없는 글자체) typeface 에 속하며, 그림의 각 폰트는 fontFamily 속성과 style 속성을 조합하여 표시할 수 있습니다.

구글 Roboto 폰트


2.4.2 typeface와 fontFamily 속성의 우선 순위.

그럼 마지막으로, TextView 텍스트의 폰트를 지정하기 위해 사용되는 typeface 속성과 fontFamily 속성을 같이 동시에 사용하면 어떤 결과가 나올까요?
아래의 예제를 통해 확인해보겠습니다.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:fontFamily="sans-serif"
        android:typeface="serif"
        android:text="typeface = serif,   fontFamily = sans-serif." />


예제의 코드에서는 typeface 속성에 "serif" 값을, fontFamily 속성에 "sans-serif" 값을 지정하여 서로 다른 폰트가 출력되도록 만들었습니다. 하지만 화면에 표시된 결과에는 fontFamily 속성에 지정한 "sans-serif" 폰트가 출력된 것을 확인할 수 있습니다.


즉, typeface 속성과 fontFamily 속성을 동시에 사용하면 fontFamily 속성에 지정한 폰트가 사용됩니다.

3. 참고.


ANDROID 프로그래밍/TEXTVIEW