낡은 노트

안녕하세요, 

카카오톡이나 마이피플같은 대화형식의 레이아웃을 구성할 때에 보면

말풍선 이미지를 사용합니다. 이 이미지가 안에 텍스트 내용이 많건 적건

깨지지않고 잘 늘어나는데요 . 

나인패치를 이용하면 가능합니다. 

안드로이드 SDK 폴더  > tools 에 가시면 draw9patch 라는 실행 파일이있습니다.

실행하시면 도스 또는 맥사용자면 터미널 창이 뜨는데요 조금 기다리시면 

이런 나인패치 창이 뜹니다. 

도스창을 끄시면 나인패치창도 꺼지니 끄시면 안돼요

이제 여기에 사용할 말풍선 이미지를 드래그로 끌어다 놓습니다. 

제가 사용할 이미지는 이렇게 작은 이미지입니다. 

드래그를 하면 이런 창으로 바뀝니다.

(클릭하시면 크게 보실 수 있습니다)

먼저 하단에 zoom 틀을 조절하여 보기 편하게 조절합니다. 

체크박스 들을 보시면 

Show lock - 이미지 조작을 할 수 없는 영역을 표시

Show content - 해당 내용물(대화텍스트)가 들어갈 영역을 표시

Show patches - 늘어날 영역을 표시

다 체크하는게 보기에 편합니다. 

이제 사용방법인데 일단 이미지가 있는 사각틀을 기준으로 

top, left의 빨간색 화살표 면은 늘어날 부분을 선택하는 면입니다. 

right, bottom 의 파란색영역은 텍스트가 차지할 영역입니다. 

마우스 좌클릭을 이용하여 저 체스판같은 모양의 가장자리 픽셀을 

선택하시면 그림과 같이 검은색 점이 찍힙니다. 이 점은 가장자리 1픽셀만 

선택되고 그 안쪽영역은 선택을 못합니다. 왼쪽면을 보시면 위아래 두 픽셀씩 

선택을 하였는데 이게 늘어날 영역입니다. 사실 한 픽셀만 선택해도 그 픽셀이

쭉늘어나는거라 상관없습니다. 말풍선 꼬리를 제외한 세로로 늘어날 영역을 

클릭 하신 후 이제 가로로 늘어날 부분을 top에서 산택해 줍니다

전체 이미지에서 가로로 늘어날 부분은 말풍선 본체이므로 본체쪽만 한 픽셀정도

선택하여 주심됩니다. 늘어날 부분 선택시 주의사항은 말풍선 가장자리 둥근면을

선택하시면 그 면이 쭉 늘어나 이미지가 깨지게되니 되도록 둥근 모서리는 

선택하지마시고 단면을 선택하셔야 합니다.

right와 bottom 은 내용물이 들어갈 영역입니다. 보시면 아시겠지만 대화창의 

둥근 가장자리까지 선택을 하지않아 자체적으로 알맞게 패딩이 들어가도록

하였습니다. 우측 이미지 세장을 보시면 이미지가 늘어나는 방향에 따라 

늘어난 모양과 보라색영역은 방금 right

와 bottom에서 지정한 영역으로 

글씨가 들어갈 영역입니다. 알맞게 되었으니 컨트롤 + S로 세이브를 합니다.

파일명이 ninepatch.9.png 이런식으로 사이에 9가 끼는데 이게 나인패치 적용

이미지라는 표시입니다. 그대로 리소스폴더에 추가해주시면 됩니다. 

이 이미지를 그대로 보시면 

보시다시피 아까 선택된 검은 선까지 나오는데  이는 실제 안드로이드에서

구동시 표시가 안되므로 신경안쓰셔도 됩니다. 

main.xml 일부인데요 . 이 이미지를 텍스트뷰를 감싸는 리니어에 

배경이미지로 등록하였습니다. 그러고 긴 글을 넣어보면 

