본문 바로가기
구글과인터넷/안드로이드

안드로이드 탭 구현 관련

ttahha 2012. 12. 12. 18:04

안드로이드 플렛폼에서 Tab은 다음과 같은 3가지 요소로 이루어 진다.





  • TabHost: TabWidget(Tab 버튼 모음)과 FrameLayout을 포함하는 전체 컨테이너
  • TabWidget: Tab 버튼 모음을 나타내며 각각의 Tab 버튼은 text + icon (옵션)으로 이루어 진다.
  • FrameLayout: 선택된 Tab에 따른 실제 내용(Tab content)를 위한 컨테이너. 모든 Tab content는 FrameLayout의 child임.

 

 

위에 설명한 3개의 component를 사용해 정상적으로 작동하는 Tab을 구성하기 위해서는 다음과 같은 몇 가지 숙지해야 할 사항들이 있다.

  • TabWidget의 id와 최소높이: TabWidget의 id는 항상 "@android:id/tabs"로 설정 하여야 한다. 또 TabWidget의 최소 높이는 약 62px이다. 다시 말하면 Tab 버튼은 text + icon(옵션)으로 구성되는데 text로만 구성된 Tab 버튼도 무조건 62px정도의 높이를 차지한다. 물론 사용하는 icon에 따라 더 커질 수는 있다. (너무 작은 tab은 조작이 힘들어서가 아닐까 싶다)
  • FrameLayout의 Padding: TabHost는 FrameLayout에서 상속되며 FrameLayout에서 child view들은 어떤 layout을 사용하던 FrameLayout의 좌측 상단에 배치된다(여러 child view가 있다면 제일 마지막에 배치된 child view가 나머지 view를 가려버림). 그래서 FrameLayout이 TabHost내부에 배치될 때 TabWidget을 고려하지 않고 무조건 TabHost의 최 상단에 배치 되어 TabWidget을 가려버린다. 그럼으로 사용된 TabWidget의 높이만큼 FrameLayout위쪽에 padding을 주어야 한다. (TabWidget의 최소 높이가 62px임으로 최소 padding도 62px)
  • TabActivity 사용: TabActivity상속 받아 Activity를 구현 할 때(Tab 자체가 Activity의 main 화면일 때) TabHost의 id는 항상 "@android:id/tabhost"로 설정 하여야 한다.

 

 

추가로, Java 코드에서 XML에 선언된 여러 컴포넌트를 연결해서 정상적으로 작동하는 Tab view를 만들려면

TabHost객체의 내부객체인 TabHost.TabSpec이라는 Tab building helper 객체를 이용하여야 한다.

TabHost에 새로운 Tab을 추가하는 것은 다음과 같이 5단계로 나뉜다.

  • TabHost setup 시작: findViewById 메소드를 통해 TabHost인스턴스를 얻은 후 TabHost인스턴스에 Tab을 추가하기 위해서는 반드시 TabHost인스턴스.setup() 메소드 먼저 실행 해야함. (단, TabActivity를 사용해 구현된 Tab은 setup 필요 없음)
  • helper 생성: TabHost인스턴스.newTabSpec(String형 tag이름)를 사용해 helper 객체를 생성 (추후 생성시 지정한 'tag 이름'으로 다시 소환 할 수 있음.)
  • Tab button의 text 지정: helper인스턴스.setIndicator(String / String+Icon / View)를 사용해 Tab Button의 형태를 지정.
  • Tab content 지정: helper인스턴스.setContent(View ID / TabContentFactory / Intent)를 사용해 Tab content를 지정. (TabContentFactory와 Intent는 추후 설명)
  • TabHost에 Tab객체 등록: TabHost인스턴스.addTab(helper인스턴스)로 위에서 설정 완료(tag, indicator, content)된 Tab Building helper를 TabHost에 등록.

 

 

Static한 Tab 구현

그럼 지금까지 정리한 것을 바탕으로 static(compile-time시 형태가 결정되는) 한 Tab의 구현 예제를 보자.

