안드로이드 텍스트뷰 속성 5. [drawableTint, drawableTintMode] (Android TextView Attributes 5)

1. TextView 속성 (5)

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의 이미지(Drawable)에 색 입히기. (drawableTint, drawableTintMode)

주로 텍스트를 표시하기 위한 용도로 사용되는 TextView지만, drawableXXX(drawableLeft, drawableTop, ...) 등의 속성을 사용하여 텍스트의 주변에 이미지(Drawable)를 표시할 수 있습니다. (텍스트의 주변에 이미지를 표시하는 방법은 [TextView의 텍스트 주변에 이미지 표시하기]에서 확인할 수 있습니다.)

또한 TextView는 단순히 이미지(Drawable)를 출력하는 것에 그치지 않고, 이미지(Drawable)에 색을 입힐 수 있는 기능도 제공합니다. 이미지(Drawable)에 색을 입히는 방법은 "drawableTint" 속성을 사용하는 것입니다.

  * android:drawableTint - 이미지(Drawable)를 칠하기 위한 색조(Tint) 지정.
        > 컬러 값 지정. (#rgb, #argb, #rrggbb, #aarrggbb 등의 형식)
        > Android 6.0 (API Level 23)부터 사용 가능.

아래는 흰색으로 칠해진 안드로이드 로고 이미지(배경은 투명)에 초록색(#00FF00)과 빨간색(#FF0000)을 칠하는 예제입니다.

안드로이드 로고 이미지

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT1"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTint="#00FF00"/>

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

drawableTint 사용 예

위의 예제 결과를 통해 유추할 수 있듯이, drawableTint 속성을 사용한 이미지(Drawable) 색상 입히기는, 똑같은 형태의 이미지(Drawable)를 사용하되 색상에 따라 다른 상태를 나타내는 기능이 필요한 곳에서 매우 유용하게 사용될 수 있습니다. 즉, 기준이 되는 이미지는 하나만 만들어 둔 다음, 상태를 달리 표시하고자 할 때, drawableTint 속성을 사용하여 이미지(Drawable)가 표시되는 색을 바꿔 칠하는 것이죠.

그런데 만약, drawableTint 속성을 사용하지 않으면? 각 상태에 따른 이미지 파일을, 표시하고자 하는 상태의 수만큼 준비해야겠죠.

drawableTint 속성 활용

그리고 TextView의 이미지(Drawable)에 색을 입힐 때, 이미지와 색조(tint)가 어떤 방식으로 섞여서 표시될 것인지를 뜻하는 혼합(blending) 모드를 지정할 수 있습니다. 이미지(Drawable)와 색조(tint)의 혼합(blending) 모드는 "drawableTintMode" 속성을 사용하여 지정합니다.

  * android:drawableTintMode - 이미지(Drawable)와 색조(tint)의 혼합(blending) 모드.
        > src_over, src_in, src_atop, multiply, screen, add 중 선택. (기본 값 src_in)
          -. src_over (3)  : 색조(tint)가 이미지(Drawable) 위에 그려짐.
          -. src_in (5)    : 색조(tint)가 이미지(Drawable)의 투명도(alpha)에 마스킹됨.
                             이미지(Drawable)의 색상(color)은 사용되지 않음.
          -. src_atop (9)  : 색조(tint)가 이미지
          -. multiply (14) : 색조(tint)와 이미지(Drawable)의 투명도(alpha) 및 색상(color)을 곱함.
          -. screen (15)   : multiply와 반대로 동작.
          -. add (16)      : 색조(tint)와 이미지(Drawable)의 투명도(alpha) 및 색상(color)을 더함.
        > Android 6.0 (API Level 23)부터 사용 가능.

drawableTintMode 속성 값의 표시 결과를 확인하기에 앞서, 이미지(Drawable)와 색조(tint)의 혼합(blending) 공식에 사용되는 요소들의 설명은 아래와 같습니다.

Da (Dst alpha) : 이미지(Drawable)의 투명도 값. 0.0~1.0.
Sa (Src alpha) : 색조(tint)의 투명도 값. 0.0~1.0.
Dc (Dst color) : 이미지(Drawable)의 색상 값. 0.0~1.0.
Sc (Src color) : 색조(tint)의 색상 값. 0.0~1.0.
각 요소의 값 0.0~1.0의 실질적인 범위는 0~255(0x00~0xFF).
공식을 나타내는 괄호 안의 내용은 [alpha, color].

또한 drawableTintMode 속성 적용 결과 확인을 위해 사용되는 이미지 및 소스 코드는 아래와 같습니다.

drawableTintMode 예제를 위한 로고 이미지

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="ms_logo, src_over, FF0000"
        android:drawableLeft="@drawable/ms_logo"
        android:drawableTint="#FF0000"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="ms_logo, src_over, 40FF0000"
        android:drawableLeft="@drawable/ms_logo"
        android:drawableTint="#40FF0000"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="ms_logo, src_over, 808080"
        android:drawableLeft="@drawable/ms_logo"
        android:drawableTint="#808080"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="ms_logo, src_over, 40808080"
        android:drawableLeft="@drawable/ms_logo"
        android:drawableTint="#40808080"
        android:drawableTintMode=""/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="android_logo, src_over, FF0000"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTint="#FF0000"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="android_logo, src_over, 40FF0000"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTint="#40FF0000"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="android_logo, src_over, 808080"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTint="#808080"
        android:drawableTintMode=""/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="android_logo, src_over, 40808080"
        android:drawableLeft="@drawable/android_logo"
        android:drawableTint="#40808080"
        android:drawableTintMode=""/>

2.1.1 src_over

"src_over"를 지정하면, 색조(tint)가 이미지(Drawable)의 위에 그려집니다. 의미 그대로 Src(색조)가 위(over)에 그려지는 것이죠. 즉, 이미지(Drawable)위에 색조(tint) 색상의 막을 씌웠다고 생각하면 되는데요, 이미지(Drawable)가 얼마나 진하게 그려질 것인지를 결정하는 것은 색조(tint)의 투명도(alpha)에 의해 결정됩니다. 만약 색조(tint)의 투명도(alpha)가 1(255, 0xFF)이면 이미지(Drawable)가 전혀 표시되지 않고, 투명도(alpha)가 0(0, 0x00)에 가까워 질수록 표시 결과가 원본 이미지(Drawable)에 가까워집니다.

    [Sa + (1 - Sa)*Da, Sc + (1 - Sa)*Dc]

drawableTintMode - src_over

2.1.2 src_in

"src_in"을 사용하면, 색조(tint)가 이미지(Drawable)의 투명도(alpha) 값에 마스크(mask)됩니다. 그리고 이미지(Drawable)의 색상은 표시 결과에 계산되지 않습니다. 결과적으로 이미지(Drawable)의 색상이 빠지고, 이미지의 형태에 색조(tint)의 색으로 칠해진 결과가 표시됩니다. Src인 색조(tint)가 Dst인 이미지(Drawable) 안(in)에 칠해지는 것이죠.

    [Sa * Da, Sc * Da]

drawableTintMode - src_in

2.1.3 src_atop

"src_atop" 값이 지정되면, 색조(tint)가 이미지(Drawable)의 위에 그려집니다. src_over와 비슷한 결과로 표시되지만, 최종적으로 이미지(Drawable)의 투명도(alpha)에 마스크되는 것이 차이입니다.

    [Da, Sc * Da + (1 - Sa) * Dc]

drawableTintMode - src_atop

2.1.4 multiply

"multiply" 값은 이미지(Drawable)의 투명도(alpha)와 색상(color)을 색조(tint)의 값들과 곱하는 연산을 수행합니다. 곱하기를 수행한 결과는, 색조(tint) 값이 1(255, 0xFF)에 가까우면 이미지(Drawable)가 투명하게 표시되고, 0에(0, 0x00)에 가까울수록 이미지(Drawable)를 색조(tint)의 색상으로 어둡게 만드는 효과를 냅니다.

    [Sa * Da, Sc * Dc]

drawableTintMode - multiply

2.1.5 screen

"screen" 값은, multiply와 반대로 동작하는 모드입니다. 즉, 색조(tint) 값이 0(255, 0xFF)에 가까울수록 이미지(Drawable)가 투명하게 표시되고, 1에(255, 0xFF)에 가까울수록 이미지(Drawable)를 색조(tint)의 색상으로 밝게 만드는 효과를 냅니다.

    [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]

drawableTintMode - screen

2.1.6 add

"add"는 이미지(Drawable)와 색조(tint)의 투명도(alpha), 색상(color) 값을 더하는 연산을 수행합니다. 단, 결과 값이 1(255, 0xFF)를 넘어서면, 1(255, 0xFF)로 만듭니다. (=Saturate:포화시키다.)
더하기를 수행한 결과는, 당연하게도 무조건 이미지(Drawable)를 색조(tint)의 색상으로 밝게 만드는 효과를 냅니다.

    Saturate(S + D)

drawableTintMode - add

3. 참고.

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

.END.

안드로이드 텍스트뷰 속성 7. [ems, maxEms, minEms] (Android TextView Attributes 7) (2)	2016.09.30
안드로이드 텍스트뷰 속성 6. [editable, elegantTextHeight, ellipsize, marqueeRepeatLimit] (Android TextView Attributes 6) (0)	2016.09.23
안드로이드 텍스트뷰 속성 4. [drawableLeft, drawableTop, drawableRight, drawableBottom, drawableStart, drawableEnd, drawablePadding] (Android TextView Attributes 4) (4)	2016.09.05
안드로이드 텍스트뷰 속성 3. [bufferType] (Android TextView Attributes 3) (0)	2016.08.29
안드로이드 텍스트뷰 속성 2. [autoLink, linksClickable, textColorLink, breakStrategy] (Android TextView Attribute 2) (0)	2016.08.22

개발자를 위한 레시피