나인패치

안드로이드 나인패치란?
 

일반 png의 이미지에, 늘어날 수 있는 영역을 지정해주는 것입니다. PNG 이미지로 되어있는데

Stretchable(늘어나는) 영역을 정의할 수 있습니다. 이 나인패치 이미지는 보통 뷰(View)의 배경이미지로 사

용됩니다.

이에 대한 개념 정리는, 여타 사이트에 워낙 잘 설명이 되어있고, 제가 더 잘설명할 자신이 없어, 생략합니다.

아래 사이트 참조하세요.
 

http://www.androidpub.com/2096 

http://blog.daum.net/_blog/_m/articleView.do?blogid=0Eokl&articleno=155

http://developer.android.com/guide/developing/tools/draw9patch.html

쉽게 말해, 나인패치를 만드는 법은 이미지에, 늘어날수 있는 영역을 그려주시면 됩니다.

그림만으로는 이해가 잘 안가실테니, 예제를 보여드리겠습니다.

 

첫번째 예제.
 

다음과 같은 이미지가 있습니다. 이 이미지를 버튼에 배경으로 적용할 것입니다.

Left, top 부분이 늘어나는 영역, right, bottom영역이 내용이 들어가는 영역입니다.

204 x 70pixel

나인패치를 이용하여 적용하면 다음과 같습니다.

동그란 부분은 손상되지 않고, 깨지지 않으면서 이미지가 그려진걸 볼 수있습니다.

 

두번째 예제.
 

어떻게 늘어나는지 보여드리기 위해, 이미지에 약간 그림을 그렸습니다.

방금 전의 뷰를 이번의 이미지로 바꾸어서 보여주게 되면 다음과 같습니다.

204 x 70pixel

 

 

세번째 예제.
 

첫번째, 두번째에서는 내용영역을 넓게 잡아서, 내용이 적어도 최소사이즈가 큰 것을 확인할 수 있었는데,

이번에는 내용의 크기에 따라서, 버튼의 크기가 좀더 유동적입니다.

적용이미지는 다음과 같습니다.

45 x 35pixel

이전의 이미지보다 좀더 유동적으로 그려진것을 볼 수 있겠습니다.
내용이 들어가는 영역을 좀 좁혀놨기때문에 글자가 작을경우에도, 일정 크기를 유지하지 않네요.

  

나인패치 적용법
 

위의 사이트에보면 안드로이드 sdk받아서 하라고 하시는 분들도 있는데, 그렇게 하셔도 되고 사용하시는 일

반 그래픽 에디터 사용하셔도 됩니다. 디자이너분들은 그래픽에디터가 익숙하시겠죠.
 

1. 일반적으로 작업된 이미지에 left, top, right, bottom 1pixel씩 margin을 넣어주시고 left, top, right,

bottom에 검은색 1px선으로 늘어날 영역을 그려주시면 됩니다.
 

2. 그리고 파일명을 다음과 같은 형식으로 저장해주시면 됩니다. [filename].9.png
 

이와 같은 작업을 해야하는 이유는, 안드로이드 단말기의 종류가 여러가지이고, 단말기마다 해상도가 다르

기 때문에, 레이아웃을 비율로 상대적으로 잡게 됩니다. 이럴경우, 백그라운드로 준 이미지를 임의로 늘리게

되면, 이미지가 깨지는 현상이 생기게 됩니다. 그렇기 때문에 나인패치라는 방법을 사용하여 이미지의 왜곡

을 최소한으로 막아 이미지를 적용하자는 것입니다.

위에 사용한 예제 파일은 다음과 같습니다.

NinePatchExample.zip

NinePatchExample.apk