Static Tab 예제 (main.xml)

접기

01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    android:orientation="vertical"
04    android:layout_width="fill_parent"
05    android:layout_height="fill_parent" >
06    <TabHost
07        android:id="@+id/tabHost"
08        android:layout_width="fill_parent"
09        android:layout_height="fill_parent" >
10        <TabWidget
11            android:id="@android:id/tabs"
12            android:layout_width="fill_parent"
13            android:layout_height="wrap_content" />
14        <FrameLayout
15            android:id="@android:id/tabcontent"
16            android:layout_width="fill_parent"
17            android:layout_height="fill_parent"
18            android:paddingTop="69px" >
19            <LinearLayout
20                android:id="@+id/layout"
21                android:orientation="vertical"
22                android:layout_width="fill_parent"
23                android:layout_height="fill_parent" >
24                <AnalogClock
25                    android:id="@+id/analogClock"
26                    android:layout_width="wrap_content"
27                    android:layout_height="wrap_content"
28                    android:layout_gravity="center_horizontal" />
29                <DigitalClock
30                    android:id="@+id/digitalClock"
31                    android:layout_width="wrap_content"
32                    android:layout_height="wrap_content"
33                    android:layout_gravity="center_horizontal" />
34            </LinearLayout>
35            <Button
36                android:id="@+id/theButton"
37                android:layout_width="fill_parent"
38                android:layout_height="fill_parent"
39                android:text="The Button.\nClick me!" />
40        </FrameLayout>
41    </TabHost>
42</LinearLayout>

접기

 

 

Static Tab 예제 (MyTab.java)

접기

01package com.holim.test;
02 
03import android.app.Activity;
04import android.os.Bundle;
05import android.widget.TabHost;
06 
07public class MyTab extends Activity {
08    /** Called when the activity is first created. */
09    @Override
10    public void onCreate(Bundle savedInstanceState) {
11        super.onCreate(savedInstanceState);
12        setContentView(R.layout.main);
13         
14        TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
15         
16        // findViewById를 이용해 TabHost인스턴스를 얻은경우 꼭 호출 필요
17        tabHost.setup();
18         
19        // Tab builder 객체
20        TabHost.TabSpec spec;
21           
22        // Tab 01 세팅 & 등록
23        spec = tabHost.newTabSpec("Tab 00"); // Tab Builder 객체 생성
24        spec.setIndicator("Clock");         // Tab 제목
25        spec.setContent(R.id.layout);       // Tab 내용
26        tabHost.addTab(spec);               // Tab 등록
27         
28        // Tab 02 세팅 & 등록
29        spec = tabHost.newTabSpec("Tab 01"); // Tab Builder 객체 생성
30        spec.setIndicator("Button");        // Tab 제목
31        spec.setContent(R.id.theButton);    // Tab 내용
32        tabHost.addTab(spec);               // Tab 등록
33         
34        // 처음 등록된 Tab을 보여줌.
35        tabHost.setCurrentTab(0);
36    }
37}

접기

 

 

다음은 실행 화면이다.












 

 

위에서 본 예제는 Complie-Time에 Tab view의 형태가 결정된다.

하지만 경우에 따라서 run-time에 tab이 추가로 생성되어야 할 경우도 있다.

이런 경우에는 TabHost.TabContentFactory라는 TabHost의 내부객체를 사용한다.

TabContentFactory 객체는 View createTabContent(String tag)라는 abstract callback method를 포함하며,

TabContentFactory 객체 생성 시 자동으로 호출되어 결과로 Tab content를 구성하는 View를 return한다.

 

 

Dynamic 한 Tab 구현

다음은 dynamic(run-time시 동적으로 형태가 변하는)한 Tab의 구현 예제 이다.

Static Tab 예제 (main.xml)

접기

