首先看一下效果圖肴焊，圖片來自于簡書APP
簡書App示例
做移動開發(fā)的小伙伴們肯定會遇到這樣的設計要求吧就乓，做為一個初級程序員要完成這個效果還是會遇到不少坑烹吵，所以在這里記錄一下惧眠，有什么問題也可以在下面的評論區(qū)留言打颤。
注意事項
- 本身項目中TabLayout只有三個模塊暴拄，所以只有三個Fragment,這個是跟上面的圖不太一樣的地方，這里提供的圖片只是一個大概的模型瘸洛。
- 簡書App的標題欄是有滑到頂部固定的效果揍移，這個因為不是本篇文章的重點，所以不再詳細說明反肋。
解決思路
- 當我們用ScrollView嵌套ViewPager的時候那伐，如果每個ViewPager的頁面高度不同會導致下面有一部分的空白，所以要在ViewPager切換頁面的時候重置它的高度石蔗，因此要重寫ViewPager罕邀。
- ViewPager的子布局是四個Fragment,如果Fragment里面是ListView的話，就要求我們獲取到這個ListView的高度养距。
實現(xiàn)步驟
第一步 重寫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設置滾動到底部的監(jiān)聽器實現(xiàn)的诉探，下面的內(nèi)容會提到。
第二步 重寫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實現(xiàn)
- 實現(xiàn)TabLayout和ViewPager的聯(lián)動
這個可以百度一下相關的文章肾胯，后面也可能專門寫一篇文章來詳細介紹 - ViewPager的滾動監(jiān)聽
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的滾動監(jiān)聽
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里面自定義加載數(shù)據(jù)的方法。
也有簡書的朋友推薦CoordinatorLayout+TabLayout+ViewPager實現(xiàn)耘纱，也是一種可行的辦法敬肚，不過這個要再研究一下，有結果的話就補充在文章的末尾束析。
