본문 바로가기

안드로이드 개발/Design

Android Nine-patch Tips

반응형

안드로이드의 나인패치는 어플리케이션의 UI를 구성하는데 중요한 요소이다. 어떠한 크기로 확장 할 수 있도록 개발자 또는 디자이너로 하여금 사각영역을 지정 할 수있다. 개발하는 HDPI, XHDPI, XXHDPI 등 다양한 DPI를 지원해야 한다. 이런 점에서 나인패치는 아주 중요한 요소이다.


이런점에서 팁하나를 소개 하려한다.

Low DPI 나인패치 이미지를가지고 High DPI에 적용시(또는 반대의 경우) 문제점이 발생 하는데, 이를 대비 할 수 있는 방법이다. 보통 문제가 생겼는지도 잘 모른다. 혹시 나인패치 이미지의 색상이 기기의 DPI별로 다르게 나온 적이 있다면 이부분을 의심해야 할 듯 하다.


예를 들어 HDPI 나인패치 이미지를 만들어 drawable-hdpi 디렉토리에 넣었다고 치자. 보통 나인패치 영역을 최소화 하기 위해 아래처럼 반복되는 영역은 가장작게 1px로 잡는게 대부분이며, 반복되는 부분외 달라지는 부분의 영역의 여유분 없이 잡게 된다. 


이런 경우 문제가 생긴다.


왜?

안드로이드에서는 이미지를 리스케일링한다. 예를 들어 HDPI이미지를 만들어 넣었는데, XXHDPI의 단말기에서 실행 하면 DPI크기를 맞추기 위해 이미지를 리스케일링 하여 늘리게 된다. 

이렇게 리스케일링 과정중 스트레치 영역은 리스케일링되지 않기 때문에 충돌이 난다. 즉 스트레치 역영과 아닌 부분의 색상이 뒤섞여 버린다. 




팁!

이런 이미지 리스케일링시 충돌나지 않게 하려면 스트레치 영역에 여유분을 주면 된다.


1) 스트레치 영역은 적어도 2-4px로 잡는다.

2) 스크레치 영역외(반복해야 되는 부분중 스트레치 영역이 아닌부분)도 여유분의 공간을 준다.



이렇게 2가지점을 꼭 기억하면 나인패치 충돌을 막을 수 있다.



반응형