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,最后贴上图