首先看一下效果图，图片来自于简书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实现，也是一种可行的办法，不过这个要再研究一下，有结果的话就补充在文章的末尾。
