안드로이드 tabhost 사용하는 방법

안드로이드 앱 개발에 있어서 tabhost는 많은 활용이 된다.

다른 tab을 누를 때마다 각각의 정보를 노출할 수 있기 때문이다.

사실 지금 내가 알고 있는 각각의 정보를 노출할 수 있는 방법은 크게 나누면 3가지가 있다.

첫 번째로 activity 자체를 변경하는 방법, 두 번째는 한 activity에 여러 fragment를 변경하는 방법, 세 번째로는 tabhost를 사용하여 frame layout 내의 layout을 변경하는 방법이다.

그중에서도 tabhost를 활용하는 방법을 정리하고자 한다.

tab host 사용하는 방법 (xml에서 해야 할 것)

먼저 tab host의 구성을 이해해야한다.

가장 상위 layout으로 tab host가 있고,

그 안에 tab widget과 frame layout을 감싸고 있는 layout이 있다.

tab widget은 눌렀을 때 바뀌기 위한 버튼의 역할을 하며,

frame layout은 widget을 눌렀을 때 바뀌는 화면이 들어갈 위치이다.

tab widget과 frame layout을 linear layout으로 감싸는데

그 이유는 tab host가 frame layout을 상속하고 있기 때문에 frame layout의 겹쳐지는 속성을 가지고 있다. tab widget과 frame layout이 겹쳐지는 것을 방어하기 위해 linear layout으로 감싸 사용한다.

또한 linear layout의 vertical을 사용할지, horizontal을 사용하느냐에 따라 tab의 위치가 상, 하, 좌, 우 어디에 배치될지가 정해질 수 있으며, tab widget의 위치가 frame layout보다 위에 있냐 밑에 있냐에 따라 tab의 위치가 달라진다.

여기서 중요한 것은

tab host (@android:id/tabhost)
tab widget (@android:id/tabs)
frame layout (@android:id/tabcontent)

이렇게 3가지이다. 이 3가지의 id 값은 이미 정해져 있으며 정해진 대로 사용을 했을 때만 제대로 작동한다.

여기까지 하였다면 이제는 frame layout에

내가 원하는 layout을 원하는 수, id를 정해여 넣는다.

그렇다면 xml에서 할 것은 여기까지다.

중간 정리를 하자면 현재까지 코딩이 되었다면 안드로이드 시스템에 알려준 정보는

tab host를 사용할 것이다. (tab host의 구성요소 3가지를 갖추고 정해진 id 값을 주었을 때)
tab으로 변할 화면의 수는 n 개다. (frame layout안에 n개의 layout을 넣고 id 값을 주었을 때)

이렇게 까지 완료된 상태다.

앞으로 해야 할 것은 tab widget의 구역에 n개의 layout만큼 버튼 역할을 하는 tab을 만든 후

각각의 tab에 맞는 layout을 연결해줘야 한다. 이 작업은 activity에서 진행한다.

tab host 사용하는 방법(activity에서 해야 할 것)

public class MainActivity extends TabActivity {
    private TabHost tabHost;
    private TabHost.TabSpec tab1;
    private TabHost.TabSpec tab2;
    private TabHost.TabSpec tab3;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost = getTabHost();

        imageView = new ImageView(this);
        imageView.setImageResource(R.drawable.one);

        tab1 = tabHost.newTabSpec("one");
        tab1.setIndicator(imageView);
        tab1.setContent(R.id.lin1);
        tabHost.addTab(tab1);

        tab2 = tabHost.newTabSpec("two");
        tab2.setIndicator("2");
        tab2.setContent(R.id.lin2);
        tabHost.addTab(tab2);

        tab3 = tabHost.newTabSpec("three");
        tab3.setIndicator("3");
        tab3.setContent(R.id.lin3);
        tabHost.addTab(tab3);
    }
}

코드 해석(setContentView 다음 문장부터 시작, 문단 별로 구분)

TabActivity 클래스의 함수인 getTabHost 함수를 사용하여 TabHost 객체 참조 변수인 tabHost로 받는다. getTabHost에는 xml의 TabHost 뿐만 아니라 TabWidget, FrameLayout의 정보도 함께 받아온다. 또한 id를 따로 찾을 필요 없이 tabHost로 접근할 수 있다.

tabWidget에 들어갈 버튼 안에 image를 삽입하기 위해서 작성한 문장으로 ImageView 객체를 생성하여 미리 res의 drawable directory에 넣어둔 'one'이미지를 imageView에 저장한다.

TabHost의 함수인 newTabSpec 함수는 TabWidget의 버튼을 생성하여 버튼을 누를 경우 나타낼 화면을 정할 수 있는 문장이다. newTabSpec()의 괄호 안에 들어갈 내용은 버튼의 tag로 tag 내용으로 버튼을 구분하게 된다. 간편히 'one'이라고 설정하였다. setIndicator()는 버튼에 나타날 버튼의 이름으로, 문자열 또는 image 객체 등을 정할 수 있다. 윗 문장에서 만들어둔 imageView를 넣어준다. setContent는 버튼에 해당하는 내용을 설정하는 곳으로 linear layout의 id를 넣어줬다.

마지막으로 tabHost에 지금까지 설정한 tab을 저장한다.

윗 문장과 동일함!

3개의 텝이 보이는 것을 확인할 수 있으며 첫 번째 텝에만 imageView를 설정했기 때문에 image가 들어가 있다.

일반적으로 xml에서 id를 주면 findviewbyid로 찾았을 것이다.

하지만 tab host는 정해진 id를 사용하는 만큼 조금 다른 방법을 사용한다.