안드로이드 나인 패치(9-Patch) 이미지 버튼 만들기. (How to make an Android Nine-Patch Image Button)

1. 나인 패치(9-Patch) 이미지.

[안드로이드 나인 패치(9-Patch) 이미지 버튼]에서 나인 패치(9-Patch) 이미지의 개념과, 실제 그리기 과정에서 어떻게 동작하는지에 대해 설명하였습니다. 특히, 나인 패치(9-Patch)의 이미지 영역 구분과 구분된 영역에 따라 이미지가 그려지는 과정에 대한 내용은, 안드로이드에서 다루어지는 나인 패치(9-Patch) 이미지를 이해하는데 있어 가장 중요한 포인트라고 할 수 있습니다.

앞선 글의 설명을 통해, 나인 패치(9-Patch) 이미지에 대한 기본적인 개념을 충분히 이해했으리라 생각되니, 그럼, 이제 앱 만들기 예제를 통해, 나인 패치(9-Patch) 이미지를 어떻게 만들고, 만들어진 이미자가 화면에 어떻게 표시되는지에 대해 살펴보도록 하겠습니다.

2. 나인 패치(9-Patch) 이미지 버튼 만들기.

예제에서는 두 개의 이미지를 사용하지만, 두 개의 이미지가 각각 다른 나인 패치 영역으로 구성되는 것은 아닙니다. 단지, 버튼의 상태에 따라 표시될 이미지를 구분하기 위해 이미지를 나누어놓은 것일 뿐이며, 두 개의 이미지는 동일한 패치 영역 컨텐츠 영역을 가집니다. 그리고 버튼에 표시되는 텍스트는 이미지에 포함시키지 않고, 버튼의 text 속성을 사용하여 표시합니다.

2.1 이미지 파일 준비

아래 그림과 같이 이미지 파일을 준비합니다. (예제에서는 3가지 색상 중 Blue 색상의 버튼만 사용합니다.)

[STEP-1] 버튼의 배경에 표시할 원본 이미지 파일 준비

만약 예제를 그대로 따라한다면, 아래 표에서 "이미지를 다른 이름으로 저장"하여 사용하시기 바랍니다.

	Green Button	Blue Button	Orange Button
Normal
Pressed

2.2 이미지 파일(png)을 Drawable 리소스에 추가.

준비된 이미지를 프로젝트의 Drawable 리소스에 추가합니다. Drawable 리소스에 이미지를 추가하는 방법은 [안드로이드 이미지뷰 기본 사용법]의 내용을 참고하시기 바랍니다.

[STEP-2] 이미지 파일을 Drawable 리소스에 추가.

2.3 나인 패치(9-Patch) 이미지로 변환

이제 프로젝트에 추가한 png 이미지 파일을 나인 패치(9-Patch) 이미지로 변환해야 합니다. 다행히, 안드로이드 스튜디오에서 나인 패치(9-Patch) 이미지 변환 기능을 제공해주므로, 원본 이미지만으로 나인 패치(9-Patch) 이미지를 쉽게 만들 수 있습니다.

나인 패치(9-Patch) 이미지로 변환하고자 하는 파일에서 마우스 오른쪽 버튼을 누른 다음, Create 9-Patch file... 메뉴를 선택합니다.

[STEP-3.1] 이미지 파일을 나인 패치(9-Patch) 이미지로 변환

나인 패치(9-Patch) 이미지 파일이 저장될 경로를 지정하는 화면이 나타나는데, "File name" 항목을 보면 원본 파일 이름에 ".9.png"가 자동으로 추가된 것을 확인할 수 있습니다. "OK" 버튼은 선택하여 나인 패치(9-Patch) 이미지를 생성합니다.

[STEP-3.2] 나인 패치(9-Patch) 이미지 저장.

그러면 아래 그림과 같이 ".9.png" 이름으로 변환된 나인 패치(9-Patch) 이미지 파일이 생성됩니다.

나머지 파일에 대해서도 동일한 과정을 통해 나인 패치(9-Patch) 이미지 파일을 생성할 수 있습니다.

그리고 나인 패치(9-Patch) 이미지 파일 생성을 완료했다면, 원본 이미지의 이름을 변경하거나, 삭제하셔야 합니다.

[STEP-3.3] 나인 패치(9-Patch) 이미지의 원본 이미지 삭제

안드로이드 스튜디오에서 원본 이미지를 사용하여 나인 패치(9-Patch) 이미지를 만들었다면, 원본 이미지는 삭제해야 합니다. 만약 삭제하지 않고 그대로 놔두면, 빌드 시에 "Error : Duplicate Resources" 라는 에러가 발생합니다.

이는 "A.png" 이미지 파일과 "A.9.png" 파일 모두 "@drawable/A"로 참조되기 때문입니다.

2.4 나인 패치(9-Patch) 이미지의 영역 지정

나인 패치(9-Patch) 이미지가 만들어졌으니, 전체 이미지에서 늘어나야 할 영역을 지정해줘야 합니다. [안드로이드 나인 패치(9-Patch) 이미지 버튼]에서 봤듯이, 이미지의 왼쪽, 위의 1 픽셀 테두리에 늘어날 영역 정보를 지정할 수 있습니다.

그런데 안드로이드 스튜디오에는 나인 패치(9-Patch) 이미지의 영역을 지정할 수 있는 자체 편집 툴을 제공하므로, 매우 쉽게 늘어날 영역을 지정할 수 있습니다.

