android tab页可以嵌套面包削吗,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 maps = new LinkedHashMap();

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实现，也是一种可行的办法，不过这个要再研究一下，有结果的话就补充在文章的末尾。