使用FragmentTabHost实现类似微信底部的效果

我也是新手，多的不讲，直接看代码。

一： 首先我们看看XML，注意以下三个标红的id必须使用android固定的id，不能使用其他id:

1.activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.yangmin.fragmenttabhostdemo.MainActivity">

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical">

           <FrameLayout
               android:id="@android:id/tabcontent"
               android:layout_width="match_parent"
               android:layout_height="0dp"
               android:layout_weight="1"/>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
       </LinearLayout>
    </android.support.v4.app.FragmentTabHost>
</RelativeLayout>
 

2. tab_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <ImageView
        android:id="@+id/image"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/mes"/>
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textSize="15sp"/>

</LinearLayout>
3.Fragemnt很简单，就不写了。

4.看MainActivity

public class MainActivity extends FragmentActivity implements TabHost.OnTabChangeListener {

    private FragmentTabHost tabHost;
    private LayoutInflater layoutInflater;
    private String[] bottom_title={"微信","通讯录","发现","我"};
    private  int[] image_sed={R.drawable.mes_sed,R.drawable.con_sed,R.drawable.find_sed,R.drawable.mine_sed};//选中是TabWidget的图标
    private  int[] image_non={R.drawable.mes,R.drawable.cont,R.drawable.find,R.drawable.mine};                  //未选中的图标
    private Class[] fragment_class = {MsgFragment.class,ContFragment.class,FindFragment.class,MineFragment.class};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        //初始默认将第一个设为选中状态
        tabHost.setCurrentTab(0);
        ImageView imageView= (ImageView) tabHost.getTabWidget().getChildAt(0).findViewById(R.id.image);
        imageView.setImageResource(image_sed[0]);
        tabHost.setOnTabChangedListener(this);
    }

    public void init(){
        tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        //初始化Tabhost
        tabHost.setup(this,getSupportFragmentManager(),android.R.id.tabcontent);
        for(int i=0;i<bottom_title.length;i++){
            TabHost.TabSpec spec=tabHost.newTabSpec(bottom_title[i]).setIndicator(getTabView(i,image_non));
            tabHost.addTab(spec,fragment_class[i],null);
        }

    }

    /**
     *
     * @param index tab的id
     * @param resouces  图标资源数组
     * @return  生成的TabWidget试图
     */
    public View getTabView(int index,int[] resouces){
        layoutInflater=getLayoutInflater();
        View view=layoutInflater.inflate(R.layout.tab_item,null);
        ImageView imageView= (ImageView) view.findViewById(R.id.image);
        imageView.setImageResource(resouces[index]);
        TextView textView= (TextView) view.findViewById(R.id.title);
        textView.setText(bottom_title[index]);
        return view;
    }

    //Tab切换后会调用此方法
    @Override
    public void onTabChanged(String tabId) {
        int id=0;
        //tabId就是上面设的TabSpec的tag,根据tag找出对应的id
        for(int i=0;i<bottom_title.length;i++){
            if(bottom_title[i].equals(tabId)){
                id=i;
            }
        }
        Log.w("onTabChanged","id="+id);
        //将当前选中的底部图标设为选中状态
        ImageView imageView= (ImageView) tabHost.getTabWidget().getChildAt(id).findViewById(R.id.image);
        imageView.setImageResource(image_sed[id]);
        //将其他的tab恢复初始状态
        for (int i=0;i<bottom_title.length;i++){
            if(i!=id){
                imageView= (ImageView) tabHost.getTabWidget().getChildAt(i).findViewById(R.id.image);
                imageView.setImageResource(image_non[i]);
            }
        }
    }

}