안드로이드 탭호스트(TabHost)와 탭위젯(TabWidget)
|
▣ 안드로이드 TabHost와 TabWidget |
■ 안드로이드에서 탭 화면을 구성하는 방법을 알아보도록 하겠습니다. TabHost를 이용하는 것인데요. 이것은 보통 탭위젯(TabWidget)과 함께 사용됩니다. 탭호스트는 두개의 영역이 짝을 이루어서 작동하게 되는데요.
하나는 탭 버튼을 표현하는 TabWidget 부분이고, 또 하나는 화면을 구성하는 부분인 FrameLayout 영역입니다.
■ 예제를 하나 만들고 실행한 화면인데요. 그림에서 보면 아래쪽에 세개의 탭 버튼이 있고 버튼에 따라 출력되는 화면이 다르게 됩니다. 안드로이드에서 기본적으로 제공하는 탭 메뉴의 기본스타일은 버튼이 위쪽에 위치하기 되는데요. 예제에서는 아래쪽으로 내렸습니다. 위쪽에 있으면 아무래도 버튼을 클릭할때 손가락에 화면이 가려지기 때문에 아래쪽에 있는게 좀 더 편리할 것입니다. 
■ 다음은 디자인편집기의 "Palette"창에서" TabHost"를 드래그하여 배치한 화면인데요. 배치를 하면 이 객체에 필요한 TabWidget과 FrameLayout, LinearLayout이 자동으로 배치가 됩니다. 이렇게 배치를 하면 기본적으로 버튼에 해당하는 "탭 위젯"이 위쪽에 배치가 되게 됩니다.
■ 안드로이드 개발자 메뉴얼에서는 탭 메뉴를 TabActivity를 기반으로 소개하는데요. 이 예제에서는 일반 Activity 구조에서 탭 메뉴를 구현하는 방법을 알아보게 될것입니다.
■ 위쪽 그림은 이번 예제에서 배치된 레이아웃의 구조 입니다. xml파일을 살펴보도록 하겠습니다.
■ 전체적인 구조는 TabHost와 LinearLayout으로 전체적인 틀을 잡고 있습니다. LinearLayout안에는 소스 내용에서 보듯이 FrameLayout으로 탭 내용을 묶어 주고, 아이디는 "tabcontent"로 하고 있는데요. 아이디를 이렇게 정의해야 탭호스트가 내용 영역으로 감지하게 됩니다. 내용의 영역을 버튼 위쪽에 배치하기 위해서 영역의 크기를 "match_paren"t로 설정해주고, layout_weight를 "1"로 설정해주고 있습니다. 그리고 첫번째 내용 영역을 LinearLayout으로 묶어 주고, 아이디를" tab1"로 하고 있습니다.
■ 같은 방법으로 두번째와 세번째 영역을 설정하고, 버튼을 출력하는 탭위젯을 배치하고 있습니다. 이 객체의 아이디를 "tabs"로 설정하여 TabHost가 이 탭의 버튼을 인식하게 합니다.
■ 다음으로 String.xml 파일에서 각 탭 버튼에 사용할 이름들을 tab1, tab2, tab3으로 정의합니다.
■ 매인 액티비티 파일에서 탭 메뉴를 추가하고, 스타일을 변경하는 구문을 작성하겠습니다.
■ 탭 버튼을 하나씩 생성하고, 추가하고 있는 내용인데요. TabHost.newTabSpec()메서드를 이용해서 객체를 생성하고, 여기에 대입하는 "Tab1"은 생성할 객체에 대한 태그입니다. 그리고 탭 버튼을 클릭할 때 나타나게 할 탭의 내용의 영역을 "R.id.tab1"로 설정하고, 탭의 이름을 String.xml에서 정의한 "R.string.tab1"로 설정해주고 있습니다. 
■ 그리고 TabHost > TabWidget > 탭 버튼의 계층구조를 통해서 3개의 버튼 탭을 찾고 있고, 이것들은 View형태로 받아오게 되는데 이것들에 대한 LayoutParams라는 "크기속성"에서 높이를 "80"으로 변경해주고 있습니다.
■ 위의 내용은 RelativeLayhout으로 묶여 있는 탭 버튼의 객체의 속성을 바꾸는 과정입니다. 탭 버튼 안에 객체의 크기 속성을 변경하기 위해서 RelativeLayout.LayoutParams객체를 생성하여, 가로(MATCH_PARENT)와 세로(WRAP_CONTENT)방향으로 크기를설정하고 있습니다. 첫번째 버튼의 객체를 찾아와서 세로방향으로 중앙에 위치하도록 Gravity를 "CENTER_VERTICAL"로 설정하고, 텍스트뷰를 찾아와서 위에서 정의한 크기로 설정하고 , 왼쪽과 오른쪽의 여백을 "10"으로 설정해서 글자가 많을때 서로 붙어서 출력되지 않게 간격을 주고 있으며, TextView가 버튼 중앙에 위치하도록 Gravity를 "Gravity.CENTER"로 설정하고 있습니다. 두번째와 세번째 버튼도 똑같이 설정해 줍니다.
■ 이제실행화면을 살펴보도록 하겠습니다.
■ 프로젝트를 실행을 해보면 탭호스트의 기본 설정에 따라 첫번째 버튼이 선택된 상태로 나타나고, 첫번째 버튼의 이름은 영역을 넘지 않기 위해서 오른쪾에서 왼쪽으로 움직이게 됩니다. 버튼의 이름이 중앙에 크게 출력이 되며, 두번째와 세번째 버튼을 클릭하게 되면 탭의 내용이 변경이 됩니다.