TabLayout+View Pager+Fragment 实现页面左右滑动切换

一、先上图看看效果

二、添加依赖

//因为TabLayout是Android Design Support Library 中的控件，所以需要在build.gradle添加依赖compile 'com.android.support:design:25.2.0'

三、界面布局代码

注意：使用app属性的时候需要先引入app的命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

<android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="40dp"        android:layout_below="@id/rl_topbar"        app:tabBackground="@color/topBarBackgound"        app:tabIndicatorColor="@color/tabTextChenked"        app:tabSelectedTextColor="@color/tabTextChenked"        app:tabIndicatorHeight="2dp"        app:tabTextColor="@color/topBarText"        >    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager_tab"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/tabLayout">    </android.support.v4.view.ViewPager>

四、定义类继承FragmentPagerAdapter

public class TabAdapter extends FragmentPagerAdapter {//tab文字标题    private String[] mTabData;//需要显示的Fragment的集合    private List<Fragment> mfragmentList;    public TabAdapter(FragmentManager fm,String[] tabData,List<Fragment> fragmentList) {        super(fm);        this.mTabData = tabData;        this.mfragmentList = fragmentList;    }//根据position返回需要显示的Fragment    @Override    public Fragment getItem(int position) {        return mfragmentList.get(position);    }//获取需要显示Fragment的数据量，有几个标题就肯定有几个Fragment，所以直接拿数组的长度就可以了    @Override    public int getCount() {        return mTabData.length;    }//返回tab的标题文字数据    @Override    public CharSequence getPageTitle(int position) {        return mTabData[position];    }}

这里需要注意的是，我在编写的时候Fragment只能使用V4包下不然 Adapter中的getItem方法的返回类型会不一致。

五、代码中设置

//将需要显示的Fragment添加到集合当中        fragmentList = new ArrayList<Fragment>();        fragmentList.add(bbcSixminutesFragment);        fragmentList.add(tunnelEnglishFragment);        fragmentList.add(bbcNewsFragment);        fragmentList.add(newsVocabularyFragment);        //设置Tab        TabAdapter tabAdapter = new TabAdapter(getSupportFragmentManager(),tabData,fragmentList);        //设置ViewPager的适配器        viewpager_tab.setAdapter(tabAdapter);        //绑定Tab        tabLayout.setupWithViewPager(viewpager_tab);