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>