FragmentTabHost和fragment，viewpager,tablayout快速搭建一个底部导航栏的主界面

效果如下：

首先，我们分为两层解决第一层是底部导航栏和fragment的一层，第二个我们把fragment里面加上fragment，viewpager，tablayout.

第一层的 MainActivit的布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.oschina21.ui.activity.MainActivity">

    <!--主界面 -->
    <FrameLayout
        android:id="@+id/fl_main_show_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <!--底部-->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <android.support.v4.app.FragmentTabHost
            android:id="@+id/ftab_main_bottom_layout"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>
        
        <!--中间的按钮-->
        <ImageView
            android:layout_width="45dp"
            android:id="@+id/iv_main_click"
            android:layout_gravity="center"
            android:src="@drawable/tab_icon_selector"
            android:layout_height="45dp"/>
    </FrameLayout>

</LinearLayout>
2.用一个帧布局封装数据
package com.shsany.oschinademo;

import com.shsany.oschinademo.ui.NewsFragment;


/**
 * Created by ${WU} on 2018/1/22.
 */

public enum MainTabs {

    //上面是数据
    NEWS("NEWS", R.drawable.tab_icon_new, "综合", NewsFragment.class),
    TWEET("TWEET", R.drawable.tab_icon_tweet, "动弹", TweetFragment.class),
    SELECT("SELECT", R.drawable.tab_icon_selector, "弹一弹", NewsFragment.class),
    FIND("FIND", R.drawable.tab_icon_explore, "发现", NewsFragment.class),
    ME("ME", R.drawable.tab_icon_me, "我的", NewsFragment.class);



    //构造的定义
    public String mTag;
    //图片
    public int    mIv;

    //文字
    public String mText;

    //显示的class
    public Class mClass;

    MainTabs(String tag, int iv, String text, Class clss){
        this.mTag = tag;
        this.mIv = iv;
        this.mText = text;
        this.mClass = clss;
    }
3.MainACtivity的代码如下
package com.example.oschina21.ui.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import com.example.oschina21.R;
import com.example.oschina21.bean.MainTabs;
import com.example.oschina21.utils.ToastUtil;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends BaseActivity {

    @Bind(R.id.fl_main_show_layout)
    FrameLayout     mFlMainShowLayout;
    @Bind(R.id.ftab_main_bottom_layout)
    FragmentTabHost mFtabMainBottomLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        init();

    }

    //初始化而已
    private void init() {
        //与我们的fragemntLayout与fragmenttabhost进行绑定
        mFtabMainBottomLayout.setup(this, getSupportFragmentManager(), R.id.fl_main_show_layout);

        //添加页签


        MainTabs[] mainTabses = MainTabs.values();
        for (int i = 0; i < mainTabses.length; i++) {
            addShowTab(mainTabses[i], i);
        }
    }

    //添加一个条目
    private void addShowTab(MainTabs mainTabse, int i) {
        //给个指示器
        TabHost.TabSpec tabSpce = mFtabMainBottomLayout.newTabSpec(mainTabse.mTag);//复用

        //页签的内容
        View view = View.inflate(this, R.layout.tab_indicator, null);
        TextView title = (TextView) view.findViewById(R.id.tab_title);
        ImageView icon = (ImageView) view.findViewById(R.id.iv_icon);

        title.setText(mainTabse.mText);
        icon.setImageResource(mainTabse.mIv);

        //如果是中间的位置,那么我们进行隐藏
        if (i == 2) {
            view.setVisibility(View.INVISIBLE);
        }

        tabSpce.setIndicator(view);


        Class<? extends Fragment> clss = mainTabse.mClass;

        mFtabMainBottomLayout.addTab(tabSpce, clss, null);

        //去掉分隔线
        mFtabMainBottomLayout.getTabWidget().setDividerDrawable(null);
    }

    @OnClick(R.id.iv_main_click)
    public void onViewClicked(View view) {
        switch (view.getId()) {
                    case R.id.iv_main_click:
                        ToastUtil.showToast("中间被弹了");

                        break;

                    default:
                        break;

                }


    }
二.第二层的是fragment中加入fragment
1.封装好相关的信息
public class FragmentInfo {

    //展示的fragment
    public Fragment mFragment;

    //显示的标题
    public String title;

    public FragmentInfo(Fragment fragment, String title) {
        mFragment = fragment;
        this.title = title;
    }
}
2.建立一个基类，之后的所有展出的fragemnt都可以继承他
public abstract class BaseFragment extends Fragment {

    //使用ui框架进行切换
    private LoaderPager mLoaderPager;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //复用的问题,listview数据会重复添加的问题
        if (mLoaderPager == null) {
            mLoaderPager = new LoaderPager(getContext()) {
                @Override
                protected Object getNetData() {
                    return rquestData();//不能跟系统名或者已有的方法名重了
                }

                @Override
                protected View createSuccessView() {
                    return getSuccessView();
                }
            };
        }


        return mLoaderPager;
    }

