안드로이드 텍스트뷰 속성 4. [drawableLeft, drawableTop, drawableRight, drawableBottom, drawableStart, drawableEnd, drawablePadding] (Android TextView Attributes 4)

1. TextView 속성 (4)

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의 텍스트 주변에 이미지 표시하기 (drawableLeft, drawableTop, drawableRight, drawableBottom, drawableStart, drawableEnd, drawablePadding)

UI를 구성함에 있어 화면에 이미지와 텍스트를 나란히 표시하고자 할 때, 일차적으로 ImageView와 TextView를 하나 씩 사용하는 것을 떠올릴 수 있습니다. 이미지는 ImageView에, 텍스트는 TextView에 표시하는 것이죠. 그런데 TextView만으로도 이미지와 텍스트를 한번에 표시할 수 있는 방법이 있습니다.
바로 "drawableLeft", "drawableTop", "drawableRight", "drawableBottom" 속성을 사용하는 것입니다.

  * android:drawableLeft - 텍스트를 기준으로 왼쪽에 이미지 출력.
  * android:drawableTop - 텍스트를 기준으로 위쪽에 이미지 출력.
  * android:drawableRight - 텍스트를 기준으로 오른쪽에 이미지 출력.
  * android:drawableBottom - 텍스트를 기준으로 아래쪽에 이미지 출력.

아래 코드는 drawableLeft, drawableTop, drawableRight, drawableBottom 속성을 사용한 예제입니다

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="drawableLeft"
        android:drawableLeft="@drawable/android_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FF00"
        android:text="drawableTop"
        android:drawableTop="@drawable/android_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        android:textColor="#FFFFFF"
        android:text="drawableRight"
        android:drawableRight="@drawable/android_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFF00"
        android:text="drawableBottom"
        android:drawableBottom="@drawable/android_logo" />

또한 텍스트의 상,하,좌,우가 아닌 텍스트의 시작 또는 끝 부분에 이미지를 추가할 수도 있습니다. 이름 그대로 "drawableStart", "drawableEnd" 속성을 사용합니다.

  * android:drawableStart - 텍스트를 기준으로 시작 위치에 이미지 출력.
        > Android 4.2 (API Level 17)부터 사용 가능.
  * android:drawableEnd - 텍스트를 기준으로 끝 위치에 이미지 출력.
        > Android 4.2 (API Level 17)부터 사용 가능.

다음은 drawableStart, drawableEnd 를 사용한 예제 코드입니다.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF00FF"
        android:text="drawableStart"
        android:drawableStart="@drawable/android_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:text="drawableEnd"
        android:drawableEnd="@drawable/android_logo" />

위의 6가지 속성에 대한 예제코드를 실행한 화면은 아래와 같습니다.

2.1.1 drawableLeft와 drawableStart, drawableRight와 drawableEnd의 차이

그런데 예제 실행 화면을 유심히 보면, drawableLeft와 drawableStart, 그리고 drawableRight와 drawableEnd의 출력 결과가 동일한 것을 확인할 수 있습니다. 동일한 결과가 출력된다는 사실을 바탕으로 속성의 이름과 그 결과를 한번 연관지어 볼까요?

먼저 drawableLeft는 이미지(Drawable)를 왼쪽(Left)에 둔다는 의미입니다. 명백하죠. 그 다음 drawableStart는 이미지(Drawable)를 시작점(Start)에 둔다는 의미입니다. 여기서 시작점(Start)이란 어디를 말하는 것일까요? 우리는 보통 화면의 내용을 확인할 때, 왼쪽부터 오른쪽 방향으로 진행합니다. 즉, 시작점(Start)이란 왼쪽을 의미하는 것입니다. 그렇다면 drawableLeft와 drawableStart가 동일한 결과를 표시하는 것이 의심할 나위없이 당연한 결과인 것입니다.

하지만 만약, 텍스트를 읽을 때 오른쪽에서 시작하여 왼쪽으로 진행하는 국가(또는 언어권)가 있으면 어떻게 될까요? (실제로 아랍권(Arab 160, Aran 161)에서 이러한 방식을 사용하며, 이를 RTL(Right To Left) 언어라고 지칭합니다.) drawableStart의 시작점(Start)의 의미가 오른쪽(Right)으로 바뀌어 버리는 것입니다. drawableRight와 drawableEnd도 같은 결과인 것이죠.