01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    android:orientation="vertical"
04    android:layout_width="fill_parent"
05    android:layout_height="fill_parent" >
06    <TabHost
07        android:id="@+id/tabHost"
08        android:layout_width="fill_parent"
09        android:layout_height="fill_parent"
10        android:text="@string/hello">
11        <TabWidget
12            android:id="@android:id/tabs"
13            android:layout_width="fill_parent"
14            android:layout_height="wrap_content" />
15        <FrameLayout
16            android:id="@android:id/tabcontent"
17            android:layout_width="fill_parent"
18            android:layout_height="fill_parent"
19            android:paddingTop="62px" >
20            <Button
21                android:id="@+id/btnAddTab"
22                android:layout_width="wrap_content"
23                android:layout_height="wrap_content"
24                android:layout_gravity="center_vertical|center_horizontal"
25                android:text="Click me to add a new Tab"
26            />
27        </FrameLayout>
28    </TabHost>
29</LinearLayout>

접기

 

 

Static Tab 예제 (MyDynamicTab.java)

접기

01package com.holim.test;
02 
03import android.app.Activity;
04import android.os.Bundle;
05import android.view.View;
06import android.view.View.OnClickListener;
07import android.widget.AnalogClock;
08import android.widget.Button;
09import android.widget.TabHost;
10 
11public class MyDynamicTab extends Activity {
12    /** Called when the activity is first created. */
13    @Override
14    public void onCreate(Bundle savedInstanceState) {
15        super.onCreate(savedInstanceState);
16        setContentView(R.layout.main);
17         
18        final TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
19         
20        tabHost.setup();
21         
22        // 'Tab 추가 버튼'이 달린 첫 Tab
23        TabHost.TabSpec spec = tabHost.newTabSpec("Tab 00");
24        spec.setIndicator("First Tab");
25        spec.setContent(R.id.btnAddTab);
26        tabHost.addTab(spec);
27         
28        tabHost.setCurrentTab(0);
29         
30        Button btnAddTab = (Button)findViewById(R.id.btnAddTab);
31         
32        // 버튼 클릭 이밴트 리스너
33        btnAddTab.setOnClickListener(new OnClickListener() {
34            @Override
35            public void onClick(View view) {
36                // Tab Builder 생성
37                TabHost.TabSpec spec = tabHost.newTabSpec("New Tab");
38                 
39                // setContent (analog 시계 생성하는 TabContentFactory 지정)
40                spec.setContent(new TabHost.TabContentFactory() {
41                    @Override
42                    // TabContentFactory 생성시 호출되는 CallBack
43                    public View createTabContent(String tag) {
44                        return (new AnalogClock(MyDynamicTab.this));
45                    }
46                });
47                 
48                // 추가되는 Tab의 Text를 Clock으로 표시
49                spec.setIndicator("Clock");
50                 
51                // tabHost에 새로운 tab 더함
52                tabHost.addTab(spec);
53            }
54        });
55    }
56}

 

 

다음은 실행 화면이다. 첫 Tab의 버튼을 누르면 AnalogClock이 표시되는 Tab의 추가된다.











////////////////////////////////////////////////////////////////////////////////////////////////////////
출처:  http://mainia.tistory.com/550 

안드로이드(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


01<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
02    android:layout_width="fill_parent"
03    android:layout_height="fill_parent">
04    <TextView android:layout_width="fill_parent"
05        android:layout_height="fill_parent"
06        android:id="@+id/view1"
07        android:background="@drawable/blue"
08        android:text="첫번째 탭 화면" />
09    <TextView android:layout_width="fill_parent"
10        android:layout_height="fill_parent"
11        android:id="@+id/view2"
12        android:background="@drawable/red"
13        android:text="두번째 탭 화면" />
14    <TextView android:layout_width="fill_parent"
15        android:layout_height="fill_parent"
16        android:id="@+id/view3"
17        android:background="@drawable/green"
18        android:text="세번째 탭 화면" />
19</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 함수를 사용하면 된다.
01import android.app.TabActivity;
02import android.os.Bundle;
03import android.view.LayoutInflater;
04import android.widget.TabHost;
05 
06import com.example.android.apis.R;
07 
08public class Tabs1 extends TabActivity {
09 
10    @Override
11    protected void onCreate(Bundle savedInstanceState) {
12        super.onCreate(savedInstanceState);
13        TabHost tabHost = getTabHost();
14        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);
15 
16        tabHost.addTab(tabHost.newTabSpec("tab1")
17                .setIndicator("tab1")
18                .setContent(R.id.view1));
19        tabHost.addTab(tabHost.newTabSpec("tab3")
20                .setIndicator("tab2")
21                .setContent(R.id.view2));
22        tabHost.addTab(tabHost.newTabSpec("tab3")
23                .setIndicator("tab3")
24                .setContent(R.id.view3));
25    }
26}





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

 

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

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

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

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

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

