안드로이드 스튜디오 독학하기 9일째

안녕하세요?

이번 포스팅에서는 9 patch라는 것을 실습해 보고자 합니다.

본격적인 포스팅시작에 앞서서 9 patch (나인패치)라는 것에 대해서 설명을 해야 하는데요, 일단 [하루만에 배우는 안드로이드 앱 만들기]에서는 이미지의 사이즈 변동에도 깨지지 않고 자동으로 조절해 주는 기능이라고 합니다. 

우선 이 프로젝트의 실습을 위해서 저는 앱 이름을 [Sample_nine_patch]라고 지어서, 새로이 만들었습니다. 그리고 나서 미리 만들어 둔 버튼을 준비합니다.

옆의 그림에 보이는 것이 나인패치를 위해서 준비한 것입니다. 우선 원본으로서 보여질 이미지로 button01.jpg를 준비했으며, 나인패치를 위해서 늘어날 부분을 검은색 테두리를 쳐 주어야 한다고 합니다. 그래서 그런 이미지로 button02.jpg를 준비했으며, 이것만으로는 안되고, 외곽으로 1픽셀 밖으로 나와서 검은색 테두리를 그려놓고, 파일 이름에 .9을 붙이는 것으로 만드는 나인패치 파일이 있다고 합니다.

button03.9.jpg를 만들어서 나인패치 파일까지 만드는 데 성공하였습니다. 이제 이 3개의 그림파일을 ctrl + V를 눌러서 복사한 다음, 안드로이드 스튜디오로 갑니다.

package explorer에서 res 폴더 아래에 drawable이라는 폴더가 있습니다. 여기다가 붙여넣기를 해서 준비한 그림파일 3개(button01.jpg, button02.jpg, button03.9.jpg)를 drawable 폴더 아래로 복사해 놓습니다.

위 스크린샷에 보이는 것 처럼 drawable폴더 아래에 그림 파일 3개가 추가가 된 것을 볼 수가 있습니다. 이제 다음 단계로 넘어가도록 합니다. 

언제나 처럼 activity_main.xml에서 design탭에서 먼저 보이는 Hello World! 라는 텍스트 박스를 제거하고, 옆에 있는 palette에서 버튼 컴포넌트 하나를 끌어와서 놓습니다. 그리고 버튼을 클릭한 상태에서 옆에 있는 property윈도우로 갑니다.

여기서 멀리 헤멜 필요없이, show all properties를 클릭해서 모든 속성을 개방하도록 합니다. 그 다음에는 background 항목으로 가서 좀 전에 drawable폴더에 추가했는 그림파일을 고를 수 있는 것을 볼 수 있습니다. 저는 첫번째 버튼에는 button01.jpg를 추가했습니다.

버튼에다가는 텍스트 항목에 [원본]이라고 한글로 타이핑했지만, 글자가 깨져서 나오는 것이 보입니다. 위 스크린샷에서 보시다 시피, 버튼의 모양을 미리 그려놓은 모양대로 바꾸는 것은 멋지게 성공을 하였습니다. 이제 이 버튼을 복사해서, 가로로 길이를 늘려서 꽉 채워 보도록 하겠습니다.

일단 파워포인트에서 작업할 때와는 다르게, 모서리가 둥근 사각형의 모서리가 무언가 왜곡되는 것이 보일 것입니다. 여기서는 단순히 늘려서 이런 문제가 생겼지만, 실제 화면의 크기가 다른 스마트폰을 사용할 경우에는 단순히 화면의 사이즈 문제로 버튼이 늘어나서 모서리가 깨지는 문제가 발생할 수 있다는 것입니다.

그래서 나인 패치를 하는 이유이고, 이번에는 나인패치가 적용이 잘 되는지 알아보기 위해서 버튼을 또 추가한 다음에, background를 button03.9.jpg를 지정하도록 합니다.

3번째 버튼의 background를 properties 윈도우에서 손쉽게 지정하는 스크린샷입니다. 책에서는 일일이 이걸 activity_main.xml에서 text항목으로 가서 일일히 타이핑하였지만, 그렇게 할 것도 없이 properties 윈도우에서 간단하게 지정하는 것이 가능하다는 생각이 듭니다.

비록 나인패치가 적용이 되었지만, 역시나 이미지가 깨어진 것을 볼 수 있었습니다. 여기서 보이기만 이런 것인지, 여전히 이미지가 깨어져서 나옵니다.

일단 안드로이드 폰 상에서 확인을 하기 위해서 USB 케이블로 연결해서 구동해 보려고 했습니다만, 에러가 발생하였습니다. 어디가 문제인지 자세히 들여다 보니, 그림파일 형식을 jpg가 아니라 png로 지정해야 하는 것입니다!

그래서 다시 그림파일의 형식을 png파일로 바꾼다음 다시 버튼의 background로 지정하는  식으로 다시금 만들었습니다. 

어찌된 것인지 이번에는 약간의 차이만 나올 뿐, 그나지 큰 차이가 없다는 느낌이 들었고, USB 케이블로 연결된 스마트폰으로 실험을 해보려 했지만, 에러가 발생해서 실패하였습니다.

어디가 문제인지 잘 모르겠지만, 다음 포스팅에서는 좀 자료를 모아서 이 에러를 해결한 다음에 이에 관련된 포스팅을 올리도록 하겠습니다.