FragmentTabHost+Fragment实现底部tab切换(烟台杰瑞教育Android培训部原创).docx

烟台杰瑞教育科技有限公司(Android开发培训部) 版权所有 FragmentTabHost+Fragment实现底部tab切换一、问题描述在上次博文中，我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航（查看文章：/jerehedu/p/4607599.html#dxjmsj），接下来我们使用FragmentTabHost+Fragment实现底部tab切换，效果如图所示二、案例主要组件1、MainActivity布局把整个Activity分成两部TabHost和TabContent，TabHost包含各个tab，tab之间切换将在TabContent所关联的FrameLayout区域中显示各自板块的内容 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;itabs.length;i+) TabSpec tabSpec=tabHost.newTabSpec(tabsi).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;itabw.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); retu