使用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了，很方便的