NestedScrollView 和 WebView 高度问题
NestedScrollView and WebView height issue
我使用新的 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 不仅仅是具有这些问题的视图。
我尝试使用 webview,但它甚至不显示内容(我认为是由于不正确的高度计算)。
所以我需要 webview 或 textview 来纠正 NestedScrollView
.
的工作
P.S。如果我在 dp
中设置 textview 高度,那么文本看起来正确,但我需要 wrap_content
作为高度。
更新于 2015 年 7 月 8 日
最后我需要使用WebView
。 Alex Facciorusso 的回答部分有效,但我遇到了另一个问题。当 WebView
内容具有特定高度时,我可以看到部分内容,但无法向下滚动。
例子:
一个简单的解决方法是在 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>
我找到了解决方法:
<?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 的 minHeight,现在 WebView 适合布局的所有高度,并且折叠工具栏正常工作。
已更新:使用 FrameLayout 包装 WebView 并为其添加了 minHeight。
用 FrameLayout 包装 WebView 并添加 View(android:layout_height="800dp") 作为 WebView'minHeight。
在 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>
正如 Mayur Raiyani 所说:此问题已在支持库版本 22.2.1 中得到解决:code.google.com/p/android/issues/detail?id=175234。感谢大家的回答。
这是一个错误,请更新您的 sdk,将 build.gradle 中的 "compile 'com.android.support:design:22.2.0'" 替换为 "compile 'com.android.support:design:22.2.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>
我使用新的 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 不仅仅是具有这些问题的视图。
我尝试使用 webview,但它甚至不显示内容(我认为是由于不正确的高度计算)。
所以我需要 webview 或 textview 来纠正 NestedScrollView
.
P.S。如果我在 dp
中设置 textview 高度,那么文本看起来正确,但我需要 wrap_content
作为高度。
更新于 2015 年 7 月 8 日
最后我需要使用WebView
。 Alex Facciorusso 的回答部分有效,但我遇到了另一个问题。当 WebView
内容具有特定高度时,我可以看到部分内容,但无法向下滚动。
例子:
一个简单的解决方法是在 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>
我找到了解决方法:
<?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 的 minHeight,现在 WebView 适合布局的所有高度,并且折叠工具栏正常工作。
已更新:使用 FrameLayout 包装 WebView 并为其添加了 minHeight。
用 FrameLayout 包装 WebView 并添加 View(android:layout_height="800dp") 作为 WebView'minHeight。
在 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>
正如 Mayur Raiyani 所说:此问题已在支持库版本 22.2.1 中得到解决:code.google.com/p/android/issues/detail?id=175234。感谢大家的回答。
这是一个错误,请更新您的 sdk,将 build.gradle 中的 "compile 'com.android.support:design:22.2.0'" 替换为 "compile 'com.android.support:design:22.2.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>