使用FragmentTabHost切换碎片（这是一个仿购物车的主界面）

来吧，皮卡丘们，先看效果：这个效果其实挺简单的，以前没有用过这个走了很多弯路，用了他之后才知道有多方便，以后再写这种效果就可以直接CV了，来，上代码：

其中有两个主要点：android:id/tabhost 和 @+id/realtabcontent，前者为系统定义的 TabHost 导航条，后者为主体内容（即 Tab 点击时，加载 Fragment 区域）

<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=".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="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" >

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:divider="@null"
                >
            </TabWidget>

        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

</RelativeLayout>

然后在整一个加载文字的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mine"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.0">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@drawable/text_change"
        android:textSize="13sp" />

</FrameLayout>

为了实现当点击哪个按钮的时候可以改变相应的图片和文字的颜色，所以我们弄一个自定义一个选择器：

改变图片的：因为我是把图片放在mipmap里的，所以是mipmap/shouye2x

首页的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/shouye12x" android:state_selected="true" />
    <item android:drawable="@mipmap/shouye2x" android:state_selected="false" />
</selector>

附近的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/dingwei12x" android:state_selected="true" />
    <item android:drawable="@mipmap/dingwei2x" android:state_selected="false" />
</selector>

购物车的：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/gouwuche12x" android:state_selected="true" />
    <item android:drawable="@mipmap/gouwuche2x" android:state_selected="false" />
</selector>

个人中心的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/gerenzhongxin12x" android:state_selected="true" />
    <item android:drawable="@mipmap/gerenzhongxin2x" android:state_selected="false" />
</selector>

改变字体颜色的：text_change

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#ff1212"/>
    <item android:color="#000000"/>
</selector>

准备工作做好之后那我们就上代码吧

public class MainActivity extends FragmentActivity {
    private FragmentTabHost mTabhost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 实例化tabhost对象，得到tabhost
        mTabhost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        //通过使用 mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent)将两者结合起来
        mTabhost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
        //文字
        String[] titles = new String[]{"首页", "附近", "购物车", "个人中心"};
        //图片
        int[] selectors = new int[]{R.drawable.homepage, R.drawable.fujin,
                R.drawable.cart, R.drawable.center};
        //类
        Class[] fragmentName = new Class[]{
                HomePageFragment.class,
                NearbyFragment.class,
                ShoppingCartFragment.class,
                PeopleCenterFragment.class,};
        //得到一个布局管理器是为了加载我们文字的布局
        LayoutInflater inflater = getLayoutInflater();
        for (int i = 0; i < titles.length; i++) {
            View inflate = inflater.inflate(R.layout.tab_item, null);

            TextView tv_title = (TextView) inflate.findViewById(R.id.tv_title);
            tv_title.setText(titles[i]);
            Drawable top = getResources().getDrawable(selectors[i]);
            tv_title.setCompoundDrawablesWithIntrinsicBounds(null, top, null, null);
            // 为每一个tab设置图标和选项卡， 将spec和Fragment添加到每个选项卡中
            mTabhost.addTab(mTabhost.newTabSpec(titles[i]).setIndicator(inflate), fragmentName[i], null);
        }

    }
}

这样就OK了，很方便的