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

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




2009年07月03日

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

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

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

の2パターンが存在すると記事「タブを持つ画面の作り方@」で書きました。

今回は「TabActivity」クラスを親クラスとして画面を作る方法を取り上げます。

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

tabactive1.PNG

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

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

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

android.app.TabActivity
android.widget.TabHost
android.widget.TabHost.TabSpec


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

特に特別な設定は行いませんので、プロジェクトの作成については割愛します。

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

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

 res/layout/main.xml

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

tabactive2.PNG

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

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

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


タブの部分部品です。

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

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


タブの下に表示する内容を設定する部品です。

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

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

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


これらがタブを切り替えた際のそれぞれのビューとなります。

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

★アクティビティのソースファイル

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

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


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

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

// 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);


前回のTabActivityを用いない方法との差異は「TabHost」オブジェクトの取得方法です。

前回はリソースからオブジェクトを取得(生成)しsetup関数で初期化していました。

TabActivityクラスを使用する場合にはTabActivityクラスのメソッド「getTabHost()」をコールするだけでTabHostのオブジェクトを取得できます。

他には差異はありません。

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

タグ:android TAB タブ
【画面(ビュー)作成の最新記事】
posted by Android at 00:17 | Comment(0) | 画面(ビュー)作成 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

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

ホームページアドレス:

コメント: [必須入力]

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


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

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