4. 기본 컨트롤 – 13. TabHost
이번에는 같은 영역에 보여줄 컨텐츠를 선택할 수 있게 하여 일관성있는 화면 구성을 할 수 있는 TabHost를 이용하는 간단한 실습을 합시다.
먼저 activity_main.xml 파일에 컨트롤을 배치합시다.
TabHost는 TabWidget과 FrameLayout으로 구성합니다. TabWidget은 사용자가 원하는 컨텐츠(혹은 기능)를 선택하는 영역이고 FrameLayout은 컨텐츠 영역입니다.
TabWidget의 id 속성은 @android:id/tabs로 지정하고 FrameLayout의 id 속성은 @android:id/tabcontent로 지정합니다.
여기에서는 언어, 기술, 예제 Tab으로 구성할 것입니다. 각 Tab을 선택하였을 때 컨텐츠를 FrameLayout에 배치합니다. 각 컨텐츠는 간단하게 LinearLayout과 그의 자식으로 TextView를 배치하는 것으로 할게요.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ehclub.ex_tabhost.MainActivity"
android:orientation="vertical">
<TabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/th">
<TabWidget
android:id="@android:id/tabs"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:paddingTop="70sp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/tab_view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="30sp"
android:textColor="#0000FF"
android:text="프로그래밍 언어"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_view2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="30sp"
android:textColor="#00FF00"
android:text="프로그래밍 기술"/>
</LinearLayout>
<LinearLayout
android:id="@+id/tab_view3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="30sp"
android:textColor="#FF0000"
android:text="프로그래밍 실습 예제"/>
</LinearLayout>
</FrameLayout>
</TabHost>
</LinearLayout>이제 MainActivity.java 파일에 소스 코드를 편집합시다. onCreate 메서드에 TabHost 개체를 참조하기 위해 findViewById 메서드를 호출한 후에 TabHost의 setup 메서드를 호출합니다.
TabHost th = (TabHost)findViewById(R.id.th);
th.setup();세 개의 Tab을 추가할 것입니다. 이를 위해 세 개의 TabSpec 개체를 생성합니다. 화면에 표시할 부분은 setIndicator 메서드로 정하고 매핑할 컨텐츠는 setContent 메서드로 지정합니다. 그리고 TabHost의 addTab 메서드로 탭을 추가합니다.
TabHost.TabSpec ts1 = th.newTabSpec("Tab1");
ts1.setIndicator("언어");
ts1.setContent(R.id.tab_view1);
th.addTab(ts1);
TabHost.TabSpec ts2 = th.newTabSpec("Tab2");
ts2.setIndicator("기술");
ts2.setContent(R.id.tab_view2);
th.addTab(ts2);
TabHost.TabSpec ts3 = th.newTabSpec("Tab3");
ts3.setIndicator("예제");
ts3.setContent(R.id.tab_view3);
th.addTab(ts3);TabHost의 현재 Tab을 설정할 때는 setCurrentTab메서드를 호출합니다.
th.setCurrentTab(0);다음은 MainActivity.java 파일의 내용입니다.
package com.example.ehclub.ex_tabhost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TabHost;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost th = (TabHost)findViewById(R.id.th);
th.setup();
TabHost.TabSpec ts1 = th.newTabSpec("Tab1");
ts1.setIndicator("언어");
ts1.setContent(R.id.tab_view1);
th.addTab(ts1);
TabHost.TabSpec ts2 = th.newTabSpec("Tab2");
ts2.setIndicator("기술");
ts2.setContent(R.id.tab_view2);
th.addTab(ts2);
TabHost.TabSpec ts3 = th.newTabSpec("Tab3");
ts3.setIndicator("예제");
ts3.setContent(R.id.tab_view3);
th.addTab(ts3);
th.setCurrentTab(0);
}
}언제나휴일 추천 여행 및 산책