2010年11月11日木曜日

Android Tab Layout

Tab Layout

 タブ UI を実現するには、TabHostTabWidget を使う必要がある

 ・TabHost はレイアウトの root node でなければならない

 ・TabHost は、タブを表示するための TabWidget とタブの内容を
  する Framelayout を含む

 

 タブコンテンツの実装方法には2つある
  
  1. 同じ Activity で、タブごとに View を切り替える

  2. タブごとに別々の Activity を割り当てる


 ■ 同じ Activity で、タブごとに View を切り替える

  Tech Booster さんの説明がわかりやすいです。

  ・タブメニューを利用する - Tech Booster -



 ■ タブごとに別々の Activity を割り当てる

 
  1. 各タブの Activity を用意する


public class Tab1Activity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

TextView textview = new TextView(this);
textview.setText("This is Tab1");
setContentView(textview);
}
}


  AndroidManifest.xml に <activity> を追加するのを忘れずに!


  2. タブ用のアイコンを準備する

    タブが選択されたときと、選択されていないときの2種類用意する
 
    用意した2つのアイコンで state-list drawable を定義する


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_home_selected"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_home_unselected" />
</selector>


    tab 用のアイコンの作成は簡単なのであれば、
    Android Asset Studio が便利!


  3. 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"
android:padding="5dp">
<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:padding="5dp" />
</LinearLayout>
</TabHost>


   TabHost は TabWidget を FrameLayout を含まなければならない
   さらに、それらの ID は tabs と tabcontent でなければならない
   上記のレイアウトでは FrameLayout が空なので、TabHost は
   自動的に Activity を割り当てる


  5. ランチャー Activity が TabActivity を継承するようにする


public class HelloTabWidget extends TabActivity {



  6. onCreate() の中身を実装する


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

// Resource object to get Drawables
Resources res = getResources();

// The activity TabHost
TabHost tabHost = getTabHost();

// Resusable TabSpec for each tab
TabHost.TabSpec spec;

// Reusable Intent for each tab
Intent intent;

// Create an Intent to launch an Activity
// for the tab (to be reused)
intent = new Intent().setClass(this, Tab1Activity.class);

// Initialize a TabSpec for each tab and
// add it to the TabHost
spec = tabHost.newTabSpec("tab1")
.setIndicator("Home",
res.getDrawable(R.drawable.ic_tab_home))
.setContent(intent);
tabHost.addTab(spec);

// Do the same for the other tabs
intent = new Intent().setClass(this, Tab2Activity.class);
spec = tabHost.newTabSpec("tab2")
.setIndicator("Camera",
res.getDrawable(R.drawable.ic_tab_camera))
.setContent(intent);
tabHost.addTab(spec);

intent = new Intent().setClass(this, Tab3Activity.class);
spec = tabHost.newTabSpec("tab3")
.setIndicator("Star",
res.getDrawable(R.drawable.ic_tab_star))
.setContent(intent);
tabHost.addTab(spec);

tabHost.setCurrentTab(2);
}


   getTabHost() で TabHost を取得し、Tab.Spec で生成した
   各タブを TabHost.addTab() で TabHost に追加する
   setCurrentTab() で初期起動時のタブを設定する





 

0 件のコメント:

コメントを投稿