«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
68
Total
655,830
관리 메뉴

Elex

안드로이드, 나인 패치 이미지란 본문

프로그래밍/Android

안드로이드, 나인 패치 이미지란

프리랜서 프로그래머, Elex 2013. 2. 26. 09:07

안드로이드는 Nine Patch 그래픽이라고 하는 이미지 형식을 지원합니다.  이 이미지는 기본적으로 PNG 형식의 이미지인데 Stretchable(늘려질/늘려져도 되는) 영역을 정의할 수 있습니다. 이 나인패치 이미지는 일반적으로 뷰(View)의 배경이미지로 사용됩니다. 

나인 패치 이미지는 일반적인 PNG 이미지에서 상/하/좌/우 각각 1 pixel 씩의 보더를 추가로 가지게 되고 이 영역에 필요한 정보를 검은 색 선으로 마킹합니다. 물론 안드로이드에 사용될 때에는 보더의 검은 선은 표시되지 않습니다. 나인 패치 이미지 파일을 구분하기 위해서 .9.png라는 확장자를 갖게 됩니다.

위쪽과 왼쪽의 1 pixel 검은색 선은 각각 가로/세로 방향으로 늘어날 수 있는 부분을 정의합니다. 이 영역은 이미지가 늘어날 때 반복되는 영역입니다. 늘어날 수 있는 부분은 여러개가 될 수도 있습니다. 

오른쪽과 아래쪽의 1 pixel 검은색 선은 뷰 안에 포함될 컨텐츠가 그려질 영역을 정하는 일을 합니다. 즉, 패딩 영역을 결정합니다. 만약 이 선을 그리지 않는다면 왼쪽과 위쪽의 선이 대신 사용됩니다.


smille_button.png

왼쪽의 이미지는 60x40 픽셀 크기의 png 파일입니다. 이 파일의 이름은 smille_button.png 입니다. 이 이미지는 아래와 같이 나인패치를 적용할 수 있습니다.


위의 이미지에 임의대로 나인 패치를 적용한 이미지 입니다. 이 이미지의 크기는 62x42픽셀입니다. 그리고 파일 이름은 smille_button.9.png 입니다.

왼쪽/위쪽 마킹을 보시면, 각각 노란색 스마일을 피해서 1 픽셀씩 두 개가 찍혀 있죠. 이 나인 패치 이미지는 아래의 그림과 같이 늘려질 수 있게 됩니다. 

안드로이드 앱에 사용할 이미지는 화면 밀도별로 동일한 이미지를 여러 개 제작해야 하는데, 특히 나인 패치 이미지를 여러 개 준비하려면 여간 번거로운게 아니지요. 
나인 패치 이미지를 손쉽게 제작하려면 Better 9 Patch Tool을 사용해 보세요. 마우스로 쓱쓱 그리기만 하면 나인 패치 값을 지정할 수 있어요. 특정 폴더 내의 모든 이미지를 한 번에 처리하는 일괄 처리기, 그리고 화면 밀도별로 크기가 조절된 이미지를 생성할 수 있는 등 필요한 모든 자동화 도구가 포함되어 있어요.


0 Comments
댓글쓰기 폼