[Android Dev.] Tab 사용하기 - 동적으로 Tab 추가하기

아래 코드는 XML 리소스에서 탭을 구성하는 것이 아니고 필요에 따라 코드로 탭을 동적으로 추가하는 내용이다.

동적으로 Tab 을 추가 하기위해서는 TabHost.TabContentFactory() 이용해 Content를 생성한다.

main.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="fill_parent">
  <TabHost
      android:id="@+id/tabHost"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      >
      <TabWidget
          android:id="@android:id/tabs"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          />
      <FrameLayout
          android:id="@android:id/tabcontent"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:paddingTop="69px"
          >
          <LinearLayout
              android:id="@+id/BtnLayout"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              >
              <Button
                  android:id="@+id/BtnLinearLayout"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Linear Layout"/>                  
              <Button
                  android:id="@+id/BtnRelativeLayout"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Relative Layout"/>
              <Button
                  android:id="@+id/BtnTableLayout"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Table Layout"/>      
          </LinearLayout>
      </FrameLayout>
  </TabHost>
</LinearLayout>

TabHost 생성 및 Tab 추가 코드

setContentView( R.layout.main_dynamic_tab );
        
// Tab Host 객체 생성 - 다른 객체의 멤버 함수에서 사용하기 위해 final 키워드 이용
final TabHost tabHost = (TabHost)findViewById( R.id.tabHost );

// TabHost 를 findViewById 로 생성한 후 Tab 추가 전에 꼭 실행해 주어야 함.
tabHost.setup();

// 새로운 Tab 을 생성하기 위한 Tab 객체 생성
TabHost.TabSpec spec;

// 첫 번째 Tab 설정 및 등록
spec = tabHost.newTabSpec( "Tab 00" );     // 새 Tab 생성
spec.setIndicator("Layouts", getResources().getDrawable(R.drawable.icon) ); // Tab 제목, 아이콘
spec.setContent(R.id.BtnLayout);           // Tab 내용
tabHost.addTab( spec );                    // 생성 된 Tab 등록        

// 첫 번째 탭을 활성화 
tabHost.setCurrentTab( 0 );

// Linear Layout
Button btnAddLinearLayout = (Button)findViewById( R.id.BtnLinearLayout );
btnAddLinearLayout.setOnClickListener( new OnClickListener() 
{
    @Override
    public void onClick(View v) 
    {            
        for ( int view = 0; view < tabHost.getChildCount(); ++view )
        {
            
        }
        
        TabHost.TabSpec spec = tabHost.newTabSpec( "Linear Layout" );
        
        spec.setIndicator( "Linear" );
        spec.setContent( new TabHost.TabContentFactory()
        {
            @Override
            public View createTabContent(String tag) 
            {
                LinearLayout linear = new LinearLayout( MyLayout.this );
                linear.setOrientation( LinearLayout.VERTICAL );
                linear.setId( MY_LINEARLAYOUT_VIEW );
                
                LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.FILL_PARENT, 
                        LinearLayout.LayoutParams.WRAP_CONTENT );
                
                linear.setLayoutParams( param );
                
                // EditText
                EditText etName = new EditText( MyLayout.this );
                etName.setText( "Input your name here!!" );
                linear.addView( etName );

                // First Button
                Button btn = new Button( MyLayout.this );
                btn.setText( "First Added Button" );
                linear.addView( btn, param );
                
                // Second Button
                btn = new Button( MyLayout.this );
                btn.setText( "Second Added Button" );
                linear.addView( btn, new LinearLayout.LayoutParams(
                        LinearLayout.LayoutParams.WRAP_CONTENT, 
                        LinearLayout.LayoutParams.WRAP_CONTENT ) );
                
                // TextView
                TextView tvHello = new TextView( MyLayout.this );
                tvHello.setText( "Hello! Linear layout!!" );
                tvHello.setGravity( Gravity.CENTER );
                linear.addView( tvHello );
                
                // Third Button
                btn = new Button( MyLayout.this );
                btn.setText( "Third Added Button" );
                linear.addView( btn, param );                        

                return linear;
            }
        });
        
        tabHost.addTab( spec );
    }
});

<

Original Post : http://neodreamer-dev.tistory.com/424

[Android Dev.] Tab 사용하기 - TabActivity

Tab 을 구성하기위해 TabActivity를 상속받아 Tab을 구성 하였다.

main.xml

<?xml version="1.0" encoding="utf-8"?> 
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"> 
        <TabWidget 
            android:id="@android:id/tabs" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
        /> 
        <FrameLayout 
            android:id="@android:id/tabcontent" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"> 
            <LinearLayout 
                android:id="@+id/TabView1"            
                android:orientation="vertical" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent" 
            > 
            </LinearLayout> 
            <LinearLayout 
                android:id="@+id/TabView2"            
                android:orientation="horizontal" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent" 
            > 
            </LinearLayout> 
            <TextView 
                android:id="@+id/TabView3" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent" 
                android:text="TabView3" 
            /> 
        </FrameLayout> 
    </LinearLayout> 
