Tablayout+viewpager+fragment实现tab导航以及滑动切换

Tablayout+viewpager实现头部导航

虽然已经有很多的博客以及案例可以找到，但是为了提高自己，所以想着养成写博客的习惯。同时也方便自己以后需要的时候可以直接拿来用，下面

进入正题：

首先呢，TabLayout是Android5.0后出的新控件，使用需要导入design包，一般情况下，TabLayout需要和ViewPager搭配使用。使用步骤如下：

先导入支持包
compile 'com.android.support:design:23.2.0'
xml布局文件如下
<?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="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="@color/gray_back_color"
    tools:context="com.transfar.app.aip.activity.basiclevelapp.BasicLevelAppActivity">
    <include layout="@layout/child_header_layout"/>
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/margin_70"
        android:paddingLeft="@dimen/margin_10"
        android:paddingRight="@dimen/margin_10"
        android:background="@color/white"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"/>
    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_marginTop="@dimen/margin_20"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
设置tab的字体大小：
<span style="font-size:14px;color:#333333;"><style name="TabLayoutTextStyle">
        <item name="android:textSize">@dimen/font_18</item>
    </style></span>
关于Tablayout的背景及字体修改可参考博客：http://blog.csdn.net/ming2316780/article/details/51763864 点击打开链接
activity代码如下：
<span style="color:#333333;">@ContentView(R.layout.activity_basic_level_app)
public class BasicLevelAppActivity extends BaseActivity {
    @ViewInject(R.id.tabs)
    private TabLayout mTabLayout;
    @ViewInject(R.id.vp_view)
    private ViewPager mViewPager;
    private List<String> mTitleList = new ArrayList<>();//页卡标题集合
    private BasiclevelFragmentAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initViewData();
        setHeaderTitleVisible(false);
        setBackTitle("基层党建");
    }
    private void initViewData(){
        mTitleList.add("本村");
        mTitleList.add("公开");
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));//添加tab选项卡
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式

        mAdapter = new BasiclevelFragmentAdapter(getFragmentManager(),mTitleList);
        mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
        mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }
}</span><span style="color:#ff0000;">
</span>
适配器代码如下：
<span style="font-size:14px;color:#333333;">public class BasiclevelFragmentAdapter extends FragmentPagerAdapter {
    private List<String> list;
    private int nNumOfTabs;

    public BasiclevelFragmentAdapter(FragmentManager fm, List<String> list){
        super(fm);
        this.list = list;
    }
    @Override
    public Fragment getItem(int position) {
        switch(position)
        {
            case 0:
                BasicVillageFragment tab1=new BasicVillageFragment();
                return tab1;
            case 1:
                BasicLevelCommonFragment tab2=new BasicLevelCommonFragment();
                return tab2;
        }
        return null;
    }

    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return list.get(position);
    }
}</span>
记得重写getpageTitle()方法，设置tab的标题。fragment的代码就不贴上了，就是个listvie,最后贴上图