반환한다.

01import android.app.TabActivity;
02import android.os.Bundle;
03import android.widget.TabHost;
04import android.widget.TextView;
05import android.view.View;
06import com.example.android.apis.R;
07 
08public class Tabs2 extends TabActivity implements TabHost.TabContentFactory {
09 
10    @Override
11    protected void onCreate(Bundle savedInstanceState) {
12        super.onCreate(savedInstanceState);
13 
14        final TabHost tabHost = getTabHost();
15        tabHost.addTab(tabHost.newTabSpec("tab1")
16                .setIndicator("tab1", getResources().getDrawable(R.drawable.star_big_on))
17                .setContent(this));
18        tabHost.addTab(tabHost.newTabSpec("tab2")
19                .setIndicator("tab2")
20                .setContent(this));
21        tabHost.addTab(tabHost.newTabSpec("tab3")
22                .setIndicator("tab3")
23                .setContent(this));
24    }
25 
26    /** {@inheritDoc} */
27    public View createTabContent(String tag) {
28        final TextView tv = new TextView(this);
29        if (tag.equals("tab1")) {
30            tv.setText("탭컨텐츠 Indicator tab1 명 : " + tag);
31        }else if (tag.equals("tab2")) {
32            tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
33        }else if (tag.equals("tab3")) {
34            tv.setText("탭컨텐츠 Indicator tab2 명 : " + tag);
35        }
36        return tv;
37    }
38}




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

 

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

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

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

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

