안드로이드 앱 프로그래밍#9 - 나인패치 이미지

우리가 이제 컨테이너에 여러가지 뷰들을 추가할 수 있다.

 

예를들어 텍스트를 넣는 텍스트뷰, 이미지를 넣는 이미지뷰

 

아니면 버튼, 레이팅 바 등등

 

그런데 공통적으로 android:background를 통해서 배경을 따로 지정해줄수있다.

 

이미 있는 png파일로 설정할수도있고 다른 xml파일에서 색상을 지정해서 가져올수도있다.

 

이때 이미지 파일을 가져올때 dp값이나 픽셀이 맞지 않으면 이미지가 전반적으로 늘어지거나

 

모서리 부분은 깨지는 현상이 발생한다.

 

이것을 해결하고자 만들어진것이 나인패치 이미지이다.

 

res-drawble에 내가 원하는 png파일 2개를 넣었다.

 

여기서 button_image_01은 확장자가 png인데

 

button_image_02는 .9가 더 붙어있다. 나인(9)패치 이미지라는것을 의미한다.

 

이 두가지 png파일로 나인패치이미지일떄와 아닐떄의 픽셀 꺠짐 현상을 비교해보도록 하겠다.

 

일단 .9.png 파일을 먼저 열어보면 

이렇게 나온다.

 

이미지를 잘보면 상단 하단 좌측 우측에 검은색 줄이 보인다.

 

이 검은색 줄이 의미하는것은 "확장해도 되는 영역"을 의미한다. 즉, 확장을해도 늘어지거나 꺠지는 현상이 발생하지 않는 부분이다.

 

반면 검은색 줄이 없는 영역(네 꼭짓점 부분)은 확장을할떄 꺠지는 부분이다.

 

나인패치 이미지를 만들때 이렇게 확장 시 꺠지는 부분과 그렇지 않는 부분을 사용자가 따로 설정해서 만든다.

 

그럼이제 비교를 해보자

 

최상위 레이아웃을 vertical linear layout으로 설정하고 4개의 이미지뷰를 만든후

 

각 이미지 뷰에 01이미지(wrap content), 02이미지(wrap content), 01이미지(300dp), 02이미지(300dp)로 설정해주면

 

wrap content로 설정해준 이미지 뷰에서는 동일하게 꺠지지 않은 이미지가 보일것이다.(width값이 wrap content이기 떄문에)

 

하지만 300dp로 늘린 이미지 뷰에서는 01이미지는 꺠져보일것이고 나인패치이미지인 02이미지는 꺠지지 않게 보일것이다.

 

3번쨰 이미지 뷰와 4번째 이미지 뷰의 차이가 바로 나인패치 이미지의 효과라고 보면 될것같다.

 

오늘은 간단하게 나인패치 이미지에 대해서 알아보았다.