안드로이드] TabView보다 이쁜 탭이 가능한 include 사용하기

http://muzesong.tistory.com/70

안녕하세요. 

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

처음엔 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