안드로이드] 이미지 깨짐을 방지할 9patch 알아보기

안녕하세요, 

카카오톡이나 마이피플같은 대화형식의 레이아웃을 구성할 때에 보면

말풍선 이미지를 사용합니다. 이 이미지가 안에 텍스트 내용이 많건 적건

깨지지않고 잘 늘어나는데요 . 

나인패치를 이용하면 가능합니다. 

안드로이드 SDK 폴더  > tools 에 가시면 draw9patch 라는 실행 파일이있습니다.

실행하시면 도스 또는 맥사용자면 터미널 창이 뜨는데요 조금 기다리시면 

이런 나인패치 창이 뜹니다. 

도스창을 끄시면 나인패치창도 꺼지니 끄시면 안돼요

이제 여기에 사용할 말풍선 이미지를 드래그로 끌어다 놓습니다. 

제가 사용할 이미지는 이렇게 작은 이미지입니다. 

드래그를 하면 이런 창으로 바뀝니다.

(클릭하시면 크게 보실 수 있습니다)

먼저 하단에 zoom 틀을 조절하여 보기 편하게 조절합니다. 

체크박스 들을 보시면 

Show lock - 이미지 조작을 할 수 없는 영역을 표시

Show content - 해당 내용물(대화텍스트)가 들어갈 영역을 표시

Show patches - 늘어날 영역을 표시

다 체크하는게 보기에 편합니다. 

이제 사용방법인데 일단 이미지가 있는 사각틀을 기준으로 

top, left의 빨간색 화살표 면은 늘어날 부분을 선택하는 면입니다. 

right, bottom 의 파란색영역은 텍스트가 차지할 영역입니다. 

마우스 좌클릭을 이용하여 저 체스판같은 모양의 가장자리 픽셀을 

선택하시면 그림과 같이 검은색 점이 찍힙니다. 이 점은 가장자리 1픽셀만 

선택되고 그 안쪽영역은 선택을 못합니다. 왼쪽면을 보시면 위아래 두 픽셀씩 

선택을 하였는데 이게 늘어날 영역입니다. 사실 한 픽셀만 선택해도 그 픽셀이

쭉늘어나는거라 상관없습니다. 말풍선 꼬리를 제외한 세로로 늘어날 영역을 

클릭 하신 후 이제 가로로 늘어날 부분을 top에서 산택해 줍니다

전체 이미지에서 가로로 늘어날 부분은 말풍선 본체이므로 본체쪽만 한 픽셀정도

선택하여 주심됩니다. 늘어날 부분 선택시 주의사항은 말풍선 가장자리 둥근면을

선택하시면 그 면이 쭉 늘어나 이미지가 깨지게되니 되도록 둥근 모서리는 

선택하지마시고 단면을 선택하셔야 합니다.

right와 bottom 은 내용물이 들어갈 영역입니다. 보시면 아시겠지만 대화창의 

둥근 가장자리까지 선택을 하지않아 자체적으로 알맞게 패딩이 들어가도록

하였습니다. 우측 이미지 세장을 보시면 이미지가 늘어나는 방향에 따라 

늘어난 모양과 보라색영역은 방금 right

와 bottom에서 지정한 영역으로 

글씨가 들어갈 영역입니다. 알맞게 되었으니 컨트롤 + S로 세이브를 합니다.

파일명이 ninepatch.9.png 이런식으로 사이에 9가 끼는데 이게 나인패치 적용

이미지라는 표시입니다. 그대로 리소스폴더에 추가해주시면 됩니다. 

이 이미지를 그대로 보시면 

보시다시피 아까 선택된 검은 선까지 나오는데  이는 실제 안드로이드에서

구동시 표시가 안되므로 신경안쓰셔도 됩니다. 

main.xml 일부인데요 . 이 이미지를 텍스트뷰를 감싸는 리니어에 

배경이미지로 등록하였습니다. 그러고 긴 글을 넣어보면 

이렇게 나인 패치를 적용한 이미지는 아까 right, bottom에서 적용한 영역만

글씨가 들어가고 left,top에서 선택한 영역만 늘어나 깔끔하게 깔린 반면 

기본 이미지를 하면 말풍선 꼬리까지 늘어나는 불상사가..생기게 됩니다 .

앞으로 자주 사용 할 것 같습니다.

감사합니다.