덩치의 안드로이드 스터디

나인패치 이미지란

(http://developer.android.com/tools/help/draw9patch.html) <- 디벨로퍼사이트의 나인패치에 대한 설명

해상도가 다른 단말기에서 아이콘 등이 확대 될 때, 확대 되는 영역을 특정지어서 확대되서

픽셀이 깨지는 (라운드,그라데이션) 현상 없이 확대되는 이미지.

확대되도록 설정한 영역 이외의 부분은 확대가 되지 않는다.

쉽게말해 말풍선 같은 이미지를 네 모서리와 하단 꼭짓점 크기는 고정시키고 안의 크기만 늘려주며,

고정된 해상도라기 보다 어떤 해상도로 늘어나더라도 이미지가 깨지지 않도록 하는 방식이다.

다음 이미지를 보자

위 이미지가 나인패치 이미지이다. 확장자가 .9.png로 특이한 형태를 취하고 있으며,

풍선 주위에 검은색 선은 확장 영역과 콘텐츠 영역을 표시하는것으로, 실제 이미지가 적용되면 나타나지 않는다.

나인패치 사용법에 앞서 우선 위의 이미지가 어떻게 확장되는지 설명을 하자면

다음 이미지를 보며 설명해주겠다.

왼쪽변의 검은 선은 세로로 확장되는 영역, 상단변의 짧은 선 두개는 각각 세로로 확장되는 영역이며,

우측변의 검은 선은 콘텐츠(텍스트 등)가 들어가는 세로영역, 하단의 변은 마찬가지 콘텐츠가 들어가는 가로 영역이다.

분홍색 기둥 두개가 보일텐데, 간단히 말해 저 두개의 영역이 확대,축소되며 이미지를 표시한다.

즉, 노란부분과 분홍색 막대 상,하단, 왼쪽분홍막대 좌측, 오른쪽 분홍막대 우측 영역은

이미지 크기가 불변한다. (돼지꼬리)

분홍색 막대만이 가로,세로로 확장되고 축소되며 전체 이미지가 커지거나 작아지는것처럼 표시된다.

그렇기때문에 작은 해상도에서는 라운드가 엄청 커보이지만, 큰 해상도에서는 라운드가 작아보이게 되고

엄청 커지면 라운드는 거의 없는것처럼 보이게 된다.

밑의 말풍선 꼬리 영역도 마찬가지로 크기가 변하지 않는다.

위 이미지처럼 라운드가 있거나, 또는 그라데이션이 있어서 그라데이션 영역은 확장하지 않고, 이외의 부분만

확장될 수 있을 때, 나인패치 이미지를 사용한다.

나인패치의 한계는 하트모양이나 동그라미처럼 특정 영역만 확대하면 모양이 이상해져버리는 

도형에는 사용할 수 없다는것이다.

나인패치를 만드는법을 알아보자. 우선 이미지를 준비한다. 포토샵으로 그려도 되고 기존의 이미지를 사용해도 된다.

나는 간단하게 아래의 이미지로 실습을 해 보겠다.

다음은 나인패치 이미지를 만들 수 있는 툴을 실행시킨다.

(툴은 안드로이드 sdk에 있으며, 툴이 없는 경우 포토샵으로 맨처음 이미지처럼 만들고, 확장자를 name.9.png 식으로 저장하여도 된다.)

나의 경로는

adt-bundle-windows-x86_64-20130522 -> sdk -> tools -> draw9patch.bat

draw9patch.bat 파일을 실행시키면 잠시후 다음과 같은 창이 나타나는데,

이미지를 드래그해서 위 창에 드랍시킨다.

그럼 이렇게 표시된다. 우측은 미리보기이고..

상하좌우 맨 마지막 1픽셀을 마우스로 클릭하여 드래그하면 검은색 선이 생기는데,

이런 방식으로 영역을 설정 해 준다.

일반적으로.콘텐츠영역은 확대되는 영역의 최대 영역으로 설정한다.

영역 취소는 시프트를 누르고 클릭 하여 드래그하면 된다.

(이런식으로 색상이 구분되는것은 하단에 show patches 를 체크해 주면 된다.)

분홍색 부분이 확대되는 영역, 초록색과 붉은부분이 확대되지 않는 영역이며

우측을 보면 확대를 엄청 했을경우 미리보기인데, 라운드부분은 확대되지 않아서 상대적으로 작아보인다.

하지만 이런 특성 덕분에 라운드가 깨져보일 염려는 없다.

나름대로 알아듣기 쉽게 설명하기 위해 노력했는데 잘 전달 되었는지 모르겠습니다.

문의사항은 댓글 남겨주세요

펌 환영. 출처만 남겨주세요