NestedScrollView和WebView高度问题

Question

我使用新的android.support.v4.widget.NestedScrollView，但遇到了问题。

这是我的布局：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7">

             <!-- some views inside -->

        </RelativeLayout>

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

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

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

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

    <WebView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

我需要在textView中加载html，所以我这样做:

content.setText(Html.fromHtml(htmlString));

但它看起来很奇怪。我的textview位于屏幕底部。

在我滑动文本后，它开始变得正常。

而且我认为textview不是唯一有这些问题的视图。 我尝试使用webview，但它甚至没有显示内容（我认为是由于错误的高度计算）。 因此，我需要webview或textview来正确使用NestedScrollView。

P.S. 如果我将textview的高度设置为dp，则文本会正确显示，但我需要wrap_content的高度。

更新08.07.15

最终我需要使用WebView。Alex Facciorusso的答案部分有效，但我遇到了另一个问题。当WebView内容具有特定高度时，我可以看到一部分内容，但无法向下滚动。 例如：

- IlyaEremin

---

你能尝试使用WebView来显示HTML吗？ - Moinkhan

@Moinkhan 我尝试了很多配置：将LinearLayout设置为match_parent，使用match_parent和wrap_content的RelativeLayout，直接将TextView放置在NestedScrollView中。我认为这是一个NestedScrollView的问题，但我无法意识到哪里出错了。 - IliaEremin

只需尝试最后一次...将 {app:layout_behavior="@string/appbar_scrolling_view_behavior"} 放到 LinearLayout 中，而不是 NestedScrollView。 - Moinkhan

@Moinkhan的内容突然停止滚动了。 - IliaEremin

在支持库版本2.2.1中解决了此问题：https://code.google.com/p/android/issues/detail?id=175234 - Mayur Raiyani

Answer 1

阅读了许多帖子以及自定义实现WebView，但我对属性实验很感兴趣，发现适合我的方法是:

对于NestedScrollView，使用属性

android:fillViewport="true"

对于底层的 WebView ，请确保使用高度为自适应。

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</WebView>

所以，作为伪代码，你有：

<NestedScrollView> // height=  match_parent

 <Parent_layout>//could be Realtive/Linear with height= match_parent
   <Some_View></Some_View>
   <Some_View></Some_View>

   <WebView></WebView> // height=  wrap_content
 </Parent_layout>

</NestedScrollView>

- sud007

---

这解决了在NestedScrollView中放置WebView时的无限滚动问题！不错！ - Arun Jose

哦，不错啊 @ArunJose 这个对你有用！这个问题每年都会提醒我需要解决，哈哈！ - sud007

Answer 2

一个简单的解决方法是在你的LinearLayout中，在TextView下方添加一个高度为500dp的空视图。这个视图将把你的TextView推向正确的位置。

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

<!-- Your scrolling content -->

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/random_text" />

    <View
        android:layout_width="match_parent"
        android:layout_height="500dp"/>


</LinearLayout>

- eric.liu.developer

Answer 3

我找到了一个解决方法：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:fitsSystemWindows="true">

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="300dp">

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

我在NestedScrollView中添加了一个最小高度为500dp，现在WebView适应布局的整个高度，折叠式工具栏也可以正常使用。 更新：将WebView包装在FrameLayout中，并给它添加了最小高度。

- Alex Facciorusso

---

是的，它起作用了，但是在一些Webview内容高度方面，我只看到了部分内容，但是无法向下滚动。我尝试将minHeight更改为1000dp，但没有任何变化。 - IliaEremin

更新的答案：可能稍微好一些。 - Alex Facciorusso

抱歉晚了。我试图将 WebView 包装到 FrameLayout 中，结果一样。你可以自己尝试一下。这里是我的 XML 和 WebView 的数据：https://gist.github.com/IlyaEremin/e28d51cd1341607a1e69 - IliaEremin

我想提一下，在FrameLayout中使用minHeight包装WebView帮助我解决了一个问题，该问题与无法滚动WebView有关，如果触摸WebView的内容进行滚动。 - Robert

Answer 4

正如Mayur Raiyani所说：这个问题已经在支持库版本22.2.1中解决了: code.google.com/p/android/issues/detail?id=175234。感谢大家的回答。

- IliaEremin

---

我面临着类似的问题，@IIyaEremin，但它似乎没有被修复。WebView 不会尊重 match_parent 的高度设置。你确定这个问题已经解决了吗？ - onusopus

@onusopus 在我看来，设计库仍然存在很多错误，你需要使用一些第三方库。 - IliaEremin

你也遇到这个问题了吗？https://dev59.com/y9jO0ogBFxS5KdRj-siz - onusopus

哇，谢谢。问题是，是否有一位天使从天而降，由神明派遣，并在你的耳边低语，说有22.2.1版本？我想应该有一个列表，我正在努力寻找支持库版本的列表... - Neon Warge

@LorneLaliberte 不，我需要清单，我需要所有版本的列表。 - Neon Warge

Answer 5

使用FrameLayout包装WebView，并添加View(android:layout_height="800dp")作为WebView的minHeight。

- Sanpark

Answer 6

这是一个bug，请更新你的sdk，在build.gradle中将"compile 'com.android.support:design:22.2.0'"替换为"compile 'com.android.support:design:22.2.1'"。这对我有用。

- dhn conan

---

嗨dhn！你知道是否与此相关的问题吗？谢谢！ - Neon Warge

抱歉，这是我所知道的全部。 - dhn conan

Answer 7

在NestedScrollView中添加android:layout_gravity="fill_vertical"将解决您的问题。

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="24dp" />

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

- kabindra