Android 기본 Tab 기능

안드로이드에서는 TabHost 컨테이너를 통해 탭 기능을 제공합니다.
화면에 표현하기에 많은 내용이 있다면,
Tab을 사용해 화면을 확장하는 효과를 사용하여 내용을 표현할 수 있습니다.

화면의 일부에 여러 개 탭을 표시하고,
탭을 클릭하면 해당 탭에 속한 화면을 보여주는 구조입니다.
탭을 구성하기 위해서 아래의 항목들을 사용해야 합니다.
(1) TabHost 클래스 : 탭 버튼과 탭 내용을 아우르는 전체 탭 컨테이너
(2) TabWidget 클래스 : 탭 버튼 목록을 관리.
탭 버튼은 텍스트 문자열이 들어가고, 필요한 경우에는 아이콘을 설정
(3) FrameLayout 컨테이너 : 탭 내용을 관리. 각 탭 내용은 FrameLayout 내부에 하나의 위젯

※ Example Code
- TapView_Default.java
public class TapView_Default extends TabActivity {

    private TabHost m_tabHost = null;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);     
        setContentView(R.layout.tapview_default_layout);
       
        /** TabHost ID */
        m_tabHost= (TabHost)findViewById(android.R.id.tabhost); 
        TabSpec aaa_TabSpec = m_tabHost.newTabSpec("aaa"); 
        TabSpec bbb_TabSpec = m_tabHost.newTabSpec("bbb");
        TabSpec ccc_TabSpec = m_tabHost.newTabSpec("ccc");
        aaa_TabSpec.setIndicator("aaa", getResources().getDrawable(R.drawable.games)); 
        aaa_TabSpec.setContent(new Intent(this,test_activity.class)); 
        bbb_TabSpec.setIndicator("bbb", getResources().getDrawable(R.drawable.games)); 
        bbb_TabSpec.setContent(new Intent(this,test_activity.class)); 
        ccc_TabSpec.setIndicator("ccc", getResources().getDrawable(R.drawable.games)); 
        ccc_TabSpec.setContent(new Intent(this,test_activity.class)); 

        /** 탭을 TabHost 에 추가한다 */
        m_tabHost.addTab(aaa_TabSpec);
        m_tabHost.addTab(bbb_TabSpec);
        m_tabHost.addTab(ccc_TabSpec);

        /** TabHost 에 포함된 Tab의 색깔 변경가능 */
        m_tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512")); 
        m_tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#4E4E9C"));
        m_tabHost.getTabWidget().getChildAt(2).setBackgroundColor(Color.parseColor("#6E8E1C"));
        m_tabHost.getTabWidget().setCurrentTab(0); 
    }
}

- tapview_default_layout.xml
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical">
        
 <TabHost
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@android:id/tabhost">
  <LinearLayout
    android:id="@+id/LinearLayout01"
   android:orientation="vertical"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"> 
    <TabWidget
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" >
   </TabWidget>
 
   <FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_weight="1">
   </FrameLayout> 
  </LinearLayout>
 </TabHost>

</LinearLayout>


- Tab 하단에 위치 시키기
일반적으로 Tab은 화면의 상단에 위치한다.
이러한 'layout'을 변경하고자 한다면, 아래와 같이 변경하면 된다.
( 'TabWidget' 과 'FrameLayout' 의 위치 변경이 포인트입니다.
그리고 android:layout_weight="1"를 해주시면 더욱 좋습니다.)

 

※ Example Code
- TapView_Default.java
public class TapView_Default extends TabActivity {

    private TabHost m_tabHost = null;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);     
        setContentView(R.layout.tapview_default_layout);
       
        /** TabHost ID */
        m_tabHost= (TabHost)findViewById(android.R.id.tabhost); 
        TabSpec aaa_TabSpec = m_tabHost.newTabSpec("aaa"); 
        TabSpec bbb_TabSpec = m_tabHost.newTabSpec("bbb");
        TabSpec ccc_TabSpec = m_tabHost.newTabSpec("ccc");
        aaa_TabSpec.setIndicator("aaa", getResources().getDrawable(R.drawable.games)); 
        aaa_TabSpec.setContent(new Intent(this,test_activity.class)); 
        bbb_TabSpec.setIndicator("bbb", getResources().getDrawable(R.drawable.games)); 
        bbb_TabSpec.setContent(new Intent(this,test_activity.class)); 
        ccc_TabSpec.setIndicator("ccc", getResources().getDrawable(R.drawable.games)); 
        ccc_TabSpec.setContent(new Intent(this,test_activity.class)); 

        /** 탭을 TabHost 에 추가한다 */
        m_tabHost.addTab(aaa_TabSpec);
        m_tabHost.addTab(bbb_TabSpec);
        m_tabHost.addTab(ccc_TabSpec);

        /** TabHost 에 포함된 Tab의 색깔 변경가능 */
        m_tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512")); 
        m_tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#4E4E9C"));
        m_tabHost.getTabWidget().getChildAt(2).setBackgroundColor(Color.parseColor("#6E8E1C"));
        m_tabHost.getTabWidget().setCurrentTab(0); 
    }
}

