ViewPager+Fragment+TabLayout联合使用

一、主页面布局：

添加Tablayout和ViewPager两个控件

PS：使用前要先添加支持库：

ViewPager：
compile 'com.android.support:support-v4:23.4.0’
TabLayout：
compile 'com.android.support:design:24.0.0'

主布局代码：activity_main.xml:

PS：如果要将表情页置于底部，只需要将Tablayout放在ViewPager之后就好了。

二、主页面代码：

1、初始化控件：

TabLayout mTabLayout = (TabLayout) findViewById(R.id.*main_tablayout*);
CustomViewPager mPager = (CustomViewPager) findViewById(R.id.*viewpager*);

2、继承FragmentPagerAdapter创建适配器：

适配器的构造方法中需要传入一个FragmentManager参数，当我们在Fragment中使用ViewPager+fragment时，需要传入的是该父容器Fragment的getChildFragmentManager()方法返回值。
代码：

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    ArrayList list;//需要显示的fragment在构造器中传入

    public MyFragmentPagerAdapter(FragmentManager fm, ArrayList list) {

        super(fm);

        this.list = list;

    }

//返回显示的Fragment总数
    @Override

    public int getCount() {

        return list.size();

    }

//返回要显示的Fragment的某个实例
    @Override

    public Fragment getItem(int arg0) {

        return list.get(arg0);

    }

//返回一个自定义tab视图（用于自定义Tablayout标签，不自定义可忽略）
    public View getTabView(int position) {

        int layout_ids = R.layout.*tab_view_monthly*;

        if (position == 1) {

            layout_ids = R.layout.*tab_view_daily*;

        }

        View v = LayoutInflater.*from*(MainActivity.this).inflate(layout_ids, null);

        return v;

    }

//返回每个Tab的标题，当要自定义Tab的时候不应该重写该方法
//@Override
//
//public CharSequence getPageTitle(int position) {
//
//  return super.getPageTitle(position);
//}

}

3、设置ViewPager的适配器：

代码：

MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
mPager.setAdapter(fragmentPagerAdapter);

4、设置Tablayout绑定ViewPager：

代码：

mTabLayout.setupWithViewPager(mPager);
//设置标签的显示类型(TabLayout.*MODE_FIXED参数为平均地填充。*

mTabLayout.setTabMode(TabLayout.*MODE_FIXED*);

PS：到此基本完成基本的ViewPager+Tablayout+Fragment的多页面滑动效果的主界面。

三、自定义TabLayout的标签

（1）创建自定义Tablayout的tab的Style并设置：
代码：

或者直接在控件布局文件中设施属性：
主要设置一下几个：

app:tabIndicatorColor="@color/colorAccent”//设置选中标签下滑线的颜色

app:tabIndicatorHeight=“0dp”//设置选中标签下滑线的高度

app:tabPadding=“0dp”//设置标签内容对标签边框的距离

app:tabBackground="@android:color/transparent”//标签背景颜色

我们需要在设置好Tablayout和ViewPager绑定后设置Tablayout每个标签的视图，
代码：
for (int i = 0; i < mTabLayout.getTabCount(); i++) {

TabLayout.Tab tab = mTabLayout.getTabAt(i);//取出标签对象Tab

if (tab != null) {

    tab.setCustomView(fragmentPagerAdapter.getTabView(i));//设置新的视图
}

}
PS：其中创建自定义视图的代码在适配器中。亦可写在别的地方，不影响。

mPager.setCurrentItem(0);//设置默认显示第0个Fragment。

四、重写ViewPager，灵活设置是否禁止滑动

public class CustomViewPager extends ViewPager {

    private boolean isPagingEnabled = true;//是否禁止滑动

    public CustomViewPager(Context context) {

        super(context);

    }

    public CustomViewPager(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

//重写两个触摸事件，并放回是否确定滑动
    @Override

    public boolean onTouchEvent(MotionEvent event) {

        return this.isPagingEnabled && super.onTouchEvent(event);

    }

    @Override

    public boolean onInterceptTouchEvent(MotionEvent event) {

        return this.isPagingEnabled && super.onInterceptTouchEvent(event);

    }

//设置是否滑动

    public void setPagingEnabled(boolean b) {

        this.isPagingEnabled = b;

    }
}