你的位置:首页 > 操作系统

[操作系统]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 ="http://schemas.android.com/apk/res/android"  ="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.
<??><RelativeLayout ="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群:JRedu技术交流 (452379712)

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。