タブ UI を実現するには、TabHost と TabWidget を使う必要がある
・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 件のコメント:
コメントを投稿