안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습

안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습

안드로이드 나인패치에 대한 두번째 시간으로 나인패치를 개발자가 어떻게 레이아웃을 잡아서 사용 하는지에 대해 알아보겠다.

나인패치에 대해 기억이 안난다면 이전 글을 다시 보고 이 글을 보도록 하자.

2013/02/28 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념

저번 시간 마지막중에 4가지의 나인패치 이미지 예제를 주었다. 대표적으로 쓰이는 이미지 2가지만 어떤식으로 적용 되는지 하나하나씩 보자.

1. 

상단 타이틀이나 내용부분에 그라데이션을 주기 위해서 흔하게 쓰이는 이미지이다.

나인패치를 보면 상단좌측부분은 1px만큼 잡아 주었고, 하단우측부븐은 Full로 나인패치를 잡아 주었다. 

?

1 2 3 4 5 6 7 8 9

<!--   <Textview android:layout_width="100dip" android:layout_height="100dip" android:text="Contents" android:textcolor="@android:color/black">   -->

위의 이미지는 나인패치를 가로 세로 100dip으로 강제로 늘린 것이다. Padding영역을 모두 잡아 주었기 때문에 앞으로 상단위쪽부분으로 Content 가 붙어 있는것을 볼 수 있다.

?

1 2 3 4 5 6 7 8 9

<!--   <Textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Contents" android:textcolor="@android:color/black">   -->

다음 이미지는 가로 세로 Content 크이게 맞게 늘어 나도록 적용되어 있다. 크기에 맞게끔 늘어 난것을 볼 수있다.  

?

1 2 3 4 5 6 7 8 9

<!--   <Textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Contents" android:textcolor="@android:color/black">   -->

가장 중요한 부분이다. 흔히들 나인패치를 잡을때 하는 실수..

이 부분도 역시 가로세로 Content 사이즈에 맞게 늘어 나도록 적용하였다. 하지만 Content 를 세로로 길게 넣었다.

자세히 보면 가로로 Content 크기에 맞지 않게끔 늘어 난(빨강색 부분) 것을 볼 수 있다. 왜이렇게 되었을까?

정답은 상단 나인패치 부분에 있다. 현재 점으로 하나만 잡고 양 옆으로 영역이 남아 있다. 이 부분이으로 인해 좀 더 늘어 난것이다. 정확하게 맞추기 위해서는 나인패치를 Full로 잡거나 1px로 최대한 작게 변경 하면 된다.

여기까지만 이해 했다면 90% 정도 까지 이해한 것 이다.

2. 

다음 예제를 보자.

?

1 2 3 4 5 6 7 8 9 10

<!--   <Textview android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Contents" android:gravity="center" android:textcolor="@android:color/black"/>   -->

이 나인패치의 상단을 유심히 봐야 한다. 가로로 늘어 나는 부분의 하단 꺽쇠부분이 포함 되어 있지 않다. 그래서 Full로 늘리더라도 꺽쇠부분은 오른쪽으로 이동하게 된 것을 볼 수 있다. 

?

1 2 3 4 5 6 7 8 9 10

<!--   <Textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Contents" android:gravity="center" //중앙정렬 android:textcolor="@android:color/black"/>   -->

다음으로 적용된 레이아웃은 가로세로가 Content 에 맞게 늘어 나도록 되어 있다. 그런데 이전 예제처럼 딱 붙지 않고 패딩 부분이 생긴 것을 볼수 있다. Padding영역의 나인패치를 보면 Full로 채워 져있지 않고 좌우 상하 여백이 있을 것을 볼 수 있다. 이런식으로 Content에 여백을주기 위해서 Padding부분을 잡아 주면 된다.

여기까지 나인패치에 대해 상세히 알아 보았다.

그리고 Android에서 제공하는 draw9patch 툴이 있는데, 이것을 사용하면 좀 더 편하게(미리보기 및 Bad Patches 영역 보여주는 기능 등) 나인패치를 잡을 수 있으니 참고하자.

다음 시간에는 안드로이드에서 쓰는 dip단위, sp단위, DPI, ARGB 등의 개념에 대해 상세히 알아 보겠으며, 

그 다음으로 단말특성(해상도 가변)에 맞는 상대적으로 배치를 위한 디자인 가이드라인 작성법을 알아 보겠다.