01import android.app.TabActivity;
02import android.os.Bundle;
03import android.widget.TabHost;
04import android.content.Intent;
05 
06public class Tabs3 extends TabActivity {
07 
08    @Override
09    protected void onCreate(Bundle savedInstanceState) {
10        super.onCreate(savedInstanceState);
11 
12        final TabHost tabHost = getTabHost();
13 
14        tabHost.addTab(tabHost.newTabSpec("tab1")
15                .setIndicator("list1")
16                .setContent(new Intent(this, ListSampleView1.class)));
17 
18        tabHost.addTab(tabHost.newTabSpec("tab2")
19                .setIndicator("list2")
20                .setContent(new Intent(this, ListSampleView2.class)));
21         
22        // 클릭할때 마다 리플레쉬
23        tabHost.addTab(tabHost.newTabSpec("tab3")
24                .setIndicator("destroy")
25                .setContent(new Intent(this, Controls2.class)
26                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
27    }
28}

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





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

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


  1. 탭에 관해 이렇게 잘 정리된 곳은 못본것 같네요~ 잘 보고 갑니다.

  2. 마틴2010/06/30 09:31   

    좋은 내용의 글 잘 보고 갑니다.
    검색을 하다보니 탭바를 화면 아래쪽에 두는 것은 불가능하다고 하던데 다른 대안으로 어떤게 있을지 조언 부탁드려 봅니다.

  3. 데브로이2010/08/09 03:33   

    녹두장군님 정말 감사합니다 .덕분에 큰도움이 댓구요 

    업그레이드 해서 리스트를 클릭했을때 

    탭은 그대로 보이면서 내용부분 화면만 바뀌게 하는 방법은 없을까요?

    제가 하다 막혀서요 ..ㅠㅠ

    조언 부탁드리겠습니다.
    감사하겟습니다..

  4. 성성주2010/08/12 00:07   

    녹두장군님 질문 올립니다.

    LayoutInflater inflater1 = getLayoutInflater();
    View mTablayout01 = inflater1.inflate(R.layout.tap1_1,(ViewGroup)findViewById(R.drawable.tap1_1));

    LayoutInflater inflater2 = getLayoutInflater();
    View mTablayout02 = inflater2.inflate(R.layout.tap2_2,(ViewGroup)findViewById(R.drawable.tap2_2));

    LayoutInflater inflater3 = getLayoutInflater();
    View mTablayout03 = inflater3.inflate(R.layout.tap3_3,(ViewGroup)findViewById(R.drawable.tap3_3));


    mTabHost.addTab(mTabHost.newTabSpec("tab_test1")
    .setIndicator(mTablayout01)
    .setContent(R.id.view1)
    );
    mTabHost.addTab(mTabHost.newTabSpec("tab_test2")
    .setIndicator(mTablayout02)
    .setContent(R.id.view2)
    );
    mTabHost.addTab(mTabHost.newTabSpec("tab_test_3")
    .setIndicator(mTablayout03)
    .setContent(new Intent(this,maps.class).addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))

    ); 

    이런식으로 넘기고 탭설정하고

    viewTab1 = findViewById(R.id.ViewTapImage1_1);
    viewTab2 = findViewById(R.id.ViewTapImage1_2);
    viewTab3 = findViewById(R.id.view3);

    if(tabId.equals("tab_test1"))
    {
    viewTab2.setBackgroundColor(Color.BLACK);
    }
    else if(tabId.equals("tab_test2"))
    {

    viewTab2.setBackgroundColor(Color.BLACK);

    }
    else
    {
    viewTab3.setBackgroundColor(Color.BLACK);
    }

    기존 xml파일을 백그라운드 되어있던 것을 각텝을 선택했을때 그 탭의 백그라운드 색을 바꾸고 싶은데 잘 안되네요....
    어떻게해야하나요..?

  5. carphatia2010/08/13 16:30   

    녹두장군님, 강의 잘보고 있습니다.
    왕초보인 저에게 아주 큰 도움이 되고있어요 ^-^

    질문이 있는데요.
    탭뷰에 가로 스크롤 액티비티를 생성했는데,
    가로 스크롤 액티비티만 생성해서 테스트 했을 땐 문제없이 실행이 됐는데
    탭뷰에 추가하니까 터치이벤트가 제대로 먹히질 않아요... 어찌해야 할까요 ㅠㅠ?

    자세히 설명하자면
    스크롤을 옮겼을때, 첫번째 페이지의 일정비율이 넘어가면 두번째 페이지로 자동넘김이 되야하는데
    자동넘김이 되지않고 스크롤을 움직인 만큼만 페이지가 이동하여서 두 페이지가 같이 보이게됩니다.
    (글이 어수선해서 이해가 되셨을런지 ㅠㅠ)

  6. 몽몽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에 관한 기본개념이 없어서 그런것일까요ㅠ_ㅠ
    무한 삽질중입니다.ㅋㅋ
    바쁘시더라도 답변주시면 무지무지 감사드리겠습니다. 꾸벅^ㅁ^

  7. 2010/12/06 15:52   

    비밀댓글입니다

    • 녹두장군2010/12/13 15:01  

      찾아보니 프로젝트가 없군요..
      예제 형태로 만든거라 작성후 지웠나 봅니다.
      비슷한 프로젝트가 있으면 보내드릴께요

  8. 안드로메다2010/12/09 13:50   

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

  9. 되라쫌!2010/12/28 10:33   

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

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

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

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

  10. 2011/02/17 11:40   

    비밀댓글입니다

  11. 안드로이드2011/04/01 11:34   

    package exam.tabtest;

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


    public class tabtest 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, one.class))); 
    tabHost.addTab(tabHost.newTabSpec("tab2") 
    .setIndicator("list2") 
    .setContent(new Intent(this, gesan.class))); 
    tabHost.addTab(tabHost.newTabSpec("tab3") 
    .setIndicator("destroy") 
    .setContent(new Intent(this, number.class))); 

    } 

    } 

    제가 이런 식으로 코딩해서 다른 엑티비티 클레스를 탭화면마다 띄우고 싶어서 해봤는데
    실행을 하면 이상하게 자꾸 The application tabtest(process exam.tabtest) has stopped unexpectedly. Please try again. 이렇게 뜨네요.
    DDMS에도
    FATAL EXCEPTION: main
    java.lang.RuntimeException: Unable to start activity ComponentInfo(exam.tabtest/exam.tabtest.tabtest}:.................
    .....................

    쭈욱 이렇게 에러가 나네요... 실행은되는데 에뮬레이터에서 에러가 자꾸나구요.. ㅜㅜ 어떻게해야될지
    모르겠네요.

    답변관련해서 메일주실려면 dream3131@nate.com <<-- 메일주시면 감사하겠습니다. ㅜㅜ

    • 녹두장군2011/04/02 16:21  

      안녕하세요 올려 놓은 소스로는 상황판단이 안되구요
      작업하시는 전체 소스를 보내주시면 디버그 해보고 
      말씀드릴수가 있어요 

      제 메일은 gonhaha@naver.com 입니다 ..

  12. baboototo2011/07/19 03:50   

    잘 봤습니다^^

    퍼가요^^

  13. misoboy2011/09/08 15:07   

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

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

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

  14. 안드로이드2011/11/10 14:51   

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

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

  15. dadadat2012/03/24 01:13   

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

  16. Management Thesis topic2012/04/24 22:00   

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

  17. 김현승2012/08/21 22:34   

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

    • 녹두장군2012/08/27 15:28  

      이런 댓글 하나가 정말 도움이 됩니다. 나도 누군가에 도움이 된다는게 글을 올리게 하는 원동력이 거든요 ㅋ
      태풍 조심하세요








