나인패치(9patch)를 써보자

나인패치(9patch)를 써보자

ㆍ 개발자들도 필수적으로 알아야되는 나인패치를 사용해보도록 

    하겠습니다.

ㆍ 뭐 설명보다는 써보면서 이해하는게 빠를 것 같으므로 

    바로 시작해보겠습니다.

텍스트 입력이 가능한

버튼에 이미지를

background로

입히는 경우가 있습니다.

뭐 이런식으로 들어가겠죠

그런데

버튼에 들어가는

Text가 고정이 아니라

동적으로

변하는 경우면 어떨까요?

만약 텍스트양이 많아지면?

이런식으로

꼴보기 싫게 변합니다

하지만!!

여기서 나인패치를

적용한다면?

다음과 같은

결과물을 얻을수 있습니다.

텍스트의 길이에 상관없이

깔끔한 버튼이미지를

유지할 수 있습니다.

바로 사용법을

알아보도록 하겠습니다.

기본적으로 나인패치는

[sdk]-[tools]-[draw9patch.bat]

에서 실행시킬 수 있습니다.

하지만 요즘은 고맙게도

웹에서 바로 사용할 수 있습니다.

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

자 먼저 사용할

이미지를 준비합니다

(.png)

그리고 사이즈는 보통

1글자 들어갔을때의

사이즈로 잡아주시면 됩니다

저는 포토샵을 못쓰므로

파워포인트에서 png파일을

만들었습니다.

위에 버튼이미지도 파포로..ㅎㅎ.

본론으로

넘어가서

사이트에 접속후

Select 버튼을 눌러서

이미지를 가져옵니다

가져오면

이런식으로

나타납니다.

(파포수준 ㅠ)

자 이렇게

나오면 두가지를

설정해보도록

하겠습니다.

처음에는

CONTENT PADDING

입니다

여기서는 말그대로

글자가 들어갈 위치를

잡아줍니다.

패딩값을 잡아주는거죠

요론식으로 좌표값을

보면서 하면

더 정확하게 만들 수 있답니다.

요기도 22 

슉슉

22 4콤보 완료

자 두번째는

STRETCH REGIONS

입니다

여기서는 늘려줄 부분을

설정해줍니다.

아 이부분은

도형이 너무 쉬워서.

음 애매하지만..

저 검정색 십자가부분이

늘어나는 부분입니다.

가로든 세로든 증가할때

저 빨간색부분이 길어지는 겁니다

급하게

다른 도형들 하나 예를 들면

이런식으로 위와 비슷하게

STRETCH REGIONS

를 잡아주게 되면

저 아래로 내려오는 뾰족한

부분은 크기가 안변한답니다

이런 식의 결과를

얻을 수 있죠

만약 범위를

이렇게 잡는다면?

아래쪽 가로는

뾰족한 오른쪽 부분

위쪽 가로는 

일자

왼쪽,오른쪽 세로는

색깔이 섞이고도 

해괴한 모양으로

늘어날 것 같군요.

어느 정도 이해가

가실거라..생각하고 

마무리를 하자면

범위를 다 정하고 나면

압축형태로

다운을 받습니다

압축을 풀고

나면

확장자도 특이한

9.png 파일이 생성됩니다

여기서 .9 지우면 

안됩니다.

.9가 있어야 나인패치

효과가 적용됩니다

이제 복사를 해서

프로젝트 drawable

폴더에 넣어서 쓰시면

완료~