작은 이미지 파일로 큰 배경 만들기 - 9.patch (NINE PATCH)

Nine-Patches (re-sizable bitmaps) 

안드로이드용 모바일 어플리케이션을 개발하다보면, 

리스소 파일들이 어플리케이션 용량의 대부분을 차지하는 경우를 볼 수 있습니다.

이런경우에 리소스 파일들의 용량을 줄일 수 있는 방법으로 9.patch를 사용합니다.

1. 리소스 파일이름

리소스 이미지 파일이름은 파일이름.9.png 등으로 지정합니다.

실제 사용시에는 파일이름만 가지고 사용하면 됩니다.

ex) android:backgroudn="@drawable/파일이름"

2. 이미지 구성

이미지는 약간의 포토샵의 작업이 필요합니다.

까만 점을 사용해서 늘어나는(그 부분만 확장하기 때문에 늘어나는 이라고 표현) 부분을 지정할 수 있습니다.

또 까만 점을 사용해서 채워질(padding)부분을 지정할 수 있습니다.

위쪽과 왼쪽의 까만점(또는 까만선)은 늘어날 부분을 지정합니다.

오른쪽과 아래쪽의 까만점(또는 까만선)은 채워질 부분을 지정합니다.(오른쪽과 아래는 선택적입니다. optional)

sdk tool에 있는 draw-9-patch 를 사용해서 그려도 되고, 기타 다른 이미지 툴(photoshop 등의)을 사용해도 됩니다.

아래와 같이 실제 크기는 11px * 11px 의 이미지를 만듭니다. 

(더 작은 이미지로 만들어도 상관은 없습니다. 하지만 너무 작으면 라운딩처리가 힘들어져서 10 이상은 되야 할듯-_-ㅋ)

그리고 만든 이미지를 아래와 같이 res/drawable 폴더에 추가해 줍니다.

파일 이름은 위에서 말했다시피 파일이름.9.png 의 형식인 background_image.9.png 를 사용했습니다.

그리고 아래와 같이 layout의 xml 파일에 리소스를 background 로 지정합니다.

위에서 말했듯이 사용할때는 .9 는 빼고 파일이름만 가지고 사용합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<?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="@drawable/background_image"     > <TextView      android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="@string/hello"     /> </LinearLayout>

실제 실행 결과입니다.

이것만 봐서는 .9 patch가 좋은지 안좋은지 알 수 없습니다.

그래서 같은 이미지를 까만색 점 부분을 빼고, 파일이름에서 .9 를 빼고 적용해 보았습니다.

아래는 .9 를 사용하지 않은 실행 결과입니다.

예상대로 이미지가 

실제 11px 의 크기에서 위의 xml에 정의된 300dp * 400dp 의 크기로 강제로 늘어나 적용된 것을 볼 수 있습니다.

.9 patch의 중점은 까만색 점 입니다.

이 점(또는 선)이 찍혀 있는 부분만 늘어난다는 것만 명심하면 됩니다.

(양쪽에 찍을 것이므로 양쪽이 매칭되어 점들이 매칭된 한 열, 한 행이 늘어나는 것으로 생각됨, 정확한건 공부를....)

이 방법을 사용하면, 

일반적으로 테두리만 있는 배경색을 사용할 경우에 리소스 파일 용량을 어마어마하게 줄일 수 있습니다.

- 참고사항 - 

아이폰 개발 시 안드로이드의 nine-patch와 비슷한 것으로는 

stretchableImageWithLeftCapWidth:topCapHeight: 메소드가 있습니다.