///////////////////////////////////////////////////////////////////////////////////////////////////////////////


출처: http://mainia.tistory.com/576


Android(안드로이드) 에서 탭을 구현할 때 탭별 색상변경과 아이콘 넣어 디자인 하기

 

개발환경 : JDK 1.5, eclipse-galileo, google API 7, window XP

 

이전 강좌에서도 보았지만 탭을 그대로 두기에는 어딘가 모르게 미흡하다.

색깔도 변경하고 원하는 아이콘을 넣어서 좀더 고급스럽게 만들고 싶을것이다.

 

(1) 탭에 색깔넣기

 

안드로이드에서 제공하는 기본색은 그림을 봐서 알겠지만 Grey 이며 클릭시 색깔이 바뀌었다가

놓으면 다시 원래색깔로 돌아온다.





이 색깔을 바꾸어 보는데 예제의 내용은 탭 호스트에 포함되어있는 자식 탭들을 모두 불러와

for 문을 돌면서 동일한 색깔로 바꾸는 것이다.

// TabHost 에 포함된 Tab의 색깔을 모두 바꾼다

for(int i=0;i<tabHost.getTabWidget().getChildCount();i++){

tabHost.getTabWidget().getChildAt(i)

.setBackgroundColor(Color.parseColor("#734512"));

}






일괄적으로 적용했더니 구분이 가지 않는다. 개별적으로 바꾸고 싶다면 다음과 같이 쓰면 된다.

개발 탭을 알아내는 함수는 getChileAt(i) 이다. i 값은 제일 왼쪽 탭부터 0 으로 시작한다
1/** TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용 */
2tabHost.getTabWidget().getChildAt(0)
3       .setBackgroundColor(Color.parseColor("#734512"));
4tabHost.getTabWidget().getChildAt(1)
5       .setBackgroundColor(Color.parseColor("#4E4E9C"));





 

