2010年10月7日木曜日

Android タブ画面を表示する

Tab画面を表示するには2つの方法があります。
1,TabActivityクラスを継承する方法
2,Activityクラスを継承する方法



TabActivityクラスを継承する方法

まずレイアウトを作成します。

レイアウトにはいくつか注意点があります。
1,TabHostのidは「@android:id/tabhost」にする。
2,TabHostにはTabWidgetを配置し、そのidは「@android:id/tabs」にする
3,TabHostにはFrameLayoutを配置し、そのidは「@android:id/tabcontent」にする
4,FrameLayout(tabcontent)はpaddingTopを65px~70pxに設定する。paddingTopを設定しないとタブとタブ内容が重なってしまいます。
res/layout/main1.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost 
 android:id="@android:id/tabhost" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android">
 
 <TabWidget 
  android:id="@android:id/tabs" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content">
 </TabWidget>
 <FrameLayout 
  android:id="@android:id/tabcontent" 
  android:layout_height="fill_parent" 
  android:layout_width="fill_parent" 
  android:paddingTop="65px">
  <LinearLayout 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:id="@+id/content1">
   <CheckBox 
    android:text="@+id/CheckBox01" 
    android:id="@+id/CheckBox01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
   </CheckBox>
  </LinearLayout>
  <LinearLayout 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:id="@+id/content2">
   <RadioButton 
    android:text="@+id/RadioButton01" 
    android:id="@+id/RadioButton01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
   </RadioButton>
  </LinearLayout>
 </FrameLayout>
</TabHost>

MainActivityはTabActivityクラスを継承して作成します。
onCreate()メソッドで、getTabHost()メソッドでTabHostオブジェクトを取得し、Tabを追加します。

MainActivity.java
package my.study.android;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivty extends TabActivity {
    
    private static String[] sTabId = {"Tab1","Tab2"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // TabHostオブジェクト取得
        TabHost tabs = getTabHost();

        // Tab1 設定
        TabSpec tab1 = tabs.newTabSpec(sTabId[0]);
        tab1.setIndicator("タブページ1");   
        tab1.setContent(R.id.content1); 
        tabs.addTab(tab1);    
        
        // Tab2 設定
        TabSpec tab2 = tabs.newTabSpec(sTabId[1]);
        tab2.setIndicator("タブページ2");   
        tab2.setContent(R.id.content2); 
        tabs.addTab(tab2);    
        
        // 初期表示設定
        tabs.setCurrentTab(0);
    }
}


Activityクラスを継承する作成する

まずレイアウトを作成します。「TabActivityクラスを継承する方法」と同じものを使用します。
レイアウトの注意点ですが、下記のうち1は必須ではありません。
1,TabHostのidは「@android:id/tabhost」にする。
2,TabHostにはTabWidgetを配置し、そのidは「@android:id/tabs」にする
3,TabHostにはFrameLayoutを配置し、そのidは「@android:id/tabcontent」にする
4,FrameLayout(tabcontent)はpaddingTopを65px~70pxに設定する。paddingTopを設定しないとタブとタブ内容が重なってしまいます。

MainActivityはActivityクラスを継承して作成します。
onCreate()メソッドで、findViewById()メソッドでTabHostオブジェクトを取得します。
Tabを追加する前に、tabhost#setup()メソッドでTabHostを初期化し、Tabを追加します。

MainActivity.java
package my.study.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivty extends Activity {
    
    private static String[] sTabId = {"Tab1","Tab2"};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // TabHostオブジェクト取得
        //TabHost tabs = getTabHost();
        TabHost tabs = (TabHost)findViewById(android.R.id.tabhost);    
        tabs.setup();
        // Tab1 設定
        TabSpec tab1 = tabs.newTabSpec(sTabId[0]);
        tab1.setIndicator("タブページ1");   
        tab1.setContent(R.id.content1); 
        tabs.addTab(tab1);    
        // Tab2 設定
        TabSpec tab2 = tabs.newTabSpec(sTabId[1]);
        tab2.setIndicator("タブページ2");   
        tab2.setContent(R.id.content2); 
        tabs.addTab(tab2);    
        // 初期表示設定
        tabs.setCurrentTab(0);
    }
}

0 件のコメント: