嵌套 ScrollView 中的 ViewPager

我需要创建一个类似谷歌报摊的界面，这是一种 ViewPager (水平滚动)在一个折叠的标题(垂直滚动)。我的需求之一是使用在 GoogleIO 2015上提供的新的设计支持库。 (http://android-developers.blogspot.ca/2015/05/android-design-support-library.html)

基于 Chris Banes (https://github.com/chrisbanes/cheesesquare)创建的示例，我已经达到了这样一个点: 我能够使用一个基本的 LinearLayout (没有水平滚动)来实现折叠行为。

我试图用 ViewPager 替换 LinearLayout，结果得到了一个空白屏幕。我玩: 宽度，重量和各种视图组，但... 。还是一片空白。看起来 ViewPager 和 NestedScrollView 并不喜欢对方。

我尝试使用 HorizontalScrollView 来解决这个问题: 它可以工作，但是我失去了 PagerTitleStrip 功能的好处，而且我只关注一个面板(我可以在两个面板之间水平停止)。

现在我没有更多的想法，如果有人能带我找到解决办法..。

谢谢

这是我最新的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">


<include
layout="@layout/part_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"/>


<android.support.v7.widget.Toolbar
android:id="@+id/activity_main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
android:id="@+id/activity_main_nestedscrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.v4.view.ViewPager
android:id="@+id/activity_main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFA0"/>




</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
90609 次浏览
小开

你可以这样试试，浏览器工作正常，但浏览器的高度是固定的。

我仍然在寻找更好的解决方案... ，所以请让我知道任何一点可以做得更好，谢谢

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="800dp"
android:orientation="vertical">


<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
小开

以下内容应确保视图页导航器的适当高度。片段是视图寻呼机提供的第一个片段。

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>


<fragment
class="com.mydomain.MyViewPagerFragment"
android:id="@+id/myFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>


</LinearLayout>


</android.support.v4.widget.NestedScrollView>
小开

我也有同样的愿望，在一个 NestedScrollView中嵌入一个 ViewPager。但我也不喜欢。在我的例子中，ViewPager位于 Fragment内部，因此我可以根据与抽屉的交互来切换内容。当然，AppBar、崩溃等和所有支持库的新特性都必须正常工作。

如果一个用户在页面中垂直滚动一个页面，我希望其他页面也能滚动，以给用户一个页面自身滚动的总体印象。

我所做的工作就是不再将 ViewPager嵌入到 NestedScrollView中，而是将所包含片段的内容嵌入到 NestedScrollView中。

然后，对于一个片段中的一个滚动，我通知容器新的滚动位置，该位置存储它。

最后，在从寻呼机检测到的向左或向右滑动时(使用 addOnPageChangeListener查找拖动状态) ，我通知目标左或向右片段它必须在哪里滚动(基于容器知识)才能与我来自的片段对齐。

小开

也有同样的问题。

当把 NestedScrollView在附近视图页面，它不会工作。

然而，真正起作用的是将 NestedScrollViewinside的片段布局放入到 ViewPager 中。





<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@id/fragment_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:orientation="vertical">
...Content...
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

小开

我用 ViewPager和 NestedScrollView做了个小样。我遇到的问题是 ViewPager和 ListView的高度。所以我对 ListView和 ViewPager's的高度测量做了一些修改。

如果有人想查看代码，这里是链接: https://github.com/TheLittleNaruto/SupportDesignExample/

产出:

enter image description here

小开

我也有同样的问题，只是做了一些修改。ViewPager在 NestedScrollView内不工作。简单地把你的 ViewPager作为你的 CoordinatorLayout的直接子代。然后是 每个 ViewPager 片段的内容应该包含在 NestedScrollView中。就这样。

小开

I know one working solution: You use Activity, with CoordinatorLayout and use FrameLayout, container. Then. use fragment manager to put fragment in container. For example my code:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="@dimen/toolbar_height"
android:background="?attr/colorPrimary"
android:gravity="center">


</android.support.v7.widget.Toolbar>




</android.support.design.widget.AppBarLayout>


<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


</FrameLayout>

片段:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.improvemdia.inmyroom.MainFragment">


<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

然后使用 FragmentManager

getSupportFragmentManager().beginTransaction()
.replace(R.id.container, new MainFragment())
.commit();
小开

我也遇到过类似的问题(但是没有 CollapsingToolbarLayout，只有一个简单的 Toolbar + TabLayout在 AppBarLayout中)。我希望工具栏滚动时，看不到在 NestedScrollView内向下滚动的 ViewPager的内容。

我的布局是这样的:

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">


<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>


<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/my_tab_layout"
android:fillViewport="false"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>


<android.support.v4.widget.NestedScrollView
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_gravity="fill_vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.v4.view.ViewPager
android:id="@+id/my_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

这个布局并没有按照预期的那样工作，但是我通过简单地去掉 NestedScrollView而使用 LinearLayout来解决这个问题。它立刻在 Android 支持库 v23.1.0上为我工作。布局是这样结束的:

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">


<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>


<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/my_tab_layout"
android:fillViewport="false"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>


<LinearLayout
android:orientation="vertical"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="4dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.v4.view.ViewPager
android:id="@+id/my_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</LinearLayout>


</android.support.design.widget.CoordinatorLayout>

PS: 这实际上是我项目中的两个布局文件。我将它们复制粘贴到这里，并尝试将它们组织成单个文件的样子。对不起，如果我搞砸了复制粘贴，但请让我知道，如果是这样的情况下，我可以修复它。

小开

我遇到这个问题，我用 setFillViewport (true)解决它

<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="@+id/nest_scrollview"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="mio.kon.yyb.nestedscrollviewbug.ScrollingActivity"
tools:showIn="@layout/activity_scrolling">




<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

在活动中

  NestedScrollView scrollView = (NestedScrollView) findViewById (R.id.nest_scrollview);
scrollView.setFillViewport (true);

enter image description here

小开

在花了几个小时尝试以上所有的建议之后，我终于做到了。关键是将 NestedScrollView放在 PageViewer内部，并将 layout_behavior设置为 '@string/appbar_scrolling_view_behavior'以获得 都有视图。最终的布局是这样的

<CoordinatorLayout>
<ViewPager app:layout_behavior="@string/appbar_scrolling_view_behavior">
<NestedScrollView fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior">
<Content>...</Content>
</NestedScrollView>
</ViewPager>
<AppBarLayout>...</AppBarLayout>
</CoordinatorLayout>
小开

我删除了 NestedScrollView的主要布局和插入作为一个 父母在我的所有 Fragment布局，应该在 ViewPager加载为我修复这个问题。

小开

您不需要使用 NestedScrollView 来获得视差效果。 试试这样:

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">


<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">


<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>


<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/my_tab_layout"
android:fillViewport="false"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>


<android.support.v4.view.ViewPager
android:id="@+id/my_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


</android.support.design.widget.CoordinatorLayout>
小开

Instead of placing ViewPager inside the NestedScrollView, do it the other way around.

将 NestedScrollView 放置在 ViewPager 内的子视图中，这实质上就是片段的布局。如果片段的列表布局非常简单，那么很有可能甚至不需要使用 NestedScrollView。

示例布局

活动内容:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">


<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">


<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/app_bar_height"
android:scaleType="centerCrop"
android:src="@drawable/my_bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />


</android.support.design.widget.CollapsingToolbarLayout>


</android.support.design.widget.AppBarLayout>


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">


<android.support.design.widget.TabLayout
android:id="@+id/content_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />


<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>


</android.support.design.widget.CoordinatorLayout>

如果不需要 TabLayout，可以丢弃 LinearLayout，使 ViewPager 成为独立的。但是一定要在 ViewPager 属性中使用 app:layout_behavior="@string/appbar_scrolling_view_behavior"。

简单片段的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

复杂碎片的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>

Example App: 崩溃 ToolbarPoc

enter image description here

小开

我有一个应用程序工具栏的布局，下面是 NestedScrollView，然后在嵌套工具栏里面是一个 LinearLayout，下面是一个视图页面。我的想法是，NestedScrollView 内部的 LinearLayout 是固定的——你可以在视图页面的视图之间左右滑动，但是这些内容不会移动，至少 水平方向不会。由于嵌套的滚动视图，您仍然可以垂直滚动所有内容。就是这个意思。因此，我将嵌套的 NestedScrollView 高度设置为 match _ father，填充 viewport，然后将所有子布局/ViewPager 设置为 wrash _ content。

在我看来，这是对的。但是它不起作用-ViewPager 允许我向左/向右移动，但是不允许垂直滚动，不管视图页面内容是否被推到当前屏幕的底部。事实证明，这主要是因为 ViewPager 不尊重其各个页面之间的包装内容。

我通过对 ViewPager 进行子类化，使其根据当前选择的条目更改高度，从而强制它的行为类似于 lay_ height = “ wrash _ content”:

public class ContentWrappingViewPager extends ViewPager {


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


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


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {


int height = 0;
if (getChildCount() > getCurrentItem()) {
View child = getChildAt(getCurrentItem());
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);
}
}

Solution was inspired by 这个答案. Worked for me!

小开

在你的 NestedScrollView中加入 android:fillViewport="true"。句号。

小开

您只需删除 xml 上的 NestedScrollView并在类上添加此代码

yourGridView.setNestedScrollingEnabled(true);

小开

Use below customized class to resolve your problem. 不要忘记在 pagechangelistener 上调用 onRefresh ()方法。

public class ContentWrappingViewPager extends ViewPager
{
private int width = 0;
public ContentWrappingViewPager(Context context) {
super(context);
}


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


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int height = 0;
width = widthMeasureSpec;
if (getChildCount() > getCurrentItem()) {
View child = getChildAt(getCurrentItem());
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);
}


public void onRefresh()
{
try {
int height = 0;
if (getChildCount() > getCurrentItem()) {
View child = getChildAt(getCurrentItem());
child.measure(width, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = child.getMeasuredHeight();
if(h > height) height = h;
}


int heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
ViewGroup.LayoutParams layoutParams = this.getLayoutParams();
layoutParams.height = heightMeasureSpec;
this.setLayoutParams(layoutParams);
} catch (Exception e) {
e.printStackTrace();
}
}
}
小开

实际上，NestedScrollView 不需要是 CollapsingToolbarLayout 中的直接兄弟。我取得了一些非常奇怪的成就。Appbar _ scroll _ view _ action 在两个嵌套的片段中工作。

我的活动布局:

<android.support.design.widget.CoordinatorLayout>


<android.support.design.widget.AppBarLayout>


<android.support.design.widget.CollapsingToolbarLayout>


<include
layout="@layout/toolbar"/>


</android.support.design.widget.CollapsingToolbarLayout>


</android.support.design.widget.AppBarLayout>


<FrameLayout
android:id="@+id/container"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


</android.support.design.widget.CoordinatorLayout>

在“ Container”frameLayout 中，我已经扩充了这个片段:

<android.support.constraint.ConstraintLayout>


... some content ...


<android.support.v4.view.ViewPager/>


...


</android.support.constraint.ConstraintLayout>

ViewPager 中的片段如下:

<RelativeLayout>


<android.support.v7.widget.RecyclerView/>


....


</RelativeLayout>

事实上，NestedScrollView 可以如此深入的协调子层次结构和滚动行为仍然工作的确让我感到惊讶。

小开

只要把这一行放在 NestedScrollView 中

android:fillViewport="true"
小开

Just add android:fillViewport="true" to NeastedScrollView xml tag

<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.core.widget.NestedScrollView>
小开

我尝试了很多方法，但都没有用。 我参考了 这个，我的问题就解决了。


提交答案