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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

“안드로이드 앱 개발자가 제안하는 디자인 방법론 – 2. 나인패치(Nine-patch) 실습”에 대한 7개의 생각

  1. 이해가 확실히 안되는 부분이 있는데요.. 나인패치에서 우측과 하단의 라인은 이미지의 크기인가요.. 텍스트가 들어갈수있는 부분을 표시한건가요..?
    그리고 우하단의 라인표시가 안된 나인패치이미지들도 봤는데 표시를 해주지 않아도 되는건가요?

  2. 안녕하세요.
    우측하단은 텍스트가 들어가는 부분입니다.
    우측하단은 안하셔도 됩니다. 선택적 사항이며, 안하실 경우 내용이 모든영역으로 잡히게 됩니다. 예를 들어 버튼이미지에 나인패치를 했는데 텍스트를 넣지 않을 경우 안잡아 주셔도 됩니다.

  3. 무슨 말인지 모르겠어요. 나인패치를 full로 잡아야 한다는 말은 full로 잡는다는걸 한번도 언급하지 않으셨는데 갑자기 full로 잡아야 한다고 하니 그게 무슨 말인지 모르겠네요.

  4. 안녕하세요.
    갑자기 풀로 잡는다는것에 혼돈이 이신것 같은데, 풀로 잡는 다는 것은 나인패치영역인 늘어나는 부분을 검은색(#000000)색으로 모두 그린다고 이해 하시면 될것 같습니다.
    부족한점이나 이해 하시기 힘든부분 있으면 언제 든지 글 남겨주시면 답변드리도록 하겠습니다.
    감사합니다.

  5. 현재 나인패치를 점으로 하였는데,
    가로로 Contents를 넣었을 때는 왜 우측에는 영역이 나타나지 않고 꽉 차게 나오는건가요?
    그리고,, 마지막에 1px로 최대한 작게 변경하라는 것은 남아있는 영역을 말씀하시는건가요??

  6. 안녕하세요. 답변이 좀 늦었습니다.
    제가 질문을 정확하게 이해했는지는 모르겠지만 답변드리자면..
    Contents를 넣었는데 우측에 영역이 없이 꽉차게 나오게 하기위해서는 나인패치 영역을 Contents보다 작게 잡아 주시면 됩니다.
    그리고 최대한 작게 변경하라는 말은 나인패치영역(검은색 영역)을 말하는 것입니다.
    이상입니다.

댓글 남기기