利用FragmentTabHost完成底部菜单

• 利用FragmentTabHost完成底部菜单
  • activity_mainxml
  • tab_indicatorxml每个tab对应的布局视图
  • 4个fragment
    • CartFragmentclass
    • HomeFragmentclass
    • MineFragmentclass
    • TataFragmentclass
  • TabItemclass
  • 初始化tab数据
  • 初始化tabHost

利用FragmentTabHost完成底部菜单

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--注意id是系统内部的tabhost-->
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--注意id是系统内部的tabcontent-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/tabbar_content_bg" />

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/margin_1_dp"
            android:background="@color/tabbar_line_color" />
        <!--注意id是系统内部的tabs-->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tabbar_height"
            android:layout_gravity="bottom" />

    </LinearLayout>

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

tab_indicator.xml（每个tab对应的布局视图）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/white">

    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:contentDescription="@null"
        android:src="@mipmap/apk_bottom_ic_first"/>

    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tabbar_home_text"
        android:textColor="@color/tabbar_text_normal_color"
        android:layout_marginTop="@dimen/margin_2_dp"
        android:textSize="10sp"/>

</LinearLayout>

4个fragment

fragment中大家可能会发现没onCreare()、onCreateView()这些方法，是因为我是基于自己定义的BaseFragment，省去了大部分的写法，大家可以不用太在意

CartFragment.class

package com.tc.mobileshop.project.cart.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.mvp.presenter.MvpPresenter;
import com.tc.mobileshop.mvp.view.MvpView;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 购物车
 * Created by 辉神 on 2016/8/8.
 */

public class CartFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_cart;
    }


}

HomeFragment.class

package com.tc.mobileshop.project.home.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 主页
 * Created by 辉神 on 2016/8/8.
 */

public class HomeFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_home;
    }


}

MineFragment.class

package com.tc.mobileshop.project.mine.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 我的
 * Created by 辉神 on 2016/8/8.
 */

public class MineFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_mine;
    }


}

TataFragment.class

package com.tc.mobileshop.project.tata.view;

import android.view.View;

import com.tc.mobileshop.R;
import com.tc.mobileshop.project.base.view.BaseFrament;

/**
 * 她她圈
 * Created by 辉神 on 2016/8/8.
 */

public class TataFragment extends BaseFrament {
    @Override
    protected void initContentView(View contentView) {

    }

    @Override
    public int bindeLayoutId() {
        return R.layout.fragment_tata;
    }


}

TabItem.class

    /**
     * tab数据
     */
    private class TabItem {
        //正常的tab图片
        private int tabImageNomalRes;
        //tab被点击时的图片
        private int tabImagePressRes;
        //tab标题
        private int tabtextRes;
        //当前tab所属的fragment
        private Class<? extends Fragment> fragmentClass;
        //当前tab的视图
        private View view;
        //当前tab的文字标题
        private TextView tabTitle;
        //当前tab的图标
        private ImageView tabImage;

        public TabItem(
                int tabImageNomalRes,
                int tabImagePressRes,
                int tabtext,
                Class<? extends Fragment> fragmentClass) {
            this.tabImageNomalRes = tabImageNomalRes;
            this.tabImagePressRes = tabImagePressRes;
            this.tabtextRes = tabtext;
            this.fragmentClass = fragmentClass;
        }

        /***
         * 返回tab标题
         *
         * @return
         */
        private String getTitleStr() {
            return (String) getResources().getText(tabtextRes);
        }

        /**
         * 初始化tab中的View，并返回View
         * @return
         */
        public View getIndicator() {
            if (view == null) {
                view = getLayoutInflater().inflate(R.layout.tab_indicator, null);
                tabTitle = (TextView) view.findViewById(R.id.tv_tab);
                tabImage = (ImageView) view.findViewById(R.id.iv_tab);
                tabImage.setImageResource(tabImageNomalRes);//默认正常图片
                tabTitle.setText(getTitleStr());
            }
            return view;
        }

        /**
         * 通过判断是否选中，来变更图片
         *
         * @param checked
         */
        private void setChecked(boolean checked) {
            if (checked) {
                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_press_color));
                tabImage.setImageResource(tabImagePressRes);
            } else {
                tabTitle.setTextColor(getResources().getColor(R.color.tabbar_text_normal_color));
                tabImage.setImageResource(tabImageNomalRes);
            }
        }
    }

初始化tab数据

    /**
     * 初始化tab数据
     */
    private void initTabItemData() {
        tabItems = new ArrayList<>();
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_first, R.mipmap.apk_bottom_ic_first_up, R.string.tabbar_home_text, HomeFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_tata, R.mipmap.apk_bottom_ic_tata_up, R.string.tabbar_tata_text, TataFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_buy, R.mipmap.apk_bottom_ic_buy_up, R.string.tabbar_cart_text, CartFragment.class));
        tabItems.add(
                new TabItem(R.mipmap.apk_bottom_ic_mine, R.mipmap.apk_bottom_ic_mine_up, R.string.tabbar_mine_text, MineFragment.class));
    }

初始化tabHost

    /**
     * 初始化tabHost
     */
    private void initTabHost() {
        fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        fragmentTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
        //去掉tab的分隔线
        fragmentTabHost.getTabWidget().setDividerDrawable(null);
        for (int i = 0; i < tabItems.size(); i++) {
            TabItem tabitem = tabItems.get(i);
            //创建一个Tab
            TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(tabitem.getTitleStr()).setIndicator(tabitem.getIndicator());
            //将tab添加到tabHost中
            fragmentTabHost.addTab(tabSpec, tabitem.fragmentClass, null);
            //指定Tab的北景
            fragmentTabHost.getTabWidget().setBackgroundColor(Color.WHITE);
            //设置tab改变的监听
            fragmentTabHost.setOnTabChangedListener(this);
            //首页是默认选中，所以应该设置首页为选中的图片
            if (i == 0) {
                tabitem.setChecked(true);
            }
        }

    }
    /**
     * 监听改变，用于点击时改变图标
     * @param tabId
     */
    @Override
    public void onTabChanged(String tabId) {
        for (int i = 0; i < tabItems.size(); i++) {
            TabItem tabItem = tabItems.get(i);
            if (tabId.equals(tabItem.getTitleStr())) {
                tabItem.setChecked(true);
            } else {
                tabItem.setChecked(false);
            }
        }
    }