2013年11月6日水曜日

FragmentTabHostを使ってみる

今回は、FragmentTabHostを試したいと思います(`・ω・´)シャキーン

・FragmentTabHostはFragmentをタブで切り替えるためのView。
・Support Packageを利用すればAndroid 1.6から使用することができる。

TabActivity、TabHostはAndroid 3.0 以降は非推奨とのことなので、
今後はFragmentTabHostもしくは、ActionBarを使うようにした方が(・∀・)イイ!!ってことかな?

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.fragmenttaghost1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.fragmenttaghost1.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
■activity_main.xml

FragmentTabHost配下にあるTabWidget(@android:id/tabs)と、
FrameLayout(@android:id/tabcontent)は必須になる。
※名前もこの名前にしないとエラーが出てしまう。
<!-- タブ全体の定義 -->
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!--  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <!-- タブパネル操作のためのTabWidgetを配置 -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />
        <!-- タブパネルを束ねるためのコンテナーを配置 -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
        <!-- タブが押された時に表示するコンテンツ領域(Fragment) -->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</android.support.v4.app.FragmentTabHost>
■TabFragment.java

タブが選択されたときに表示させるFragmentになります。
package com.example.fragmenttaghost1;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/*
 * タブがクリックされた時に表示するFragment
 */
public class TabFragment extends Fragment {

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  String name = getArguments().getString("name");
  Log.d("TabFragment.onCreateView", name);
  
  TextView textView = new TextView(getActivity());
  textView.setGravity(Gravity.CENTER);
  textView.setText(getArguments().getString("name"));

  return textView;
 }

}

■MainActivity.java

setIndicatorで、タブのViewを設定する必要がありますが、
文字列を渡すとことで、デフォルトのViewが使われるそうです。

ここで任意のViewを渡せば任意のタブに変更が行えます。
たとえば次のようにButtonを設定して、バックグラウンドに画像を設定すると、
タブを指定の画像で表示する事ができます。
//Buttonビューを生成
Button button = new Button(this);
//Buttonのバックグラウンドに画像を設定
button.setBackgroundResource(R.drawable.tab_left);
//タブに設定
tabSpec.setIndicator(button);

内部クラスとしてSampleFragmentがありますが、
今回は、TabFragmentを利用しているので利用していません。

もし、クラスファイルを分けるのが嫌っていう方は、
下記のように内部クラスとして定義して、次のように変更すれば同じように動作します。

・変更前
mTabHost.addTab(tabSpec, TabFragment.class, bundle);
・内部クラスを利用するパターン
mTabHost.addTab(tabSpec, SampleFragment.class, bundle);
ファイルを分けたくない人は内部クラスとして記述すると(・∀・)イイネ!!
ただのその際の注意として、内部クラスで記述する場合には
クラスをstaticにしないとエラーが出てしまっていました(´;ω;`)ウッ…
package com.example.fragmenttaghost1;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
  FragmentTabHost.OnTabChangeListener {

 private FragmentTabHost mTabHost;
 //
 private String[] TabTag = { "お気に入りお気に入りお気に入り", "tab2", "tab3", "tab4",
   "tab5" };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  // FragmentTabHostを取得する
  mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

  // Context、FragmentManager、タブ選択時にFragmentを挿入するリソースID
  mTabHost.setup(this, getSupportFragmentManager(), R.id.content);

  for (int i = 0; i < TabTag.length; i++) {

   String name = TabTag[i];

   Log.d("tabSpec", TabTag[i]);

   // Fragmentに渡す値を生成する
   Bundle bundle = new Bundle();
   bundle.putString("name", name);

   // TabSpecの生成。引数にはタブのタグを設定する
   TabSpec tabSpec = mTabHost.newTabSpec(name);
   // タブで利用するViewを生成する(String を渡すとデフォルトのタブボタンの Viewが使われる)
   tabSpec.setIndicator(name);
   /*
    * タブの追加
    * 
    * @param TabSpec
    * 
    * @param タブが選択されたときに表示したい Fragment を Class で渡す
    * 
    * @param Fragmentで読み込みたいデータを Bundle で渡す
    */
   mTabHost.addTab(tabSpec, TabFragment.class, bundle);

  }

  // タブ変更時イベントハンドラ
  mTabHost.setOnTabChangedListener(this);

 }

 /*
  * タブの選択が変わったときに呼び出される
  * 
  * @see
  * android.widget.TabHost.OnTabChangeListener#onTabChanged(java.lang.String)
  */
 @Override
 public void onTabChanged(String arg0) {
  // TODO Auto-generated method stub
  Log.d("onTabChanged", "tabId:" + arg0);
 }

 /*
  * タブがクリックされた時に表示するFragment
  */
 public static class SampleFragment extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {

   String name = getArguments().getString("name");
   Log.d("TabFragment.onCreateView", name);

   TextView textView = new TextView(getActivity());
   textView.setGravity(Gravity.CENTER);
   textView.setText(getArguments().getString("name"));

   return textView;
  }

 }
}
実行結果は次のようになります。

何かタブ内の文字数が多いと、文字がスクロールするらしい:(;゙゚'ω゚'):

今回で言うとお気に入りタブボタンが選択されているとスクロールしていました(´・∀・`)ヘー


別のタブをクリックすると、中身が変わります( ´∀`)bグッ!

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