TabLayout结合ViewPager+Fragment实现常见界面

布局文件

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ccc"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/holo_red_light"
        app:tabTextColor="@android:color/black"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@android:color/holo_red_light" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />
</LinearLayout>

abIndicatorColor：Tab下面的横线颜色

tabTextColor：tab默认的文字颜色

tabSelectedTextColor：选中的tab的字体颜色

tabMode：模式(Scrollable fixed). 其中的fixed模式需要和tabGravity属性配合使用，此时tabGravity属性值为fill.

tabIndicatorHeight：设置tab底部的横线高度.为0dp时,不显示

main代码

package com.lisn.demo1.Fragment.CheckFragment;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.lisn.demo1.Fragment.Adapter.MyMainFragmentPagerAdapter;
import com.lisn.demo1.Fragment.BaseFragment;
import com.lisn.demo1.Fragment.Fragment_YL1.CaiDan1_Fragment;
import com.lisn.demo1.Fragment.Fragment_YL1.CaiDan2_Fragment;
import com.lisn.demo1.Fragment.Fragment_YL1.CaiDan3_Fragment;
import com.lisn.demo1.Fragment.Fragment_YL1.CaiDan4_Fragment;
import com.lisn.demo1.R;

import java.util.ArrayList;
import java.util.List;

/**
 * ****************************
 * 项目名称：demo1
 * 创建人：LiShan
 * 邮箱：cnlishan@163.com
 * 创建时间：2016/12/19
 * 版权所有违法必究
 * <p>尾气检测
 * ****************************
 */


public class WeiQi_Fragment extends BaseFragment {
    @Override
    protected View SetContentView(LayoutInflater inflater) {
        View view = inflater.inflate(R.layout.fragment_weiqi, null);
        return view;
    }

    @Override
    public void initView(View view) {
        //TabLayout
        tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
        viewPager = (ViewPager) view.findViewById(R.id.viewPager);
    }

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<Fragment> fragments=new ArrayList<>();

    @Override
    protected void initData() {
        super.initData();
        fragments.add(new CaiDan1_Fragment());
        fragments.add(new CaiDan2_Fragment());
        fragments.add(new CaiDan3_Fragment());
        fragments.add(new CaiDan4_Fragment());
        final String []titls=new String[]{"菜单1","菜单2","菜单3","菜单4"};

        MyMainFragmentPagerAdapter adapter = new MyMainFragmentPagerAdapter(getActivity().getSupportFragmentManager(),fragments){
            @Override
            public CharSequence getPageTitle(int position) {
                return titls[position];
            }
        };
        viewPager.setAdapter(adapter);

        // 一站式管理方式：setupWithViewPager()方法底部会调用FragmentPagerAdapter中的getPageTitle()方法.
        tabLayout.setupWithViewPager(viewPager);
    }


}

package com.lisn.demo1.Fragment.Adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.ArrayList;
import java.util.List;



public class MyMainFragmentPagerAdapter extends FragmentStatePagerAdapter {

    //数据源
    private List<Fragment> fragments = new ArrayList<Fragment>();

    /**
     * @param fm
     * @param fragments:数据源
     */
    public MyMainFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }
    /**
     * viewpager有几个界面
     * @return
     */
    @Override
    public int getCount() {
        return fragments.size();
    }

    /**
     * 获取条目:根据Position返回界面对应的fragment
     * @param position
     * @return
     */
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }
}