Please Enable JavaScript!
Gon[ Enable JavaScript ]

안드로이드(android) 탭(TabActivity) 3가지 구현하기

안드로이드 개발

안드로이드(android) (TabActivity) 3가지 구현하기

 

개발환경 : JDK 1.5, eclipse-galileo, Android GoogleAPI 2.1, window XP

 

3가지 방법으로 탭구현 예제를 기술할것이다.

첫번째는 탭 컨트롤 화면마다 위젯 컨트롤을 추가하는 것이다. 각 탭별로

화면을 꽉 채울 TextView 가 추가 된다. 추가되는 TextView는 각각 background

색깔이 틀릴것이다. 두번째는 tab 추가시 붙여진 아이디로 어떤 탭이 클릭

되었는지 판단해서 View 를 표현 하는것이다. 세번째는 Activity 화면

전체를 tab 에 추가하는 방법이다.

 

(1) 탭 화면별 컨트롤 추가하기

 

tab.xml


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent">
   	<TextView android:layout_width="fill_parent" 
    	android:layout_height="fill_parent" 
    	android:id="@+id/view1" 
    	android:background="@drawable/blue" 
    	android:text="첫번째 탭 화면" />
    <TextView android:layout_width="fill_parent" 
	    android:layout_height="fill_parent" 
	    android:id="@+id/view2" 
	    android:background="@drawable/red" 
	    android:text="두번째 탭 화면" />
    <TextView android:layout_width="fill_parent" 
	    android:layout_height="fill_parent" 
	    android:id="@+id/view3" 
	    android:background="@drawable/green" 
	    android:text="세번째 탭 화면" />
</FrameLayout>

화면을 구성할 Activity TabActivity 를 상속받아 만든다. 상속받아 만들게 되면

getTabHost() 함수로 TabHost 객체를 리턴받을수 있다. 리턴 받은 TabHost

탭에 대한 데이터를 추가하면 된다. 화면을 구성할 layout xml 은 일반 Activity

처럼 setContentView 로 셋팅할수 없다. LayoutInflater 객체로 생성한다.

 

LayoutInflater.from(this).inflate(R.layout.tabs1,tabHost.getTabContentView(),true);

 

그리고 addTab 함수를 사용해 탭을 추가할수 있다. 추가할때 탭 타이틀명은

newTabSpec 에 넣으면된다. 탭을 구분할 id setIndicator 이며 컨트롤을 추가는

setContent 함수를 사용하면 된다.
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

import com.example.android.apis.R;

public class Tabs1 extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TabHost tabHost = getTabHost();
        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1")
                .setContent(R.id.view1));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab2")
                .setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(R.id.view3));
    }
}

(2) 탭별 아이디로 구분하여 표현하기

 

탭에 아이콘을 추가하는 방법과 탭생성시 추가한 id View 함수를 통해

구분하여 각각 구현하는 예제이다. 아이콘을 추가하는 부분은 setIndicator 함수의

두번째 파라미터로 아이콘 리소스를 넘기면 된다. 이 소스에는 layout 을 구성하는

xml 이 존재하지 않는다. TabHost.TabContentFactory implements 해서

createTabContent 를 오버로딩해서 구현하면 된다. 그리고 넘길 때 View 객체를

반환한다.

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TextView;
import android.view.View;
import com.example.android.apis.R;

public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final TabHost tabHost = getTabHost();
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("tab2")
                .setContent(this));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("tab3")
                .setContent(this));
    }

    /** {@inheritDoc} */
    public View createTabContent(String tag) {
        final TextView tv = new TextView(this);
        if (tag.equals("tab1")) {
        	tv.setText("탭컨텐츠 Indicator tab1 명 : " + tag);
		}else if (tag.equals("tab2")) {
			tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
		}else if (tag.equals("tab3")) {
			tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
		}
        return tv;
    }
}

 (3) Activity Tab 별 화면에 추가하기

 

