在滚动视图中滚动Webview

Question

我有：
现在我有一个滚动视图作为父项。在这个滚动视图中，我使用一个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时，不幸的是父滚动视图被调用。 我必须保持父滚动视图，但除此之外，当我触摸webView时，我想滚动其中的WebView内容。

我该怎么做？

Answer 1

根据Android设计文档，如果滚动容器的滚动方向相同，则不应将滚动容器放在滚动容器中。这并不意味着要处理这样的事情。

Answer 2

通常不建议嵌套的可滚​​动窗口小部件。这是一个令人困惑的用户体验，因为很容易滚动错误的东西。假设我打算滚动外滚动区域，但我首先触摸了内部区域，并且非常硬。那么内在的一个会滚动，我会像？为什么它不滚动？

即使一个水平滚动而另一个垂直，手势识别器可能会混淆另一个，因此您会得到相同的效果。这是一个有效的用例，但它仍然是有限的，我会避免它。 （IE：人类不能完美地垂直和水平地正确滑动，通常是一个角度。）

我会推动改变设计以打破可滚动区域。理想情况下每个页面有1个可滚动项目。甚至可以自己提出一个建议，并向设计师提供两种体验，并看看他们选择哪一种。

为了表达这将如何吸吮。看看这个例子。这不是一个解决方案，只是为了展示经验。

<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> 

Answer 3

在layout.xml创建自定义触摸拦截网页视图

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); 
    }   
} 

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

Answer 4

我有同样的问题。您应该将webView高度设置为与其内容相同。该这样做：
此行添加到您的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))); 
      } 
     }); 
    }