おまとめローンの情報サイト

490円〜のワンコイン仮想サーバー




2009年06月22日

タブを持つ画面の作り方@

Google Androidで「タブ」を持つ画面を作成するには

@レイアウトに「タブホスト(TabHost)」ビューグループを埋め込む
A「TabActivity」クラスを親クラスとするアクティビティを作成

の2パターンが存在します。

どちらのパターンで作成しても良いのですが、今回は

@レイアウトに「タブホスト(TabHost)」ビューグループを埋め込む

を採用します。

画面の完成イメージは以下の通りです。

tabhost0.PNG

また、完成したEclipseプロジェクトを以下の通り公開します。

TabHostSample.zip

これからはTabHostクラスを使った「タブ付き画面」の作成方法の解説です。

今回使用するクラスは以下の通りです。

android.widget.TabHost
android.widget.TabHost.TabSpec
android.widget.TabWidget


★まずはプロジェクトの作成

プロジェクトの作成は特殊なことは特別行いません。

いつもどおり、Eclipseで作成するならADTのウィザードで作ってください。

今回のサンプルでは以下のような入力でウィザードを実行しています。

tabhost1.PNG

★レイアウトファイルの作成

画面レイアウトの定義ファイルである以下のファイルを編集します。

 res/layout/main.xml

編集後のレイアウトのアウトライン(ビューの親子関係)は以下の通りです。

tabhost2.PNG

レイアウトファイル「res/layout/main.xml」の詳細内容は公開したEclipseプロジェクトを参照してください。

ここでは、個別に解説が必要と思われる箇所をピックアップします。

▲ <TabHost 〜> 〜 </TabHost>
このタグで囲まれた範囲がタブを構成するレイアウトとなります。

▲<TabWidget android:id="@android:id/tabs" 〜/>
タブの部分部品です。

注意すべき点は属性「android:id」の値です。
この値は上記に記載した「@android:id/tabs」固定です。

「@android」で始まる値はシステムで定義したリソースで、ここではシステム指定のIDを割り振っていると考えてください。

▲<FrameLayout android:id="@android:id/tabcontent" 〜 android:paddingTop="65px"> 〜 </FrameLayout>
タブの下に表示する内容を設定する部品です。

このタブの直下の部品(今回はLinerLayout)がそれぞれタブを切り替えた際に表示される画面の定義になります。

注意すべき点は「android:id」の値です。
この値は上記に記載した「@android:id/tabcontent」固定です。

また、「android:paddingTop="65px」の属性を付加する必要があります。付加しないと、タブを考慮せず画面配置をおこない、レイアウトが崩れます。

▲<LinearLayout 〜> 〜 </LinerLayout>
これらがタブを切り替えた際のそれぞれのビューとなります。

特に注意すべきはないと思います。

★アクティビティのソースファイル
アクティビティクラスのソースファイルの先頭以下のインポートを追加してください。

import android.widget.TabHost;
import android.widget.TabHost.TabSpec;


また、アクティビティクラスのメソッドonCreate に以下を追加してください。


// TabHostクラス初期設定
TabHost tabs = (TabHost)findViewById(R.id.tabhost);
tabs.setup();

// Tab1 設定
TabSpec tab1 = tabs.newTabSpec("tab1");
tab1.setIndicator("tab1"); // タブに表示する文字列
tab1.setContent(R.id.content1); // タブ選択時に表示するビュー
tabs.addTab(tab1); // タブホストにタブ追加

// Tab2 設定
TabSpec tab2 = tabs.newTabSpec("tab2");
tab2.setIndicator("tab2"); // タブに表示する文字列
tab2.setContent(R.id.content2); // タブ選択時に表示するビュー
tabs.addTab(tab2); // タブホストにタブ追加

// 初期表示設定
tabs.setCurrentTab(0);


これでタブ付きの画面を表示することが出来ます。

お試しください。
【画面(ビュー)作成の最新記事】
posted by Android at 01:00 | Comment(1) | 画面(ビュー)作成 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
FrameLayoutをPaddingするよりも、LinearLayout(vertical)の中にTabWidgetとFrameLayoutを入れてやった方がいいですよ。
TabWidgetのサイズが画面サイズによって異なり、FrameLayoutをPaddingする値も変わってくるので。
Posted by kkkk at 2011年02月09日 19:42
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。