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 を用意する

  1. public class Tab1Activity extends Activity {  
  2.     public void onCreate(Bundle savedInstanceState) {  
  3.         super.onCreate(savedInstanceState);  
  4.   
  5.         TextView textview = new TextView(this);  
  6.         textview.setText("This is Tab1");  
  7.         setContentView(textview);  
  8.     }  
  9. }  


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


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

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

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


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


  3. main.xml を作成

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@android:id/tabhost"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent">  
  6.     <LinearLayout  
  7.         android:orientation="vertical"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:padding="5dp">  
  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:padding="5dp" />  
  20.     </LinearLayout>  
  21. </TabHost>  


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


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

  1. public class HelloTabWidget extends TabActivity {  



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

  1. public void onCreate(Bundle savedInstanceState) {  
  2.     super.onCreate(savedInstanceState);  
  3.     setContentView(R.layout.main);  
  4.   
  5.     // Resource object to get Drawables  
  6.     Resources res = getResources();   
  7.   
  8.     // The activity TabHost  
  9.     TabHost tabHost = getTabHost();    
  10.   
  11.     // Resusable TabSpec for each tab  
  12.     TabHost.TabSpec spec;  
  13.   
  14.     // Reusable Intent for each tab  
  15.     Intent intent;  
  16.   
  17.     // Create an Intent to launch an Activity   
  18.     // for the tab (to be reused)  
  19.     intent = new Intent().setClass(this, Tab1Activity.class);  
  20.   
  21.     // Initialize a TabSpec for each tab and   
  22.     // add it to the TabHost  
  23.     spec = tabHost.newTabSpec("tab1")  
  24.                   .setIndicator("Home",   
  25.                    res.getDrawable(R.drawable.ic_tab_home))  
  26.                   .setContent(intent);  
  27.     tabHost.addTab(spec);  
  28.   
  29.     // Do the same for the other tabs  
  30.     intent = new Intent().setClass(this, Tab2Activity.class);  
  31.     spec = tabHost.newTabSpec("tab2")  
  32.                   .setIndicator("Camera",   
  33.                    res.getDrawable(R.drawable.ic_tab_camera))  
  34.                   .setContent(intent);  
  35.     tabHost.addTab(spec);  
  36.   
  37.     intent = new Intent().setClass(this, Tab3Activity.class);  
  38.     spec = tabHost.newTabSpec("tab3")  
  39.                   .setIndicator("Star",   
  40.                    res.getDrawable(R.drawable.ic_tab_star))  
  41.                   .setContent(intent);  
  42.     tabHost.addTab(spec);  
  43.   
  44.     tabHost.setCurrentTab(2);  
  45. }  


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





 

0 件のコメント:

コメントを投稿