tabを利用してのviewを作成する。
アンドロイドを作成する際にtabを利用する事で、簡単にページを作る事ができます。
移動なども実装されているインターフェイスを使えるので、設置をするだけで簡単に利用ができます。
Android Tab Layout Y.A.M の 雑記帳
に記載されている通りに
1. 同じ Activity で、タブごとに View を切り替える
2. タブごとに別々の Activity を割り当てる
の２通りのやり方があるようです。
今回はViewの切り替えを行いたいと思います。
で勉強をしたいと思ったのですが、
Intentで移動をするのであればTabActivityを継承すればよいのですが
メインのActibityをTabActivityにするとなぜかエラーが起こってしまったので、
下記を参照させていただきました。
Androidでタブを表示させる かずきのBlog@Hatena
※作成方法が違うので参考です。
最初にmain.xmlの中身を変更しました。
TextViewを取り除いて、TabHostを中に入れ込みました。
ここでtabHostのidが@android:id/tabhostのようになっているのですが、これだとなぜか指定が出来なかったので簡単に@+id/tabhostにしております。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/layout_root" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/contentlayout1"> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>
と言う形で表示がされていました。
ここでパブリッシュを行うと、なぜかエラー。。
どうやらtabの設定を行う為にはonCreateのファンクション中で宣言をする必要があるようです。
TabHost host = (TabHost) findViewById(R.id.tabhost); host.setup();
で簡単に設定ができました。ここまで出来てもエラーが出てしまいます。
今度はタブの要素を作らないといけません。
また、tabhostに関しても、idで指定をしてないので、idを設定します。（@android:id/tabhostを@+id/tabhost）にします。android:idの設定はTabActivtyで使用する際に必要な設定になりますが、現在は使用しません。
タブの要素を調べると、FrameLayout内にLinerLayoutを作るとそれが一つのページとして機能をするようです。
なので、２ページ作成をしてみました。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/layout_root" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/contentlayout1"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="layout1が表示されています。" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/contentlayout2"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="layout2が表示されています。" /> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>
これで表示を行う要素を作成できました。ですが、タブの部分をまだ作成をしてません。
次にタブを作成します。
任意名前で作成をします。
TabSpec firstTab = host.newTabSpec("firstTab");
次にタブに表示されるタイトル、画像をいれます。
tab1.setIndicator("タブ１",bitmapData);
ですが、第二引数の画像はnullでも問題ありません。画像入れる場合は
下記のように指定ができます。
new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.icon))//アイコン表示です。
そしてタブに対応をする、layoutを指定します。
tab1.setContent(R.id.contentlayout1);
ここで指定ができるのは、TabHostの中のFrameLayoutの中のデータだけです。
以上でタブで各viewを表示する事ができました。
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/layout_root" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TabWidget android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@android:id/tabs"></TabWidget> <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/contentlayout1"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="layout1が表示されています。" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/contentlayout2"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="layout2が表示されています。" /> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>
TabMake.java
package in.andante.tabmake;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class TabMake extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost host = (TabHost)findViewById(R.id.tabhost);
host.setup();
TabSpec tab1 = host.newTabSpec("tab1");
tab1.setIndicator("tab1");
tab1.setContent(R.id.contentlayout1);
host.addTab(tab1);
TabSpec tab2 = host.newTabSpec("tab2");
tab2.setIndicator("tab2");
tab2.setContent(R.id.contentlayout2);
host.addTab(tab2);
}
}
以上です。