</TabHost>

java 소스

package com.neodreamer.MyTab;

import android.app.TabActivity; 
import android.os.Bundle; 
import android.widget.TabHost; 
 
public class MyTab extends TabActivity 
{ 
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) 
    { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
        
        TabHost tabHost = getTabHost(); 
        
        TabHost.TabSpec spec;
        
        // 첫 번째 탭
        spec = tabHost.newTabSpec( "Tab 01" );
        spec.setIndicator( "Tab 01", 
            getResources().getDrawable( R.drawable.icon ) );
        spec.setContent( R.id.TabView1 );
        tabHost.addTab( spec );
        
        // 두 번째 탭
        spec = tabHost.newTabSpec( "Tab 02" );
        spec.setIndicator( "Tab 02" );
        spec.setContent( R.id.TabView2 );
        tabHost.addTab( spec );
        
        // 세 번째 탭
        spec = tabHost.newTabSpec( "Tab 03" );
        spec.setIndicator( "Tab 03" );
        spec.setContent( R.id.TabView3 );
        tabHost.addTab( spec );
        
        tabHost.setCurrentTab( 0 );
    } 
} 
<

Original Post : http://neodreamer-dev.tistory.com/419

[Android Dev.] Tab 사용하기

Tab 의 구성

Android 의 Tab 은 3가지 요소로 구성되어 있다.

• Tab Host : 전체 Tab 을 구성하는 Tab Widget 와 FrameLayout 을 포함 하는 컨테이너
  
  


• Tab Widget : Tab 버튼을 담고 있는 컨테이너
  
  


• FrameLayout : Tab 버튼에 따라 보여질 내용을 담고 있는 컨테이너
  
  

TabActivity상속 받아 Activity를 구현 할 때(Tab 자체가 Activity의 main 화면일 때) TabHost의 id는 항상 "@android:id/tabhost"로 설정 하여야 한다.



Tab Widget 는 아이콘과 텍스트로 구성이 되는데 ID는 항상 "@android:id/tabs" 이어야 하며 텍스트만으로 구성이 되더라도 최소 높이가 62px 이다.

Tab Widget

FrameLayout 은 TabHost 에 포함되는 컨테이너로 TabHost 내의 좌상단(0,0)에서 그려지게 되는데 TabHost 의 상단에는 Tab Widget가 표현되고 있어 Tab Widget을 가리게 된다. 따라서 가려지는 일을 피하려면 Tab Widget 높이 만큼 FrameLayout 의 padding-top 을 설정해 주어야 한다.

FrameLayout 의 padding-top 이 0px 인 경우

탭 생성하는 절차

• findViewById 로 xml 리소스에서 Tab 가져오기


• setup() 함수 호출


• TabHost.TabSpec 객체를 활용하여 탭을 구성하고 추가하기


• 활성화할 Tab 인데스 지정
  
  

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TabHost
        android:id="@+id/tabHost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
        />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:paddingTop="0px"
        >
            <LinearLayout
                android:id="@+id/layout"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >
                <AnalogClock
                    android:id="@+id/clockAnalog"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" 
                    />
                <DigitalClock
                    android:id="@+id/clockDigital"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    />
            </LinearLayout>
            <Button 
                android:id="@+id/btnClickme"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="The Button.\nClick me!"
                />        
        </FrameLayout>
    </TabHost>
</LinearLayout>

java source

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);
    
    TabHost tabHost = (TabHost)findViewById( R.id.tabHost );
    
    // TabHost 를 findViewById 로 생성한 후 Tab 추가 전에 꼭 실행해 주어야 함.
    tabHost.setup();
    
    // 새로운 Tab 을 생성하기 위한 Tab 객체 생성
    TabHost.TabSpec spec;
    
    // 첫 번째 Tab 설정 및 등록
    spec = tabHost.newTabSpec( "Tab 00" );  // 새 Tab 생성
    spec.setIndicator("Clock");             // Tab 제목
    spec.setContent(R.id.layout);           // Tab 내용
    tabHost.addTab( spec );                 // 생성 된 Tab 등록
    
    // 두 번째 Tab 설정 및 등록        
    spec = tabHost.newTabSpec( "Tab 01" );  // 새 Tab 생성
    spec.setIndicator( "Button", getResources().getDrawable(R.drawable.icon) ); // Tab 제목
    spec.setContent( R.id.btnClickme );     // Tab 내용
    tabHost.addTab( spec );                 // 생성 된 Tab 등록
    
    // 첫 번째 탭을 활성화 
    tabHost.setCurrentTab( 0 );
}

<

Original Post : http://neodreamer-dev.tistory.com/417