[Android/안드로이드] 나인 패치 ( Nine Patch ) 에 대해 알아봅니다.

안녕하세요 돼지왕 왕돼지입니다.

오늘은 나인 패치 ( Nine Patch ) 에 대해 알아보겠습니다.

Nine Patch ( 나인 패치 ) 가 뭔가요?

대부분의 이미지들은 사이즈에 따라 늘어나기 마련입니다. 이 때 일반적인 이미지들은 전체적으로 늘어나버리기 때문에 우리의 의도와는 다른 늘림이 적용될 수 있습니다. 나인 패치는 이미지를 늘릴 때 어떤 부분을 늘릴지를 표시한 이미지 라고 할 수 있습니다.

위 이미지는 "Drop Down" 용으로 나오는 안드로이드의 nine patch 가 적용된 기본 이미지입니다.
상, 하, 좌, 우를 살펴보면 원래 이미지가 아닌 검은 라인들이 보이죠? 이 녀석들의 의미를 알게 되면 바로 나인 패치의 의미를 모두 파악하는 것과 같습니다.

윗 라인 : 가로 확장 영역 (가로로 늘어날 때 이 점 영역을 반복출력하라는 말입니다. 즉 이부분만 늘어납니다. )

왼쪽 라인 : 세로 확장 영역 (세로로 늘어날 때 이 점 영역을 반복출력하라는 말로, 이 부분만 늘어납니다.)

오른쪽 라인 : 세로 내용물 영역 ( Contents, 예를 들어 text 가 저 범위 안에 들어간다는 이야기입니다. )

아랫 라인 : 가로 내용물 영역 ( Contents, 예를 들어 text 가 저 범위 안에 들어간다는 이야기입니다. )

자 이해가 가셨나요?

Nine Patch ( 나인 패치 ) 이미지는 어떻게 만드나요?

  

 draw9patch.bat 가 안드로이드 sdk 에 포함이 되어 있습니다.
위의 이미지도 draw9patch.bat 을 실행시켜 기본 나인 패치된 이미지를 로드한 녀석이죠. 

위에서도 살펴봤지만, 저 상, 하, 좌, 우의 라인들이 9-patch 의 전부라고 볼 수 있겠습니다.
이 점들을 지우고, 추가함으로서 내용물이 표시될 영역과, 늘임이 발생할 떄 늘어나야 하는 부분을 설정할 수 있겠죠.

마우스 클릭 : 점 추가.
마우스 우클릭 : 점 삭제. ( Shift + 클릭 도 같은 효과 ) 

 

요렇게 열심히 작업을 해주신 후에, 새로운 확장자로 기존 확장자 전에 9 ( nine, 나인 ) 을 넣어주면 됩니다.

이전 파일 이름: button.png
나인패치 후 파일 이름 : button.9.png 

다 만들었네요. 어떻게 사용하죠?

 
사용은 일반 drawable 사용과 같습니다. 다만! 확장자에 9 가 붙었다고 해서 9을 아이디에 붙이지 않습니다.

예를 볼까요? 

 

파일 이름 : button.9.png
사용 : Button.setBackground( R.id.button );

 
 

자 그럼 모두들 나인 패치를 마스터 하시길 바라며~