AndroidStudio/나인 패치(9-Path) 이미지

문제

이미지를 위젯의 백그라운드 또는 소스로 설정할 때, 위젯의 너비 또는 높이가 늘어남에 따라 이미지 소스가 예상하지 못한 모양이로 늘어나는 경험을 한 적이 있다. 위젯의 비율에 따라 다른 이미지를 적용해 줄수 있지만, 많은 수의 이미지 파일을 관리해야 하는 어려움이 생긴다.

 

아래는 말풍선 모양의 이미지로, 뷰의 크기가 변할 때 말풍선의 꼬리도 함꼐 늘어나버리는 것을 확인할 수 있다. 

원본이미지 example.png

버튼이 늘어남

나인 패치 이미지

나인패치 이미지를 활용하면 변경 가능한 영역을 지정할 수 있다. 이를 활용하면 위젯이 늘어나더라도 깔끔한 형태의위젯을 만들 수 있다. 또한 padding을 주는 방법으로도 활용할 수 있다.

나인 패치 이미지는 ooo.9.png의 파일 형식을 갖는다.

사용해보기

1. drawable에 example.png 파일 저장

원본이미지 example.png

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

res / drawable / example.png > create 9-Path file

create file

3. 컨텐츠 영역 지정

이미지의 모서리에 black으로 지정 된 부분을 확인할 수 있다. 이 부분을 늘이거나 줄이면, 오른쪽에서 늘어난 이미지를 미리 확인할 수 있다.

컨텐츠 영역 지정

4. 활용하기

MainActivity에서 활용하기

궁금한점

나인 패치 이미지를 프로젝트 적용할때, 디지인 팀에게 어떤 자료를 요청해야 할까?

안드로이드 스튜디오 말고도, 웹 사이트에서도 나인 패치 이미지를 생성할 수 있다고 한다. 000.9.png 형태의 자료를 요청해야 하는걸까?

참고자료

https://developer.android.com/studio/write/draw9patch.html

크기 조절 가능한 비트맵 만들기(9-패치 파일)  |  Android 개발자  |  Android Developers

https://developer.android.com/guide/topics/graphics/drawables#nine-patch

드로어블 개요  |  Android 개발자  |  Android Developers

https://recipes4dev.tistory.com/131

안드로이드 나인 패치(9-Patch) 이미지 버튼. (Android Nine-Patch Image Button)