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"/>

 

　　想要了解更多内容的小伙伴，可以点击查看源码，亲自运行测试。

　　疑问咨询或技术交流，请加入官方QQ群： （452379712）

 

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