Android-FragmentTabHost的简单使用

FragmentTabHost  是一个TabHost结合Fragment的使用
关键点如下：
1，FragmentTabHost在初始化的时候调用setup()方法，传入需要承载fragment的framelayout容器id。
2，逐步（本例中使用for）添加TabSpec。

＃tasHost.newTabSpec(s)这个方法设置的是一个tab的标签，与tabHost.setOnTabChangedListener()->onTabChanged(String s ) 中的s对应
＃每一个TabSpec可以设定一个对应的Fragment和View，Fragment就是需要显示的Fragment，View就是界面中tab部分显示的内容。
＃view通过setIndicator()方法指定，这个方法可以指定一个String名称，也可以指定一个View（本例使用View，通过getTabSpecView()返回一个View，内容有一个ImageView和一个TextView）

如何修改Tab在被选中时的样式变化？
1)在onTabChanged(String s )中可以监听tab的改变事件
2)tabHost.getTabWidget().getChildAt(position); ->可以获取tab中的View，然后对View进行管理，比如修改图片的样式
ImageView iv = view.findViewById(ImageViewResId)；
iv.setImageSource(xxx);

示例代码：
1, activity_main.xml 添加如下代码，fragment_container用来承载fragment

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" />

<android.support.v4.app.FragmentTabHost
    android:id="@+id/tab_host"
    android:layout_width="match_parent"
    android:layout_height="60dp">
    <!--<FrameLayout-->
        <!--android:id="@android:id/tabcontent"-->
        <!--android:layout_width="0dp"-->
        <!--android:layout_height="0dp"-->
        <!--android:layout_weight="0" />-->

</android.support.v4.app.FragmentTabHost>

2，添加tab_spec的布局item_tab_spec.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/colorTabBackground"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:id="@+id/tab_spec_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:text="haha"
        android:layout_gravity="center"
        android:id="@+id/tab_spec_textview"
        android:textColor="@color/colorTabTitleTextNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

3，MainActivity中定义需要用到的变量

private FragmentTabHost tabHost;
private int tabSpecTitle[] = {R.string.notes,R.string.settings};
private int tabSpecImg[] = {R.drawable.docker_tab_note_selector,R.drawable.docker_tab_setting_selector};
private Class fragments[] = {NoteListFragment.class,SettingFragment.class};

4，初始化FragmentTabHost

//initial FragmentTabHost
tabHost = (FragmentTabHost) findViewById(R.id.tab_host);
tabHost.setup(this, getSupportFragmentManager(), R.id.fragment_container);
for (int i = 0; i < fragments.length; i++) {

    tabHost.addTab(tabHost.newTabSpec(getString(tabSpecTitle[i])).setIndicator(getTabSpecView(i)),fragments[i],null);
}
tabHost.setOnTabChangedListener(this);
changeTabTextColor(0);

/**
 * get every view of tab
 * it is a view group contains ImageView & TextView which is from item_tab_spec.xml
 * @param i view's current index
 * @return view of tab
 */
private View getTabSpecView(int i){

    View v = LayoutInflater.from(this).inflate(R.layout.item_tab_spec,null);
    ImageView iv = (ImageView) v.findViewById(R.id.tab_spec_imageview);
    TextView tv = (TextView) v.findViewById(R.id.tab_spec_textview);
    iv.setBackgroundResource(tabSpecImg[i]);
    tv.setText(getString(tabSpecTitle[i]));
    return v;
}

@Override
public void onTabChanged(String s) {

    //get title-text of current tab and change the color to selected.
    int position = tabHost.getCurrentTab();
    changeTabTextColor(position);
}

/**
 * change the color of tab's title-text which is been selected.
 * @param position
 */
public void changeTabTextColor(int position){

    clearTabTextcolor();
    View v = tabHost.getTabWidget().getChildAt(position);
    TextView tv = (TextView) v.findViewById(R.id.tab_spec_textview);
    tv.setTextColor(getResources().getColor(R.color.colorTabTitleTextSelected));
}

/**
 * set all tab's title-text to default color.
 */
public void clearTabTextcolor(){

    for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {

        View v = tabHost.getTabWidget().getChildAt(i);
        TextView tv = (TextView) v.findViewById(R.id.tab_spec_textview);
        tv.setTextColor(getResources().getColor(R.color.colorTabTitleTextNormal));
    }

}

5，定义tab图标被选中时的样式（这部分可以用代码实现）
＃注意item的顺序不能错，否则显示不正常
docker_tab_note_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/docker_tab_note_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/docker_tab_note_normal" ></item>
</selector>

docker_tab_setting_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/docker_tab_setting_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/docker_tab_setting_normal"></item>
</selector>