3번째 방법도 layout xml 이 존재하지 않는다. setContent 함수에 호출할 Activity

클래스를 넣어주면 된다. 화면전환할때 사용하는 Intent 객체를 쓰면 된다.

그리고 3번째 탭에서 Intent.FLAG_ACTIVITY_CLEAR_TOP 를 썻는데 이것은

탭을 클릭할 때 마다 내부에 표현되는 컨텐츠가 리플레쉬 되게 하는 옵션이다.

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class Tabs3 extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("list1")
                .setContent(new Intent(this, ListSampleView1.class)));

        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("list2")
                .setContent(new Intent(this, ListSampleView2.class)));
        
        // 클릭할때 마다 리플레쉬 
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator("destroy")
                .setContent(new Intent(this, Controls2.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
    }
}

예제에서 파라미터로 넘긴 Class 들은 Activity 클래스들이다.

이제 이런 내용들을 기초로 해서 좀더 업그레이드 해보자. 탭에 마우스를 올렸을때, 클릭했을때 

이벤트를 인식해서 색깔을 바꾼다던지 그림을 바꿔서 좀더 고급스러운 탭을 만들어 보자...

Posted by 녹두장군

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 몽몽 2010.08.13 16:51  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 질문이있어서요^ㅊ^
    (3) Activity 를 Tab 별 화면에 추가하기로 각각탭을 생성하여 가각 해당하는 Activity를 연결했는데
    그 Activity가 3개다 동일하게 리스트,이미지.갤러리뷰를 사용하고 출력하는 값만다른데,
    즉 같은 R.layout.xxx과 R.id.imag, R.id.list. R.id.gallery,를 이용하거든요

    요롷고 각각 Activity class를 선언하고 실행시키면
    디폴트에서 다음 tab으로 옮길때

    각각 Activity
    g.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
    에서 AdapterView 가 NullpointException이 일어나는데;;

    동일한 layout과 R.id.xxx를 사용해서 그럴까요?
    각각 Activity마다 layout을 다시 만들어야 할까요? 각각 Activity마다 동일한 layout을 사용하고 출력하는 값만 다른건데;; 음 ..어떤 방법이 있을 까요;;;ㅋㅋ
    도움좀 부탁드립니다.
    허접한 프로그램실력으로 해볼려고 하니...ㅋㅋ View에 관한 기본개념이 없어서 그런것일까요ㅠ_ㅠ
    무한 삽질중입니다.ㅋㅋ
    바쁘시더라도 답변주시면 무지무지 감사드리겠습니다. 꾸벅^ㅁ^

  3. 2010.12.06 15:52  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 안드로메다 2010.12.09 13:50  댓글주소  수정/삭제  댓글쓰기

    찾던 기능이었는데, 좋은 정보 감사드립니다. ^^

  5. 되라쫌! 2010.12.28 10:33  댓글주소  수정/삭제  댓글쓰기

    탭관련 글 너무 잘보고 가요^^

    근데 탭크기가 너무커서 줄여볼려고하는데 지금 진행방법이 3번째 알려주신방법으로 하고 있거든요.

    탭크기 줄이는 방법은 있나요?

    그리고 탭을 오른쪽이나 왼쪽으로 붙이는 방법있으면 알려주셔요~~~!

  6. 2011.02.17 11:40  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  7. baboototo 2011.07.19 03:50  댓글주소  수정/삭제  댓글쓰기

    잘 봤습니다^^

    퍼가요^^

  8. Favicon of http://misoboy.tistory.com misoboy 2011.09.08 15:07  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 좋은 자료 감사합니다.

    실례지만 좋은 자료 참고 겸 퍼가도 될까요 ~ㅎ

    문제가 된다면 삭제하도록 하겠습니다.

  9. 안드로이드 2011.11.10 14:51  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 녹두장군님
    질문이 있습니다.

    저는 TabActivity를 상속을 않하고 XML의 TabHost를 찾아서 TabHost를 추가하고
    setup() 시켜 작업중인데여 TabWidget은 고정시키고 다른탭의 내용(ListView)를
    불러오고 싶은데 어떻게 처리해야되나여?

  10. dadadat 2012.03.24 01:13  댓글주소  수정/삭제  댓글쓰기

    아녕하세요 요즘도 활동하시는지.. 궁금하네요
    다름아니라 다른건 다되는데.. 아이콘이 안들어가지네요.. 왜그럴까요

  11. Favicon of http://www.thesispaperswriting.com/management_thesis.htm Management Thesis topic 2012.04.24 22:00  댓글주소  수정/삭제  댓글쓰기

    very nice blog and I really appreciate your hard work .. and I hope you update your blog daily

  12. 김현승 2012.08.21 22:34  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다 절 살려주신 블로거입니다

  13. 김동주 2013.04.08 17:59  댓글주소  수정/삭제  댓글쓰기

    너무 감사합니다 복받으세요

  14. 김명수 2013.09.13 10:57  댓글주소  수정/삭제  댓글쓰기

    세번째 적용했습니다.
    성공했습니다.
    감사합니다.

  15. 김명수 2013.09.13 18:05  댓글주소  수정/삭제  댓글쓰기

    그런데 탭값(몇번째 탭)을 액티비티에 실어보내고 싶은데 어찌해야할지요
    tabHost.addTab(tabHost.newTabSpec("tab1")
    .setIndicator("list1", getResources().getDrawable(R.drawable.ab00))
    .setContent(
    // new Intent(this, Activity.class)
    Intent intent = new Intent(getApplicationContext(), Activity.class);
    intent.putExtra("tabindex", 1);
    startActivity(intent)
    ));
    이렇게 해보았는데 오류나네요!
    왕초보라 이해해주시고, 고견 바랍니다.

  16. 질문 2013.11.17 20:20  댓글주소  수정/삭제  댓글쓰기

    ㅠ 제가 지금 만들고있는데 계속 final TabHost tabHost = getTabHost();
    여기서 getTabHost가 오류가 나더라구요 왜이런지 알수있을가요? ㅠ

  17. 초보 2014.01.15 16:09  댓글주소  수정/삭제  댓글쓰기

    혹시 탭별로 클릭할때 밑에 하얀색 게이지바 처럼 나오는 색상을 변경하는 소스는 없나요?? 아무리찾아도 없네요ㅠㅠ

  18. 질문있어요 2014.04.14 21:55  댓글주소  수정/삭제  댓글쓰기

    저기 제가 TabHost작업하고 있는데 각각의 TabContent마다 TextView나 Button이나 이것저것 배치할려고 하는데 Drag&Drop을 하면 원하는 위치에 배치되지 않고 고정적인 한자리에만 배치가 되네요;;
    혹시 방법있을까요?(AbsoluteLayout을 사용할려고해도 안되네요)

  19. Favicon of https://action713.tistory.com 예쁜꽃이피었으면 2014.08.26 11:29 신고  댓글주소  수정/삭제  댓글쓰기

    비공개로 담아갈게요~ 많은 도움이 되었습니다

  20. 궁금해요 2015.12.24 20:05  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 혹시 텝뷰를 위나 아래 말고 중간 쯤에 제가 위치를 정해서 넣을 수 있나요????중간에 넣고싶은데

  21. 봄봄 2016.04.17 12:20  댓글주소  수정/삭제  댓글쓰기

    안녕하세요^^ 아직까지 활동 하실지는 모르겠지만, 질문하나 드리겠습니다.

    import com.example.android.apis.R;

    자꾸 위의 코드에서 에러가 떠서 예제를 진행하지 못하겠습니다. ㅠㅠ

    코드는 문제 없는데, 제가 뭔가 설정이나 다른것을 해줘야 할꺼 같은데, 혹시 방법 아시나요?

    제가 사용하는 툴은 안드로이드 스튜드오를 사용하고 있습니다.