先上最终效果图( 图像不是很清楚):
顶部的广告使用的是ConvenientBanner
和本文关系不大。仅做效果展示。
实际上这里使用NestedScrollView 来实现的如上效果。在使用NestedScrollView 嵌套ViewPager的时候出现几个问题:
- 1.ViewPager 中的Fragment 不显示
- 2.上下拖动ViewPager 不能垂直方向滚动
1.ViewPager 中的Fragment 不显示
给xml中ScrollView设置android:fillViewport="true"
属性。通过这个就可以让ViewPager中的内容显示。
顾名思义,这个属性允许 NestedScrollView中的组件去充满它。
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/com_bg_gray_eeeeee"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<com.bigkoo.convenientbanner.ConvenientBanner
android:id="@+id/acty_main_cbanner"
android:layout_width="match_parent"
android:layout_height="@dimen/comm_dim_150" />
<android.support.design.widget.TabLayout
android:id="@+id/acty_main_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/comm_dim_40"
android:layout_alignParentBottom="true"
app:tabBackground="@drawable/selector_tab_bg"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/com_tv_white_ffffff"
app:tabTextAppearance="@style/tab_txtSize"
app:tabTextColor="@color/com_tv_black_333333" />
<android.support.v4.view.ViewPager
android:id="@+id/acty_main_vp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
2.上下拖动ViewPager 不能垂直方向滚动
最开始使用的默认的ViewPager,发现不能上下滑动,然后通过查找别人的解决办法,NestedScrollView嵌套ViewPager后,如果viewPager中的fragment高度太长,会发现滑动不了,需要自定义ViewPager,测量ViewPager的高度.
public class WrapContentHeightViewPager extends ViewPager {
public WrapContentHeightViewPager(Context context) {
super(context);
}
public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = 0;
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = child.getMeasuredHeight();
if (h > height) height = h;
}
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
然后将xml布局的ViewPager替换为我们自定义的ViewPager
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/com_bg_gray_eeeeee"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<com.bigkoo.convenientbanner.ConvenientBanner
android:id="@+id/acty_main_cbanner"
android:layout_width="match_parent"
android:layout_height="@dimen/comm_dim_150" />
<android.support.design.widget.TabLayout
android:id="@+id/acty_main_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/comm_dim_40"
android:layout_alignParentBottom="true"
app:tabBackground="@drawable/selector_tab_bg"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/com_tv_white_ffffff"
app:tabTextAppearance="@style/tab_txtSize"
app:tabTextColor="@color/com_tv_black_333333" />
<com.aoben.qproj.widget.WrapContentHeightViewPager
android:id="@+id/acty_main_vp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
参考文章: