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>