이렇게 나인 패치를 적용한 이미지는 아까 right, bottom에서 적용한 영역만

글씨가 들어가고 left,top에서 선택한 영역만 늘어나 깔끔하게 깔린 반면 

기본 이미지를 하면 말풍선 꼬리까지 늘어나는 불상사가..생기게 됩니다 .

앞으로 자주 사용 할 것 같습니다.

감사합니다.

안녕하세요. 

요전번 프로젝트에서 한 화면에서 세가지의 기능을 보여주는 부분이 있었습니다.

처음엔 TabView로 구현하기로 했는데 , 위에 탭들을 보니 디자인이 너무 안이뻐서

방법을 찾아보았는데 제가 찾기론 그게 생각만큼 커스텀이 이쁘게 안되더군요. 

그래서 main.xml에 세가지 기능의 레이아웃을 다 넣고 Relative로 겹쳐놓는 

방법밖에 없었는데 그럼 main.xml이 너무 길고 복잡해져서 조금더 찾아봤더니

include라는 것을 알게되었습니다. 

include는 레이아웃 xml에서 한 영역을 정하고 그 영역에 겹쳐서 보여줄 xml을 

등록하는 기능입니다. 쉽게말해 TabView는 탭별로 액티비티가 등록되어 

액티비티 호출을 하지만 include는 View를 겹쳐놓고 VISIBLE, GONE으로 

제어하는 것입니다. 그 뷰들을 main.xml에 안넣고 각각 .xml 파일로 관리가되니

복잡하지않고 main.xml에서는 세가지 xml이 보여줄 공간 layout만 잡아주면 되는거죠

main.xml

main.xml에 이러한 공간을 잡아줍니다. 그리고 include 태그로 각각의 xml을 

등록해줍니다. 

layout="@layout/추가할 xml 이름"  입니다. id에는 이제 이 뷰를 컨트롤 할 

id를 새로 만들어주시는 거구요.

지금 추가한 공간입니다. 저 녹색 테두리 공간이 includeLayout 공간이고

이제 include 된 세가지 xml을 VISIBLE, GONE 으로 컨트롤 하면 

저 공간 안에서 탭뷰와같은 뷰교체가 이루어집니다.

그리고 위와같이 View 객체를 만들어 각각 뷰에 등록해줍니다. 

여기서의 id는 아까 include 등록할 때의 id입니다. 원래의 .xml 파일 명을 쓰시면 안됩니다.

그리고 

infoView.setVisibility(View.VISIBLE);

mapView.setVisibility(View.GONE);

socialView.setVisibility(View.GONE);

이런식으로 해당 뷰 초기화를 해주어 각각 뷰마다 해당 뷰만 보일 수 있게 걸어놓으면 됩니다.

그럼 이렇게 위에 이미지 버튼마다 해당하는 뷰가 노출되게 됩니다. TabView 처럼요.

이 모든게 저 탭 버튼 때문입니다. 제가 포스팅하면서도 한 번 더 찾아봤는데 

기본 TabView로는 커스텀을 아무리해도 저런 이미지를 씌울수없는것 같습니다. 

저 이쁜 탭버튼 이미지를 사용하기 위해 include를 사용해봤네요. 

저 위 세가지 탭버튼은 이미지뷰입니다. 

예제파일 첨부해놓습니다. 감사합니다

IncludeTest.zip

안녕하세요, 

리스트뷰를 사용하다보면 스크롤 할 때 , 특히 갤럭시 시리즈에 리스트뷰 선택 영역이 

검게 선택 되어 보기 싫을 때가 있습니다. 

그럴 때 리스트뷰에 

 android:cacheColorHint="#00000000" 

를 주시면 선택영역이 표시되지 않습니다.

추가로 선택 항목(row)의 색을 빼거나 바꾸려면 해당 리스트뷰 xml에 

  android:listSelector="#00000000" 

이렇게 추가해 주시면 됩니다.