FragmentTabHost的使用

FragmentTabHost的使用

先上xml的内容，需要注意的是FragmentTabHost的id是@android:id/tabhost 并且里面包裹的FrametLayout的id也是@android:id/tabcontent，请不要随意改动哦

<!-- 存放主要页面内容 -->

<FrameLayout
    android:id="@+id/maincontent"
    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="@color/colorPrimary">

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

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

---

然后看下代码的写法，这里用的是Butterknife的插件，相当于findByid，还是再说一遍，上面提到控件的id是android.R.id.tabhost和android.R.id.tabcontent

@BindView(R.id.maincontent)
FrameLayout maincontent;

@BindView(android.R.id.tabcontent)
FrameLayout tabcontent;

@BindView(android.R.id.tabhost)
FragmentTabHost tabhost;

//声明几个Fragment
private Class[] fragmentArray = {MainFragment.class, StoreFragment.class, MyShopCarFragmet.class, MySelfFragment.class};

// 定义数组来存放按钮图片与下面的title对应也和上面的Fragment对应(这里不是单单的一个图片，而是写好了切换的属性，下面会上代码)
private int[] imgarry = {R.drawable.one_tab, R.drawable.two_tab, R.drawable.three_tab, R.drawable.four_tab};
//几个Fragment的提示性文字
private String[] title = {"首页", "分类", "购物车", "我的"};

---

接下来写一个R.drawable.one_tab的代码，其他的几个照葫芦画瓢

---

下面开始正式上代码了

    private void initView() {

     tabhost.setup(this, getSupportFragmentManager(), R.id.maincontent);
     //这个没啥好说的，就是绑定内容区域的FrameLayout

       for (int i = 0; i < fragmentArray.length; i++) {
        //为每一个Tab按钮设置图标、文字和内容
        TabHost.TabSpec tabSpec = tabhost.newTabSpec(title[i]).setIndicator(getTabItemView(i));//getTabItemView()给Tab按钮设置图标和文字
        //将Tab按钮添加进Tab选项卡中（后面的参数bundle可以为null，这里是给Fragment传值，按需求添加，在Fragment里面用getArguments()方法来取这里bundle的值）
        tabhost.addTab(tabSpec, fragmentArray[i], bundle);
        // 设置Tab按钮的背景
        //tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.white);
        tabhost.getTabWidget().setDividerDrawable(null);//去掉间隔的竖线
    }
     updateTab(tabhost);// 初始化Tab的颜色，和字体的颜色
     //每次切换的时候都会走这个方法
        tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {  
                tabhost.setCurrentTabByTag(tabId);
                updateTab(tabhost);  
        }
    });
    }
    /**
 * 给Tab按钮设置图标和文字
 */
private View getTabItemView(int index) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
    ImageView imageView = (ImageView) view.findViewById(R.id.tabimg);
    imageView.setImageResource(imgarry[index]);
    TextView textView = (TextView) view.findViewById(R.id.tabname);
    textView.setText(title[index]);
    return view;
}

        /**
 * 更新Tab标签的颜色，和字体的颜色
 *
 * @param tabHost
 */
public void updateTab(TabHost tabHost) {
    for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
        View view = tabHost.getTabWidget().getChildAt(i);
        TextView tv = (TextView) view.findViewById(R.id.tabname);
        //tv.setTypeface(Typeface.SERIF, 2); // 设置字体和风格
        String familyName = "宋体";
        Typeface font = Typeface.create(familyName, Typeface.NORMAL);
        tv.setTypeface(font);
        if (tabHost.getCurrentTab() == i) {// 选中
            // view.setBackgroundDrawable(getResources().getDrawable(R.drawable.category_current));//选中后的背景
            tv.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));
        } else {// 不选中
            // view.setBackgroundDrawable(getResources().getDrawable(R.drawable.category_bg));//非选择的背景
            tv.setTextColor(ContextCompat.getColor(context, R.color.colorPrimary));
        }
    }
}

第一次发表博客，还不熟练，有写的不对的地方希望大家多多指教，高手勿喷！