drawableStart와 drawableEnd는 Android 4.2(API Level 17)부터 추가된 속성입니다. 이 때가 바로 안드로이드가 Native RTL을 지원하게 되었기 때문입니다. ("http://android-developers.blogspot.kr/2013/03/native-rtl-support-in-android-42.html"를 참고하세요.)

그렇다면 drawableLeft와 drawableStart(또는 drawableRight와 drawableEnd) 중 어떤 속성을 사용해야 할까요? 일반적인 경우라면 drawableStart를 사용하시길 바랍니다. 우리가 사용하는 LTR(Left To Right) 언어 뿐만 아니라, RTL에 맞게 표시될테니까요. 하지만 만약 RTL 사용 여부와 관계없이 화면 상의 왼쪽에 이미지가 출력되어야 한다면 drawableLeft를 사용하셔야 합니다. 마지막으로 API Level 17 이전 버전 호환을 위해서는 drawableLeft만 사용할 수 있습니다. drawableStart는 지원되지 않기 때문입니다.

drawableStart와 drawableEnd가 RTL 언어 설정에서 어떻게 표시되는지 확인하기 위해서 아래와 같은 절차를 실행해보시기 바랍니다.

시스템 언어 설정 변경을 위해 [설정]-[언어 및 키보드]-[언어] 메뉴를 선택합니다. 그 다음 RTL 언어 중 하나인 "(XB) xxx"를 선택합니다.

위에서 작성한 예제 화면이 다음과 같이 출력됩니다. 즉, drawableLeft 속성의 경우에는 언어 설정(RTL)과 관계없이 이미지가 왼쪽에 표시되고, drawableStart 속성을 사용한 경우에는 언어 설정(RTL)에 따라 이미지가 오른쪽에 표시되는 것을 확인할 수 있습니다.

언어 설정을 다시 "한국어"로 변경하지 못해서 헤매고 계신가요? 아래 그림을 참고하세요.

2.1.2 drawablePadding 속성을 사용하여 이미지와 텍스트의 간격 조절.

마지막으로, 출력되는 이미지와 텍스트 사이의 간격은 "drawablePadding" 속성을 사용하여 조절합니다.

  * android:drawablePadding - 텍스트와 이미지 사이의 간격 설정.
        > 치수 단위 값 사용. (sp, px, dp, in, mm 단위 사용 가능)

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CCCCCC"
        android:text="drawablePadding - 0dp"
        android:drawableLeft="@drawable/android_logo"
        android:drawablePadding="0dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#888888"
        android:text="drawablePadding - 50dp"
        android:drawableLeft="@drawable/android_logo"
        android:drawablePadding="50dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CCCCCC"
        android:text="drawablePadding - 0dp"
        android:drawableTop="@drawable/android_logo"
        android:drawablePadding="0dp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#888888"
        android:text="drawablePadding - 30dp"
        android:drawableTop="@drawable/android_logo"
        android:drawablePadding="30dp" />

2.1.3 두 가지 이상의 drawableXxx 속성 같이 사용하기

하나의 TextView 위젯에 반드시 하나의 drawableXxx 속성만을 사용할 수 있는 것은 아닙니다. 두 가지 이상의 속성을 조합하여 텍스트 주변에 이미지를 출력할 수 있습니다. 단, drawableLeft와 drawableRight, drawableStart와 drawableEnd는 버전에 따라 적용 여부가 결정되기 때문에, 서로 섞어쓰지 않는 것이 좋습니다. (예, Left+End 또는 Start+Right 조합) 하지만, drawableStart, drawableEnd를 drawableTop 또는 drawableBottom과 같이 사용하는 것은 문제없습니다.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        android:textColor="#FFFFFF"
        android:text="drawableXxx"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTop="@drawable/android_logo"
        android:drawableRight="@drawable/android_logo"
        android:drawableBottom="@drawable/android_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        android:textColor="#FFFFFF"
        android:text="drawableXxx"
        android:drawableStart="@drawable/android_logo"
        android:drawableEnd="@drawable/android_logo" />

3. 참고.

• 안드로이드 텍스트뷰 속성 개요
  • [안드로이드 텍스트뷰 속성] 내용을 참고하세요.
• TextView 속성에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 TextView 항목] 내용을 참고하세요.
• R.attr에 대한 도움말.
  • [안드로이드 개발 참조문서. R.attr 항목]의 내용을 참고하세요.