    //得到一个成功的view
    protected abstract View getSuccessView();

    //这个请求数据的方法,带了线程了
    protected abstract Object rquestData();

    //提取一个刷新数据的方法
    public void refresh() {
        mLoaderPager.loadData();
    }

    //开启fragment
    public void startFragment(Class<? extends Fragment> fragmentClass, Bundle bundle, boolean isShowActionbar, String title, boolean isArrow, int titleLayout) {
        Intent intent = new Intent(getContext(), ShowActivity.class);
        intent.putExtra("classname", fragmentClass);
        intent.putExtra("bundle", bundle);
        intent.putExtra("isShowActionbar", isShowActionbar);
        intent.putExtra("title", title);
        intent.putExtra("isArrow", isArrow);
        intent.putExtra("view", titleLayout);
        startActivity(intent);
    }

    public void startFragment(Class<? extends Fragment> fragmentClass) {
        startFragment(fragmentClass, new Bundle(), false, "", false,0);
    }

    public void startFragment(Class<? extends Fragment> fragmentClass,String title) {
        startFragment(fragmentClass, new Bundle(), true, title, false,0);
    }

    public void startFragment(Class<? extends Fragment> fragmentClass,String title,Bundle bundle) {
        startFragment(fragmentClass, bundle, true, title, false,0);
    }
3.创建一个基类的tabLaout的基类，使导航栏切换时，都可以展示不同的tablaout
public abstract class BaseTablayoutFragment extends BaseFragment {

    @Bind(R.id.tab_news_title_layout)
    TabLayout mTabNewsTitleLayout;
    @Bind(R.id.vp_news_show_layout)
    ViewPager mVpNewsShowLayout;

    private List mShowItems = new ArrayList<>();

    @Override
    protected View getSuccessView() {
        View view = View.inflate(getContext(), R.layout.fragment_news, null);

        ButterKnife.bind(this, view);

        init();
        return view;
    }

    private void init() {

        //初始化标签

    /*    FragmentInfo fragmetinfo = new FragmentInfo();
        fragmetinfo.mFragment = new BaseRecyclerViewFragment();
        fragmetinfo.title = titles[0];
        mShowItems.add(fragmetinfo);
        FragmentInfo fragmetinfo1 = new FragmentInfo();
        fragmetinfo1.mFragment = new BaseRecyclerViewFragment();
        fragmetinfo1.title = titles[1];
        mShowItems.add(fragmetinfo1);
        FragmentInfo fragmetinfo2 = new FragmentInfo();
        fragmetinfo2.mFragment = new BaseRecyclerViewFragment();
        fragmetinfo2.title = titles[2];
        mShowItems.add(fragmetinfo2);
        FragmentInfo fragmetinfo3 = new FragmentInfo();
        fragmetinfo3.mFragment = new BaseRecyclerViewFragment();
        fragmetinfo3.title = titles[3];
        mShowItems.add(fragmetinfo3);*/

        mShowItems.addAll(getFragmentInfo());



        //初始化viewpager
        //fragment中的fragment使用getChildFragmentManager
        mVpNewsShowLayout.setAdapter(new NewsTitleList(getChildFragmentManager(),mShowItems));

        //让我们的tablayout与viewpager进行绑定
        mTabNewsTitleLayout.setupWithViewPager(mVpNewsShowLayout);

        //设置颜色
        int selectColor = Color.parseColor("#0DB22E");
        mTabNewsTitleLayout.setSelectedTabIndicatorColor(selectColor);

        int norColor = Color.parseColor("#9E9E9E");

        //文字的颜色
        mTabNewsTitleLayout.setTabTextColors(norColor,selectColor);

        //设置模式
        // 滚动模式
//        mTabNewsTitleLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        // 均分模式,默认的
        mTabNewsTitleLayout.setTabMode(TabLayout.MODE_FIXED);

        //这个需要根据情况而定
        //1. 如果是固定的小于等于4个,使用均分
        //2. 如果大于4个使用滚动
        //3. 如果后期可以动态添加的,那么4个以上就使用滚动
    }

    public abstract List<FragmentInfo> getFragmentInfo() ;

    @Override
    protected Object rquestData() {
        return "";
    }

3.在相应的导航图标的fragment添加fragment和title就可以实现相关主界面了
public class NewsFragment  extends BaseTablayoutFragment {
    @Override
    public List<FragmentInfo> getFragmentInfo() {
        List<FragmentInfo> fragmentInfos = new ArrayList<>();
            String[] titles = Utils.getStringArray(R.array.general_viewpage_arrays);
            fragmentInfos.add(new FragmentInfo(new NewFragment(), titles[0]));
            fragmentInfos.add(new FragmentInfo(new BlogFragment(), titles[1]));
            fragmentInfos.add(new FragmentInfo(new BlogFragment(), titles[2]));
            fragmentInfos.add(new FragmentInfo(new ActiveFragment(), titles[3]));
        return fragmentInfos;
    }
}