#9 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : 탭 화면 구현 - TabHost

#1 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 환경 구축

#2 안드로이드 스튜디오로 안드로이드 앱 만들기 - 개발 디렉토리와 파일 구조

#3 안드로이드 스튜디오로 안드로이드 앱 만들기 - 액티비티(Activity) 뷰(View) 구조

#4 안드로이드 스튜디오로 안드로이드 앱 만들기 - UI 작성 방법 : 자바코드 VS 레이아웃 XML

#5 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 기초 속성

#6 안드로이드 스튜디오로 안드로이드 앱 만들기 - 뷰(View)의 계층구조

#7 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : LinearLayout편

#8 안드로이드 스튜디오로 안드로이드 앱 만들기 - 레이아웃(Layout)을 활용한 다양한 뷰(View) 배치 : RelativeLayout편

안드로이드 UI 프로그램에서 가장 많이 제공하는 화면 중 하나가 탭(Tab) 화면이다. 탭 화면은 화면 여러 개를 준비한 다음. 사용자가 버튼을 누를 때 버튼과 연결된 화면을 하나씩 보여주는 형태이다. 이런 탭 화면을 쉽게 작성할 수 있는 TabHost라는 클래스가 있다.

TabHost 구조

TabHost로 탭 화면을 만들려면 우선 TabHost의 기본 구조를 알아야한다. TabHost로 탭 화면을 구성하면 TabHost 하위에는 꼭 TabWidget과 FrameLayout으로 구성해야 한다.

■ TabHost : 탭 전체에 영역을 지칭

■ TabWidget : 탭 버튼이 들어갈 영역을 지칭

■ FrameLayout : 탭 버튼 클릭 시 나올 화면 영역을 지칭

탭 화면을 만들려면 전체 영역을 TabHost로 감싸야 하며, 그 안에 꼭 탭 화면 전환용 버튼이 들어갈 영역인 TabWidget과 버튼이 눌렸을 대 보일 화면인 FrameLayout을 지정해야 한다. 

TabHost를 위한 레이아웃 XML

탭 화면을 만들려면 우선 레이아웃 XML 파일에 TabHost 구조대로 화면을 구성해야 한다.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/host"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
 
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"></TabWidget>
 
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
 
            <TextView
                android:id="@+id/tab_content1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Tab 1"
                android:textSize="30dp"
                android:textStyle="bold"
                android:gravity="center"/>
 
            <TextView
                android:id="@+id/tab_content2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Tab 2"
                android:textSize="30dp"
                android:textStyle="bold"
                android:gravity="center"/>
 
            <TextView
                android:id="@+id/tab_content3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Tab 3"
                android:textSize="30dp"
                android:textStyle="bold"
                android:gravity="center"/>
 
        </FrameLayout>
 
    </LinearLayout>
 
</TabHost>
 

전체 화면 영역은 TabHost 클래스를 이용하여 지정하며, 그 아래에 LinearLayout을 포함하였다. LinearLayout은 탭 버튼과 본문을 어떻게 나열할지를 표현한다. 보통은 버튼과 본문을 위아래로 나열하는게 일반적이다. 물론 이 부분은 LinearLayout이 아닌 다른 레이아웃 클래스를 이용해도 된다.

LinearLayout 아래 TabWidget을 포함하여 탭 버튼이 들어갈 자리를 지정하였으며, 탭 본문이 들어갈 자리는 FrameLayout을 이용하여 지정하였다. 여기서 중요한 점은 TabHost 하위에는 무조건 탭 버튼을 위해 TabWidget, 탭 본문을 위해 FrameLayout을 선언해야 한다. 본문은 FrameLayout이 아닌 다른 레이아웃 클래스는 사용 할 수 없다.

또한, TabWidget은 id 값이 반드시 android:id="@android:id/tabs"로 선언되어 있어야 하며, 탭 본문이 들어갈 FrameLayout의 id 값도 반드시 android:id="@android:id/tabcontent"로 선언되야 한다.

FrameLayout 하위에 TextView가 3개 선언되어 있는데, 한 순간에 하나만 나오게 되며, 3개를 추가한 의도는 탭 버튼 3개짜리 화면을 만들고자 하는 의도다.

TabHost를 위한 자바 코드

탭 화면을 완성하려면 레이아웃 XML뿐 아니라, 자바 코드에도 작업을 해줘야한다. 코드에서 각 탭 버튼과 버튼이  눌렸을 때 나올 본문 내용을 구성해야 한다. 그러나 사용자가 탭 버튼을 클릭했을 때 어느화면이 나올지를 지정하는 코드는 작성하지 않아도 된다. 탭 버튼과 버튼에 따라 나타낼 화면을 TabSpec 클래스로 결합하여 추가하는 방식이다. 즉,  TabSpec 안에 버튼과 본분이 결합되어 있어서 버튼을 누르면 해당 버튼과 결합된 본문이 나오는 구조이다.

결국 TabHost에 TabSpec이 3개 추가된 구조라고 볼 수 있다. 각 TabSpec에는 버튼인 Indicator와 본문인 TabContent가 결합된 구조다.

import android.os.Bundle;
import android.support.v4.content.res.ResourcesCompat;
import android.support.v7.app.AppCompatActivity;
import android.widget.TabHost;
 
 
public class Lab4_3Activity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lab4_3);
 
        TabHost host=(TabHost)findViewById(R.id.host);
        host.setup();
 
        TabHost.TabSpec spec = host.newTabSpec("tab1");
        spec.setIndicator(null, ResourcesCompat.getDrawable(getResources(), R.drawable.tab_icon1, null));
        spec.setContent(R.id.tab_content1);
        host.addTab(spec);
 
 
        spec = host.newTabSpec("tab2");
        spec.setIndicator(null, ResourcesCompat.getDrawable(getResources(), R.drawable.tab_icon2, null));
        spec.setContent(R.id.tab_content2);
        host.addTab(spec);
 
 
        spec = host.newTabSpec("tab3");
        spec.setIndicator(null, ResourcesCompat.getDrawable(getResources(), R.drawable.tab_icon3, null));
        spec.setContent(R.id.tab_content3);
        host.addTab(spec);
    }
}

우선 TabHost를 레이아웃 XML에서 획득하여 setup() 함수로 초기화한다. 탭 하나를 구성하기 위해 TabSpec을 newTabSpec() 함수로 생성해준다. newTabSpec() 함수의 매개변수를 "tab1"로 지정하였는데, 이 문자열은 개발자가 지정한 임의의 문자열이며, 각 탭 화면을 코드에서 식별할 때 사용된다.

그리고 하나의 TabSpec에 탭 버튼을 구성하고자 setIndicator() 함수를 이용하였으며, 탭 버튼은 문자열이나 이미지로 구성할 수있다. 또한, TabSpec의 본문을 지정하고자 setContent() 함수를 이용했다. 이렇게 만들어진 TabSpec을 최종 TabHost에 host.addTab() 함수로 포함해준다.

탭 버튼을 이미지로 구성하기 위해서는 res/drawable 파일에 이미지 파일을 넣어두어야 한다.

이렇게 완성.