(2) 아이콘 넣기

 

위의 예제에서 아이콘을 넣어 더 고급스럽게 만들어 보자.

아이콘은 drawable 폴더에 넣고 소스에서 getResources().getDrawable() 함수를 호출해

필요한 아이콘의 int 값을 넘겨준다.
1firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
2firstTabSpec.setContent(new Intent(this,FirstTab.class));
3 
4secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
5secondTabSpec.setContent(new Intent(this,SecondTab.class));





 

(3) 원하는 탭을 유지시키기

 

페이지가 로딩되었을때 특정 탭의 내용이 나타날수 있도록 해주고 싶을 때가 있다.

기본은 첫번째 탭인데 2번째 탭을 로딩시 보여주고 싶다면 setCurrentTab(i) 함수를

사용한다.  i 는 위에서 언급했듯이 왼쪽탭부터 0 으로 시작한다
1/** 탭의 선택 */
2tabHost.getTabWidget().setCurrentTab(1);

 

(4) 전체 소스  

 

FirstTab, SecondTab 은 기본 Activity 클래스를 만들어서 넣으면 됩니다.

그리고 AndroidManifest.xml 에 두 Activity 가 포함되어 있어야 됩니다.

<activity android:name=".widget.FirstTab" /> 

<activity android:name=".widget.SecondTab" />

01import android.app.TabActivity;
02import android.content.Intent;
03import android.graphics.Color;
04import android.os.Bundle;
05import android.widget.TabHost;
06import android.widget.TabHost.TabSpec;
07 
08import com.sample.R;
09 
10public class TabColor extends TabActivity {
11     
12    /** Called when the activity is first created. */
13    @Override
14    public void onCreate(Bundle savedInstanceState) {
15        super.onCreate(savedInstanceState);
16        setContentView(R.layout.tab_color);
17 
18        /** TabHost ID */
19        TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
20 
21        /** 새로운 탭을 추가하기 위한 TabSpect */
22        TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
23        TabSpec secondTabSpec = tabHost.newTabSpec("tid1");
24 
25        firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
26        firstTabSpec.setContent(new Intent(this,FirstTab.class));
27        secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
28        secondTabSpec.setContent(new Intent(this,SecondTab.class));
29 
30        /** 탭을 TabHost 에 추가한다 */
31        tabHost.addTab(firstTabSpec);
32        tabHost.addTab(secondTabSpec);
33         
34        // TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용
35        tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512"));
36        tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#4E4E9C"));
37         
38        // 탭의 선택
39        tabHost.getTabWidget().setCurrentTab(1);
40    }
41}

tab_color.xml 
01<?xml version="1.0" encoding="utf-8"?>
02  
03<TabHost android:layout_width="fill_parent"
04    android:layout_height="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android"
05    android:id="@android:id/tabhost">
06    <LinearLayout android:id="@+id/LinearLayout01"
07        android:orientation="vertical" android:layout_height="fill_parent"
08        android:layout_width="fill_parent">
09        <TabWidget android:id="@android:id/tabs"
10            android:layout_height="wrap_content"android:layout_width="fill_parent"></TabWidget>
11        <FrameLayout android:id="@android:id/tabcontent"
12            android:layout_height="fill_parent"android:layout_width="fill_parent"></FrameLayout>
13    </LinearLayout>
14  
15</TabHost>

저작자표시

'구글과인터넷 > 안드로이드' 카테고리의 다른 글

Android|안드로이드 - Fragment 에 대하여. (commit(), commitAllowingStateLoss() 관련)  (0) 2012.12.12
안드로이드 화면전환효과 관련 (효과, 효과없애기)  (0) 2012.12.12
안드로이드 컨트롤 포커스 표시관련 (리스트, 버튼 등등)  (0) 2012.12.12

'구글과인터넷/안드로이드' Related Articles

티스토리툴바