tabを利用してのviewを作成する。

アンドロイドを作成する際にtabを利用する事で、簡単にページを作る事ができます。

tab

移動なども実装されているインターフェイスを使えるので、設置をするだけで簡単に利用ができます。

Android Tab Layout Y.A.M の 雑記帳

に記載されている通りに

1. 同じ Activity で、タブごとに View を切り替える

2. タブごとに別々の Activity を割り当てる

の2通りのやり方があるようです。

今回はViewの切り替えを行いたいと思います。

タブメニューを利用する – Tech Booster –

で勉強をしたいと思ったのですが、

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を作るとそれが一つのページとして機能をするようです。

なので、2ページ作成をしてみました。

<?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("タブ1",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);
 
 }
}

以上です。

前後の記事

前の記事:

次の記事:

関連の記事

コメントの投稿

  • サイト内検索

新作アプリの紹介

関連サイトの紹介

アンドロイドアプリ開発TIPS
きぐるみカメラ
ふらいぱん
アンドロイドのデザイン集
Page top↑