スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TabLayoutを使う ~part1

2011年02月27日 11:50

画面が小さいモバイル端末だと
Tabを持つ画面は重宝しそうかな~って思ったので
tabLayoutについてまとめてみました。

参考:http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

TabLayoutは、2通りの実装方法がある。

①タブ選択により表示するActivityを呼び出す。
②タブ選択で同じActivity内にあるViewの表示を切り替える。

タブそれぞれで違ったレイアウトとかをタブで切り替えるのなら①を選択したほうが良いみたい。
理由は、一つのActivityが肥大化するのが嫌だから

今回は、①のやり方で作ってみる。
tabLayoutはEclipseのプレビュー画面に表示できないけど、現時点のEclipseの仕様っぽいから気にしない。

全体的な流れは、
タブの外観(main.xml)を作る

各タブに表示するそれぞれのActivityを作る

タブに表示するアイコンを容易する(なくてもいいけど)

TabActivityを継承したソースで、
各タブに表示するアイコンと文字、内容を設定する。
ってな感じ。一つ一つ順番に見ていけばそれほど難しくはない。

1.タブレイアウトの枠を作成する
タブ表示の全体的な入れ物を作成する。
main.xmlのソースは↓みたいになる。 LinerLayoutは、タブとタブの内容を垂直に配置するのに使ってる。
LinerLayoutで囲わなくても垂直に表示されるんだけど、
参考サイトにも、縦方向に配置するためと明確に書いてあるし、はずさないほうが無難かな。
「android:orientation=”vertical”」も指定しといたほうがいい。

ここで重要なのは、
  • TabHostを親要素とする
  • TabHostは、TabWidgetとFrameLayout要素を持っている必要がある
  • TabWidgetのIDは、「@android:id/tabs」とする。
  • FrameLayoutのIDは、「@android:id/tabcontent」とする。
ぐらいかな。IDは、システムに割り当てられたIDがあるからそれを使うべきっぽい。
@+idとかの表記でもエラーにならないけど、無駄に変えて予想外の所で不具合起こしても仕方ないし…

FrameLayoutは、Activityを呼ぶときにTabHostが自動でそのActivityで埋めてくれるので
中身は空のままで大丈夫。

2.タブに表示するアイコンを準備する
タブにアイコンを表示できるので、その用意をする。
タブが選ばれているときは灰色、未選択の時は白色が推奨されているみたいです。

上の参考URにアイコンが一つあったので、それをそのまま使わせてもらうことにした。

アイコンは/res/drawableの下のフォルダへ置きます。
画像と同じ場所に下のようなxmlファイルを作成します。

ic_tab_artists.xml
3.表示するActivityをそれぞれ用意する
今回は、どのActivityを呼ばれたかを確認するだけなので
textviewに文字を表示させただけのActivityをタブの数だけ用意しとく(今回は、3つ)
Activityを追加したときは、忘れずにAndroidManifest.xmlにを追加しとこう。
4.TabHost Activityの作成
①TabActivityから継承する
②TabHostへの参照を作る
TabHostを使えるようにするためにgetTabHostをCallする。
③インテントを作る→タブの作成
下の事をタブの数だけやる タブに文字だけ指定することも出来る。でも、高さの幅はアイコンの有無とは関係なく一定。
④デフォルト選択のタブを指定する。

⑤AndroidManifest.xmlで、メインの起動をTabHostActivityにする

ここまでのソースは↓みたいな感じ
/layout/main.xml /res/drawable/ic_tab_artists.xml FirstActivity.java
SecondActivity、ThirdActivityもほぼ同じなので省略
HelloTabWidget.java AndroidManifest.xml


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://individualmemo.blog104.fc2.com/tb.php/57-4389082a
    この記事へのトラックバック



    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。