- tapview_default_layout.xml
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical">
        
 <TabHost
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@android:id/tabhost">
  <LinearLayout
    android:id="@+id/LinearLayout01"
   android:orientation="vertical"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"> 

   <FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_weight="1">
   </FrameLayout>

    <TabWidget
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" >
   </TabWidget>
  </LinearLayout>
 </TabHost>

</LinearLayout>


- Tab 배경이미지 적용 방법
일반적으로 Tab의 배경 이미지 적용은 간단하다.
즉, 아래와 같이 "setBackgroundColor()" 를 적용하면 간단하다.

'm_tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512"));'
하지만, 내가 원하는 것은 아래와 같이 여러 속성을 적용하고자 한다.

- 'Touch 했을 때 색상 or 이미지'
- 'Touch Up 했을 때 색상 or 이미지'
- 'Tab에 포커싱 되어 있을 때 색상 or 이미지'
...

위와 같이 하기 위해서는 기본으로 제공되는 Android Control을 조합해야 한다.

※ Example Code
- TapView_Custom.java
public class TapView_Custom extends TabActivity implements OnTabChangeListener {
    /** Called when the activity is first created. */

    private TabHost m_tabHost = null;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.tapview_custom_layout);
       
        /** TabHost ID */
        m_tabHost= (TabHost)findViewById(android.R.id.tabhost); 
        TabSpec aaa_TabSpec = m_tabHost.newTabSpec("aaa"); 
        TabSpec bbb_TabSpec = m_tabHost.newTabSpec("bbb");
        TabSpec ccc_TabSpec = m_tabHost.newTabSpec("ccc");
       
        LayoutInflater vi1 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater vi2 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        LayoutInflater vi3 = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View View_1 = (View)vi1.inflate(R.layout.tab_row_item, null);        View View_2 = (View)vi2.inflate(R.layout.tab_row_item, null);
        View View_3 = (View)vi3.inflate(R.layout.tab_row_item, null);
        LinearLayout Layout_1 = (LinearLayout)View_1.findViewById(R.id.LinearLayout01);
        LinearLayout Layout_2 = (LinearLayout)View_2.findViewById(R.id.LinearLayout01);
        LinearLayout Layout_3 = (LinearLayout)View_3.findViewById(R.id.LinearLayout01);
        Layout_1.setBackgroundResource(R.drawable.tab_1_bg);
        Layout_2.setBackgroundResource(R.drawable.tab_2_bg);
        Layout_3.setBackgroundResource(R.drawable.tab_3_bg);
       
        ImageView iv_1 = (ImageView)View_1.findViewById(R.id.icon);
        ImageView iv_2 = (ImageView)View_2.findViewById(R.id.icon);
        ImageView iv_3 = (ImageView)View_3.findViewById(R.id.icon);
       
        TextView tv_1 = (TextView)View_1.findViewById(R.id.text);
        TextView tv_2 = (TextView)View_2.findViewById(R.id.text);
        TextView tv_3 = (TextView)View_3.findViewById(R.id.text);
        tv_1.setText("aaa");
        tv_2.setText("bbb");
        tv_3.setText("ccc");
       
        aaa_TabSpec.setIndicator(View_1);
        aaa_TabSpec.setContent(new Intent(this,test_activity.class)); 
        bbb_TabSpec.setIndicator(View_2);
        bbb_TabSpec.setContent(new Intent(this,test_activity.class)); 
        ccc_TabSpec.setIndicator(View_3);
        ccc_TabSpec.setContent(new Intent(this,test_activity.class)); 
       
       /** 탭을 TabHost 에 추가한다 */
        m_tabHost.addTab(aaa_TabSpec);        m_tabHost.addTab(bbb_TabSpec);
        m_tabHost.addTab(ccc_TabSpec);
       
        m_tabHost.getTabWidget().setCurrentTab(0); 
    }
}

- tapview_custom_layout.xml
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical">
 <TabHost
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:id="@android:id/tabhost">
  <LinearLayout
    android:id="@+id/LinearLayout01"
   android:orientation="vertical"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"> 
   <FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_weight="1">
   </FrameLayout> 
 
    <TabWidget
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent" >
   </TabWidget>
  </LinearLayout>
 </TabHost>

</LinearLayout>


- tab_row_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:id="@+id/LinearLayout01"
 android:orientation="vertical">
 <ImageView
  android:id="@+id/icon"
  android:layout_width="33dip"
  android:layout_height="30dip"
  android:layout_marginTop="3dip"
  android:scaleType="fitXY"
  android:layout_gravity="center"
  android:background="@drawable/icon" >
 </ImageView>
 <TextView
  android:id="@+id/text"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:layout_marginLeft="5dip"
  android:layout_marginRight="5dp"
  android:textSize="15dip"
  android:layout_gravity="center" />

</LinearLayout>


- tab_1_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>


- tab_2_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>


- tab_3_bg.xml
('res - drawable'폴더에 파일을 생성)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_selected="true"
  android:drawable="@drawable/color_green"/>

 <item
  android:state_pressed="true"
  android:drawable="@drawable/color_yellow"/>

 <item
  android:state_focused="false"
  android:drawable="@drawable/color_white"/>
</selector>


출처 : http://itworldjoon.tistory.com