나인패치(9patch) 이미지 쉽게 만드는 방법

떠돌이개발자Jan 20, 2023

나인패치(9-Patch) 이미지란?

이미지에서 늘어날 수 있는(stretchable) 영역과 늘어나지 않고 고정fixed)되는 영역으로 구분하여, 이미지가 화면상에 그려질 때 이미지의 크기가 늘어나거나 줄어들더라도 원본이미지 형태를 유지하도록 만들어진 이미지를 나인 패치(9-Patch) 이미지라고 한다.

일반적으로 사용되는 png 이미지 파일 형식과 확장자가 그대로 사용되며, 파일 확장자 앞에 9가 포함되어 표기 된다. 안드로이드에서는 “.9.png”로 끝나면 나인 패치(9-Patch) 이미지 파일로 인식하여 처리한다. 이미지의 늘어날(stretchable) 영역과 고정(fixed) 영역 등에 대한 정보의 경우 원본 이미지에 추가된 상하좌우 1pixel 영역에 저장된다. 그렇기 때문에 추가적으로 요구되는 파일은 없다.

나인 패치(9-Patch) 이미지 파일이 “.9.png” 로 저장된다고 하더라도, 안드로이드 소스 코드상에서 참조될때는 “/res/drawable/image.9.png”로 저장된 파일을 XML 에서 사용할 때 “@drawable/image.9” 가 아니라 기존 이미지들 참조방식과 동일하게 “@drawable/image”로 참조한다.

왜 나인패치인가?

나인 패치(9-Patch)는 늘어날영역과 고정될 영역을 구분하기 위해 이미지를 9개의 세부 영역으로 나눈 후 4개의 모서리 영역은 원본 이미지를 그대로 그리고 나머지 5개 영역은 뷰의 크기에 따라 늘려서 그리기 때문에 나인패치라는 이름이 붙었다.

이미지출처 : developer.android.com/guide/topics/graphics/drawables#java

NinePatch 이미지 생성방법

1. 버튼으로 사용될 혹은 지도 위 마커로 사용될 이미지의 원본 png파일 2개가 필요하다. 하나는 기본적으로 보여줄때 다른 하나는 버튼 혹은 마커를 클릭했을 때 사용할 이미지이다.

2. 2개의 준비된 이미지를 Drawable 리소스 폴어 아래에 추가해준다.

3. 이미지가 준비가 되었다면 안드로이드 스튜디오에서 제공하는 나인패치 이미지 변환기능을 사용해보자.

4. 나인 패치(9-Patch) 이미지로 변환하고자 하는 파일을 선택 후 마우스 우클릭 후 Create 9-Patch file… 메뉴를 선택한다.

5. 이미지파일명을 변경 하거나 그대로 저장한다. “.9.png”가 이미지 파일명 뒤에 자동으로 추가된 것을 확인할 수 있다.

6. 나인패치 이미지 생성이 완료되면 기존 원본 2개 이미지는 삭제한다. 그렇지 않으면 빌드시 리소스 중복 오류(Error: Duplicate Resources)가 발생하게 된다.

7. 이제 늘어날 영역을 지정해주어야한다. 왼쪽 리소스 폴더에 생성된 나인패치 이미지를 더블클릭하면 나인패치 이미지 영역을 지정할 수 있는 안드로이드에서 제공하는 툴창이 나타나는데 늘어날 영역을 가로 세로로 지정해주면 된다.

8. selector를 사용하여 버튼 리소스 XML을 추가한다.

“res/drawable/img_btn_selector.xml”

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/imgbtn_blue_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/imgbtn_blue_normal" />
</selector>

9. 버튼의 백그라운드로 셀렉터를 지정한다.

<Button
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:background="@drawable/img_btn_selector"
    android:textSize="20sp"
    android:text="Vertical"/>