| 一、问题描述 |
在上次博文中，我们使用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"/>
想要了解更多内容的小伙伴，可以点击查看源码，亲自运行测试。
疑问咨询或技术交流，请加入官方QQ群： （452379712）
作者：杰瑞教育
出处：http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。