在滚动视图中滚动 Webview

7

我的现有情况:
目前我有一个滚动视图作为父视图。在这个滚动视图里,我使用一个WebView加载URL,然后显示其中的文本。 以下是我的xml:

<ScrollView
    android:id="@+id/parentScroll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/Heading" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp" >

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/webview" />
    </RelativeLayout>
</ScrollView>    

我想要在webView内部滚动。当我点击webView时,可能会触发父级scrollView的滚动。我需要保留Parent scrollView,但是希望在点击webView时也能够在其中滚动webView内容。
我该如何实现这个功能?
4个回答

6

创建一个自定义的触摸拦截WebView

CustomWebview.java

 package com.mypackage.common.custom.android.widgets

public class CustomWebview extends WebView {

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

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

    public CustomWebview(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){
        requestDisallowInterceptTouchEvent(true);
        return super.onTouchEvent(event);
    }          
}

layout.xml

<com.package.custom.widgets.CustomWebview
                android:id="@+id/view_extra"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 />

4
根据Android设计文档,如果两个滚动容器在同一方向滚动,则不应将一个滚动容器放置在另一个滚动容器内。系统无法处理此类情况。

2
@CaseyB... 但这是我的要求.. 我必须将webView放在一个滚动视图中。你有什么想法吗? - Noman
2
那么恐怕你的需求是错误的,你永远不应该需要这样做。 - Joseph Earl
2
你能引用一下这个文档吗? - Steven
1
我同意这一点,也厌倦了听这种教科书式的评论,因此谷歌的安卓团队意识到这样的通用评论并不是解决问题的方法,于是推出了新的嵌套滚动标志和协调布局,以更高效地处理嵌套滚动。 - ksarmalkar

2
我也有同样的问题。您应该将webView的高度设置为其内容相等。为此,请执行以下操作:
在Activity的onCreate方法中添加这些行:
webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                webView.loadUrl("javascript:MyApp.resize(document.body.getBoundingClientRect().height)");

                super.onPageFinished(view, url);
            }
        });
webView.addJavascriptInterface(this, "MyApp");

并将此方法添加到您的活动中:

@JavascriptInterface
    public void resize(final float height) {
        MainActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                webView.setLayoutParams(new LinearLayout.LayoutParams(getResources().getDisplayMetrics().widthPixels, (int) (height * getResources().getDisplayMetrics().density)));
            }
        });
    }

0

嵌套可滚动的小部件通常不被推荐使用。这会给用户带来困惑的体验,因为很容易滚动到错误的位置。比如我想要滚动外部的滚动区域,但是我先触摸了内部区域并且用力甩动了一下。那么内部区域就会滚动,我会感到困惑:为什么它没有滚动呢?

即使一个是水平滚动,另一个是垂直滚动,手势识别器也可能混淆两者,从而产生相同的效果。这是一个有效的使用案例,但仍然有些棘手,我会避免使用它。(例如:人类不能完美地垂直和水平地滑动,通常是带有角度的。)

我会推动更改设计,将可滚动区域分开。理想情况下,每页只有一个可滚动项。你甚至可以自己提出一个方案,并向设计师提供两种体验,看他们会选择哪一个。

为了表达这将会是多么糟糕,请看这个例子。这不是一个解决方案,只是展示一下体验。

<ScrollView
    android:id="@+id/parentScroll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/Heading" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:orientation="vertical"
    android:padding="5dp" >
    <TextView
        android:id="@+id/topText"
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:text="@string/lotsoftext" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@drawable/webview" />
    <TextView
        android:id="@+id/topText"
        android:layout_width="match_parent"
        android:layout_height="1000dp"
        android:text="@string/lotsoftext" />
</RelativeLayout>


@Jermey Edwards.. 感谢你的解释,我的朋友,但不幸的是这是我的要求..我必须将webView放在scrollView中..这样当我点击webView时它应该垂直滚动,当我点击webView外部时整个屏幕应该滚动。你有任何想法吗? - Noman
@Jeremy Edwards,请看一下我的解决方案,它提供了在ScrollView中放置WebView的解决方法这里 - rus1f1kat0R

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接