화면의 왼쪽 목록에서 앞선 단계에서 추가한 나인 패치 이미지를 더블 클릭하면, 아래 그림과 같이 나인 패치(9-Patch) 이미지 영역을 지정할 수 있는 화면이 나타납니다. 앞서 설명한대로, 원본 이미지에 1픽셀 테두리가 확장된 이미지 형태로 표시되죠.

나인 패치(9-Patch) 도구를 실행하면, 일반적인 이미지 편집 프로그램과 다른, 다소 생소한 화면이 표시되는데요. 편집 화면의 왼쪽은 이미지 영역을 지정하는 곳이고, 오른쪽 화면은 지정된 여역에 따라 실제 표시 화면을 확인할 수 있는 곳입니다. 좀 더 자세한 사용법은 다른 글을 통해 소개하도록 하고, 여기서는 이미지 영역을 지정하는 방법에 대해서만 설명하겠습니다.

이미지의 영역을 지정하는 방법은 간단합니다. 이미지의 왼쪽, 또는 오른쪽에 마우스를 올리면 이미지가 회색으로 오버랩되고, 조금 어두운 회색의 라인이 표시되는데, 이 라인을 움직여서 이미지 영역을 지정할 수 있습니다. (또는 1픽셀 테두리를 직접 클릭해서 영역으로 지정하거나, SHIFT키와 같이 클릭하여 영역을 취소할 수도 있습니다. 좀 더 자세한 사용법은 다른 글을 통해 소개하겠습니다.)

세로 방향 영역 지정과 마찬가지 방법으로 가로 방향에 대한 영역을 지정하면 최종적으로 아래와 같이 표시될 것입니다.

[STEP-4] 나인 패치(9-Patch) 이미지의 영역 지정

참고로, 위의 그림에서 확인할 수 있듯이, 나인 패치(9-Patch) 이미지 위에 표시될 컨텐츠 영역 또한 동일한 방법으로 지정할 수 있습니다. 물론, 이미지의 오른쪽, 아래의 1픽셀 테두리를 사용해야 하겠죠.

2.5 "selector"를 지정한 리소스 XML 추가.

나인 패치(9-Patch) 이미지에 대한 작업을 완료했으니, 이제 버튼의 배경에 나인 패치(9-Patch) 이미지를 그릴 때 상태에 따라 다른 이미지를 사용하도록, "selector"를 사용한 리소스를 생성합니다. "selector"에 관한 좀 더 자세한 내용은 [안드로이드 이미지 버튼 - "selector"를 지정한 리소스 XML 추가]에서 확인할 수 있습니다.

[STEP-5] "res/drawable/imgbtn_blue_states.xml" - "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>

2.6 Button 위젯에 나인 패치(9-Patch) 이미지를 배경으로 표시

마지막으로 액티비티에 버튼 위젯을 작성하고, 앞서 추가한 나인 패치(9-Patch) 이미지를 버튼의 배경으로 지정합니다. 이 때, 나인 패치(9-Patch) 이미지 리소스 ID를 직접 지정하지 않고, "selector"로 작성한 리소스 XML 파일(imgbtn_blue_states.xml)사용한 것에 주의하세요.

그리고 다양한 상황에서의 출력 결과를 확인하기 위해, 네 개의 버튼을 모두 다른 크기로 표시하였습니다.

[STEP-6] "activity_main.xml" - MainActivity의 Button에 텍스트 표시.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonBlue"
            android:background="@drawable/imgbtn_blue_states"
            android:textSize="20sp"
            android:text="Original"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_height="200dp"
            android:id="@+id/buttonBlue1"
            android:background="@drawable/imgbtn_blue_states"
            android:textSize="20sp"
            android:text="Vertical"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:id="@+id/buttonBlue2"
            android:background="@drawable/imgbtn_blue_states"
            android:textSize="20sp"
            android:text="Horizontal"/>

        <Button
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_marginTop="10dp"
            android:id="@+id/buttonBlue3"
            android:background="@drawable/imgbtn_blue_states"
            android:textSize="20sp"
            android:text="Horizontal and Vertical"/>

    </LinearLayout>

3. 예제 실행 화면

예제 작성을 완료하고 실행하면, 다음과 같은 실행 화면이 표시됩니다.
원본 크기(ORIGINAL)에 비해 가로(VERTICAL) 또는 세로(HORIZONTAL) 방향으로 늘어난 이미지와, 가로/세로(HORIZONTAL AND VERTICAL) 방향 모두 늘어난 이미지가 원본 이미지의 형태를 그대로 유지하며 그려지는 것을 확인할 수 있습니다.

4. 나인 패치(9-Patch)의 몇 가지 예제

또한 여러 형태의 이미지가 나인 패치(9-Patch)에서 어떻게 표시되는지 알아보기 위해, 앞서 예제에서 사용한 이미지에 더해, 몇 가지 이미지를 더 사용해 보았습니다. 나인 패치(9-Patch) 이미지의 표시 과정을 이해하는데 많은 도움이 되길 바랍니다.

5. 참고

• 개발자 레시피 - 안드로이드 나인 패치(9-Patch) 이미지 버튼.
  • [안드로이드 나인 패치(9-Patch) 이미지 버튼]을 참고하세요.
• 크기 조정 가능한 비트맵 생성(9-패치 파일)
  • [안드로이드 스튜디오 사용자 가이드 - 9-패치 파일 항목]을 참고하세요.
  • [안드로이드 API 가이드 - Nine-patch]을 참고하세요.
• ImageButton 에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 ImageButton 항목]을 참고하세요.
• Buttons 가이드.
  • [안드로이드 개발 참조문서 Buttons 가이드]을 참고하세요.
• 상태에 따른 리소스 선택 방법에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 Drawable Resource 항목 - State List] 내용을 참고하세요.

.END.