안드로이드에서 TextView에 글자 몇글자를 적어보았습니다. 그리고 배경으로 회색의 그림자가 살짝 있는 바형태의 이미지를 깔아보았습니다. 위와 같이 고정된 형태의 TextView라면 아무런 문제가 없을 것입니다. 하지만 내부의 글의 양이 동적이라면 어떻게 처리해야 할까요?

이제 고민할 것이 많아질 것입니다. 하지만 안드로이드에서는 9-Patch라는 기능을 제공합니다. 이 기능을 사용하면 동적으로 변하는 레이아웃에 효율적으로 대응할 수 있습니다.

위의 예제에서 사용되는 이미지는 실제로 다음과 같이 생긴 이미지입니다. (예시를 위해 3200배 확대하였습니다)

위에서 보이는 검은점 하나가 1픽셀입니다. 결과적으로 이 이미지의 가장 바깥쪽 1픽셀은 실제로 눈에 보이지 않게 되는 영역입니다. 안쪽의 그림자 효과가 추가된 네모만이 실제로 눈에 보이게 되는 영역입니다. 그렇다면 쓰이지 않는 바깥쪽 1픽셀 영역의 검은점은 무엇일까요?

실제로 저 검은점의 부분이 원하는 크기에 맞게 동적으로 늘어나는 부분입니다. 검은색 영역을 쭉 늘어뜨린다고 생각하시면 됩니다. 여기서는 가로와 세로의 영역을 모두 정의하였으므로 맨 처음 보여드렸던 예제처럼 가로/세로 어떤 형태로든지 자유롭게 확장이 가능합니다.

이 파일을 저장할 때는 일반적으로 사용 되는 .png가 아닌 9.png라는 확장자를 사용하셔야 합니다. 위의 파일은 background.9.png로 저장하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff">

<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content"
   android:layout_margin="20dp"
   android:text="@string/hello"
   android:background="@drawable/background"/>

</LinearLayout>

그리고 이미지를 사용할경우에는 위와 같이 사용을 하면 됩니다. 여기서 주의할 점은 9.png를 모두 표기하지 않는다는 것입니다. @drawable/background만을 사용한것이 바로 그 예입니다.

추가로 알아두어야 할 점으로 위와 같은 형태의 9-Patch를 사용하게 되면 오른쪽의 가로 검은점에 의해 그영역만 늘어나게 될텐데요. 늘어나지 않는 영역에 대해서는 자동으로 Padding 영역으로 할당이 되게 됩니다.

결과적으로 왼쪽의 많은 부분에 특정 엘리먼트들이 자리잡을수 없게 됩니다. 이경우 padding값을 0으로 바꾸시면 9-Patch에서 자동으로 지정된 Padding을 제거할 수 있습니다. [예제코드 다운로드]