转载

Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

一、问题描述

在上次博文中，我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航（查看文章： http://www.cnblogs.com/jerehedu/p/4607599.html#dxjmsj ），接下来我们使用FragmentTabHost+Fragment实现底部tab切换，效果如图所示

二、案例主要组件

1、MainActivity布局

把整个Activity分成两部TabHost和TabContent，TabHost包含各个tab，tab之间切换将在TabContent所关联的FrameLayout区域中显示各自板块的内容

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical"  tools:context=".MainActivity" >  <FrameLayout  android:id="@+id/contentLayout"    android:layout_width="match_parent"   android:layout_height="0dp"   android:layout_weight="1">   </FrameLayout>   <android.support.v4.app.FragmentTabHost    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="#F6F6F6"    >    <FrameLayout android:id="@android:id/tabcontent"     android:layout_height="0dp" android:layout_width="0dp"     />   </android.support.v4.app.FragmentTabHost> </LinearLayout>

2、MainActivity代码

public class MainActivity extends FragmentActivity  implements OnTabChangeListener{  private FragmentTabHost tabHost;  @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   setContentView(R.layout.activity_main);   tabHost=(FragmentTabHost)super.findViewById(android.R.id.tabhost);   tabHost.setup(this,super.getSupportFragmentManager()     ,R.id.contentLayout);   tabHost.getTabWidget().setDividerDrawable(null);   tabHost.setOnTabChangedListener(this);   initTab();  }  private void initTab(){   String tabs[]=TabDb.getTabsTxt();   for(int i=0;i<tabs.length;i++){    TabSpec tabSpec=tabHost.newTabSpec(tabs[i]).setIndicator(getTabView(i));    tabHost.addTab(tabSpec,TabDb.getFragments()[i],null);    tabHost.setTag(i);   }  }  private View getTabView(int idx){   View view=LayoutInflater.from(this).inflate(R.layout.footer_tabs,null);   ((TextView)view.findViewById(R.id.tvTab)).setText(TabDb.getTabsTxt()[idx]);   if(idx==0){    ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);  ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImgLight()[idx]);   }else{    ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImg()[idx]);   }   return view;  }  @Override  public boolean onCreateOptionsMenu(Menu menu) {   // Inflate the menu; this adds items to the action bar if it is present.   getMenuInflater().inflate(R.menu.main, menu);   return true;  }  @Override  public void onTabChanged(String tabId) {   // TODO Auto-generated method stub   updateTab();  }  private void updateTab(){   TabWidget tabw=tabHost.getTabWidget();   for(int i=0;i<tabw.getChildCount();i++){    View view=tabw.getChildAt(i);    ImageView iv=(ImageView)view.findViewById(R.id.ivImg);    if(i==tabHost.getCurrentTab()){     ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);     iv.setImageResource(TabDb.getTabsImgLight()[i]);    }else{  ((TextView)view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.foot_txt_gray));     iv.setImageResource(TabDb.getTabsImg()[i]);    }   }  } }

3、TabDb组件

提供界面设计所需的 tab 文本、 tab 图片和 Fragment 类型数据

public class TabDb {  public static String[] getTabsTxt(){   String[] tabs={"新闻","阅读","试听","发现"," 我"};   return tabs;  }  public static int[] getTabsImg(){   int[] ids={R.drawable.foot_news_normal,R.drawable.foot_read_normal,R.drawable.foot_vdio_normal,R.drawable.foot_fond_normal,R.drawable.foot_out_normal};   return ids;  }  public static int[] getTabsImgLight(){   int[] ids={R.drawable.foot_news_light,R.drawable.foot_read_light,R.drawable.foot_vdio_light,R.drawable.foot_found_light,R.drawable.foot_out_light};   return ids;  }  public static Class[] getFragments(){   Class[] clz={NewsFragment.class,ReadFragment.class,VideoFragment.class,FoundFragment.class,OwnerFragment.class};   return clz;  } }

4、每个tab各自对应的Fragment组件

共5个Fragment为NewsFragment、ReadFragment、FoundFragment、OwnerFragment、VideoFragment,根据不同板块各自设计界面，这里重点是如何实现底部tab切换，简单布局一下即可，以NewsFragment为例代码如下：

public class NewsFragment extends Fragment {     @Override     public void onAttach(Activity activity) {  // TODO Auto-generated method stub  super.onAttach(activity);     }     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,      Bundle savedInstanceState) {  // TODO Auto-generated method stub  TextView tvTitle=new TextView(super.getActivity());  tvTitle.setText("新闻");  tvTitle.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));  tvTitle.setGravity(Gravity.CENTER);  tvTitle.setTextSize(30);  return tvTitle;     }     @Override     public void setArguments(Bundle args) {  // TODO Auto-generated method stub  super.setArguments(args);     } }

5、tab布局样式（footer_tabs.xml）

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="wrap_content"   android:gravity="center"  android:padding="5dp"  android:background="#F6F6F6"  >  <ImageView   android:id="@+id/ivImg"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_alignParentLeft="true"   android:layout_alignParentTop="true"     />  <TextView   android:id="@+id/tvTab"   android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_alignParentLeft="true"   android:layout_below="@+id/ivImg"     android:textColor="#AEAEAE"   android:text="新闻" android:layout_marginTop="2dp"/>