ScrollView+TabLayout+ViewPager嵌套

首先看一下效果图，图片来自于简书APP

简书App示例

做移动开发的小伙伴们肯定会遇到这样的设计要求吧，做为一个初级程序员要完成这个效果还是会遇到不少坑，所以在这里记录一下，有什么问题也可以在下面的评论区留言。

注意事项

本身项目中TabLayout只有三个模块，所以只有三个Fragment,这个是跟上面的图不太一样的地方，这里提供的图片只是一个大概的模型。
简书App的标题栏是有滑到顶部固定的效果，这个因为不是本篇文章的重点，所以不再详细说明。

解决思路

当我们用ScrollView嵌套ViewPager的时候，如果每个ViewPager的页面高度不同会导致下面有一部分的空白，所以要在ViewPager切换页面的时候重置它的高度，因此要重写ViewPager。
ViewPager的子布局是四个Fragment,如果Fragment里面是ListView的话，就要求我们获取到这个ListView的高度。

实现步骤

第一步重写ListView

public class MyListView extends ListView {

    public MyListView(Context context) {
        super(context);
    }

    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = View.MeasureSpec.makeMeasureSpec(
                Integer.MAX_VALUE >> 2, View.MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}

注意这里LsitView分页加载的功能是通过给ScrollView设置滚动到底部的监听器实现的，下面的内容会提到。

第二步重写ViewPager

public class PersonalViewPager extends ViewPager {

    private int position;
    
    private HashMap<Integer, Integer> maps = new LinkedHashMap<Integer, Integer>();

    public PersonalViewPager(Context context) {
        super(context);
    }

    public PersonalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = 0;
        for (int i = 0; i < this.getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec,
                    MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            maps.put(i, h);
        }
        if (getChildCount() > 0) {
            height = getChildAt(position).getMeasuredHeight();
        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height,
                MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 在切换tab的时候，重置viewPager的高度
     */
    public void resetHeight(int position) {
        this.position = position;
        if (maps.size() > position) {
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, maps.get(position));
            } else {
                layoutParams.height = maps.get(position);
            }
            setLayoutParams(layoutParams);
        }
    }
}

第三步重写ScrollView

public class PersonalScrollView extends ScrollView {

    public PersonalScrollView(Context context) {
        super(context);
    }

    public PersonalScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public PersonalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);

        View view = (View) getChildAt(getChildCount() - 1);

        int d = view.getBottom();

        d -= (getHeight() + getScrollY());

        if ((d == 0) && (onScrollBottomListener != null)) {
            onScrollBottomListener.onScrollBottom();
        }
    }

    public OnScrollBottomListener onScrollBottomListener = null;

    public interface OnScrollBottomListener {
        void onScrollBottom();
    }

    public void setOnScrollBottomListener(OnScrollBottomListener onScrollBottomListener) {
        this.onScrollBottomListener = onScrollBottomListener;
    }
}

第四步 Activity实现

实现TabLayout和ViewPager的联动
这个可以百度一下相关的文章，后面也可能专门写一篇文章来详细介绍
ViewPager的滚动监听

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    mViewPager.resetHeight(0);
                } else if (position == 1) {
                    mViewPager.resetHeight(1);
                } else if (position == 2) {
                    mViewPager.resetHeight(2);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

ScrollView的滚动监听

mScrollView.setOnScrollBottomListener(new PersonalScrollView.OnScrollBottomListener() {
            @Override
            public void onScrollBottom() {
                if (mTabLayout.getSelectedTabPosition() == 0) {
                    ((PersonalCourseFragment) fragmentList.get(0)).loadData();
                } else if (mTabLayout.getSelectedTabPosition() == 1) {
                    ((PersonalNewsFragment) fragmentList.get(1)).loadData();
                } else if (mTabLayout.getSelectedTabPosition() == 2) {
                    ((PersonalIssueAnswerFragment) fragmentList.get(2)).loadData();
                }
            }
        });

这里的loadData()方法是在Fragment里面自定义加载数据的方法。

也有简书的朋友推荐CoordinatorLayout+TabLayout+ViewPager实现，也是一种可行的办法，不过这个要再研究一下，有结果的话就补充在文章的末尾。

全部栏目