ScrollView嵌套webview之后滑动冲突的解决方案

本文介绍了一种解决ScrollView包裹WebView时产生的滑动冲突的方法。通过自定义MyScrollView类,实现在滑动WebView的同时避免与外部ScrollView的滑动事件冲突。文中详细解释了如何通过重写onInterceptTouchEvent和onTouchEvent等方法来处理滑动事件。


关于ScrollView嵌套webview之后,滑动时出现冲突的解决方案:


我的项目需求是:文章内容是用webview加载的,但是帖子内容里面有一些个人信息等一系列的安卓原生控件,所以必须用scrollView来包裹webview,由于两者都自带有滑动功能,所以产生了让人头疼的滑动冲突。


解决方案:

public class MyScrollView extends ScrollView {
//    private GestureDetector mGestureDetector;
//    View.OnTouchListener mGestureListener;
//
//    public MyScrollView(Context context, AttributeSet attrs) {
//        super(context, attrs);
//        mGestureDetector = new GestureDetector(context, new YScrollDetector());
//        setFadingEdgeLength(0);
//    }
//
//    @Override
//    public boolean onInterceptTouchEvent(MotionEvent ev) {  //拦截事件
//        return super.onInterceptTouchEvent(ev) && mGestureDetector.onTouchEvent(ev);
//    }
//
//    // Return false if we're scrolling in the x direction
//    class YScrollDetector extends SimpleOnGestureListener {
//    	@Override
//    	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//            if (Math.abs(distanceY) > Math.abs(distanceX)) {
//            	return true;
//            }
//            return false;
//    	}
//    }

    public ScrollView parentScrollView;

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

    private int lastScrollDelta = 0;

    public void resume() {
        overScrollBy(0, -lastScrollDelta, 0, getScrollY(), 0, getScrollRange(), 0, 0, true);
        lastScrollDelta = 0;
    }

    int mTop = 10;

    /**
     * 将targetView滚到最顶端
     */
    public void scrollTo(View targetView) {
        int oldScrollY = getScrollY();
        int top = targetView.getTop() - mTop;
        int delatY = top - oldScrollY;
        lastScrollDelta = delatY;
        overScrollBy(0, delatY, 0, getScrollY(), 0, getScrollRange(), 0, 0, true);
    }

    private int getScrollRange() {
        int scrollRange = 0;
        if (getChildCount() > 0) {
            View child = getChildAt(0);
            scrollRange = Math.max(0, child.getHeight() - (getHeight()));
        }
        return scrollRange;
    }

    int currentY;

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (parentScrollView == null) {
            return super.onInterceptTouchEvent(ev);
        } else {
            if (ev.getAction() == MotionEvent.ACTION_DOWN) {
// 将父scrollview的滚动事件拦截
                currentY = (int) ev.getY();
                setParentScrollAble(false);
                return super.onInterceptTouchEvent(ev);
            } else if (ev.getAction() == MotionEvent.ACTION_UP) {
// 把滚动事件恢复给父Scrollview
                setParentScrollAble(true);
            } else if (ev.getAction() == MotionEvent.ACTION_MOVE) {
            }
        }
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        View child = getChildAt(0);
        if (parentScrollView != null) {
            if (ev.getAction() == MotionEvent.ACTION_MOVE) {
                int height = child.getMeasuredHeight();
                height = height - getMeasuredHeight();
// System.out.println("height=" + height);
                int scrollY = getScrollY();
// System.out.println("scrollY" + scrollY);
                int y = (int) ev.getY();
// 手指向下滑动
                if (currentY < y) {
                    if (scrollY <= 0) {
// 如果向下滑动到头,就把滚动交给父Scrollview
                        setParentScrollAble(true);
                        return false;
                    } else {
                        setParentScrollAble(false);
                    }
                } else if (currentY > y) {
                    if (scrollY >= height) {
// 如果向上滑动到头,就把滚动交给父Scrollview
                        setParentScrollAble(true);
                        return false;
                    } else {
                        setParentScrollAble(false);
                    }
                }
                currentY = y;
            }
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 是否把滚动事件交给父scrollview
     *
     * @param flag
     */
    private void setParentScrollAble(boolean flag) {
        parentScrollView.requestDisallowInterceptTouchEvent(!flag);
    }
}


自定义Scrollview时之前也是百度之后写的,就是上面注释掉的代码,是在scrollview拦截了事件,然后根据手势识别器来滑动,这样做可以实现webview和scrollview的嵌套,但是出现了一个问题:当点击webview中图片时或者说webview在某一时刻获取到了事件,就会出现webview滑动不了的问题。这个问题困扰了好久,妈蛋,,,最后看到一篇博客,就是用上面的方式解决了。


<com.boohee.widgets.MyScrollView  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:background="@drawable/main_bg"  
    android:layout_marginTop="@dimen/default_shadow_margin" >  
  
    <LinearLayout  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:orientation="vertical" >  
  
        <RelativeLayout  
            android:layout_width="fill_parent"  
            android:layout_height="180dp" >  
  
            <android.support.v4.view.ViewPager  
                android:id="@+id/vp_top_show"  
                android:layout_width="fill_parent"  
                android:layout_height="fill_parent" />  
  
            <LinearLayout  
                android:id="@+id/dot_layout"  
                android:layout_width="fill_parent"  
                android:layout_height="wrap_content"  
                android:layout_alignParentBottom="true"  
                android:gravity="center_horizontal"  
                android:orientation="horizontal"  
                android:padding="10dp" >  
            </LinearLayout>  
        </RelativeLayout>  
  
        <WebView  
            android:id="@+id/wv_show"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:layerType="software"  
            android:scrollbars="none" />  
    </LinearLayout>  
</com.boohee.widgets.MyScrollView> 


注意:使用后发现webView加上

[html]  view plain  copy
  1. android:layerType="software"  
之后,有时候加载不出来数据,而且加载数据很慢。所以可以去掉


很感谢看到了一位博主的一篇博客。

http://blog.youkuaiyun.com/li5685918/article/details/50426932


虽然解决了我的问题,但是对其中的几个点还有点问题(事件传递机制)。过几天好好研究一下,。。。。。


### 解决ScrollView嵌套WebView高度动态调整的方法 在开发过程中,当遇到`ScrollView`嵌套`WebView`时,可能会面临`WebView`高度无法正确计算的问题。以下是几种常见且有效的解决方案: #### 方法一:通过JavaScript动态获取网页内容高度并设置给`WebView` 可以通过加载完成后的回调函数,在页面加载完成后执行JavaScript脚本来获取网页的实际高度,并将其应用到`WebView`上。 ```kotlin webView.webViewClient = object : WebViewClient() { override fun onPageFinished(view: WebView?, url: String?) { super.onPageFinished(view, url) webView.loadUrl("javascript:function getDocHeight(){return document.body.scrollHeight;}") webView.evaluateJavascript("getDocHeight();") { height -> val contentHeight = height.replace("[^0-9]".toRegex(), "").toInt() webView.layoutParams.height = contentHeight webView.requestLayout() } } } ``` 这种方法利用了JavaScript来精确获取文档的高度,并将其赋值给`WebView`[^1]。 --- #### 方法二:通过监听滚动事件解决滑动冲突 如果存在滑动冲突问题,则可以在`WebView`的触摸事件中禁用父级视图拦截触碰事件的行为。 ```kotlin mWebView.setOnTouchListener { v, event -> when (event.action) { MotionEvent.ACTION_DOWN -> v.parent.requestDisallowInterceptTouchEvent(true) MotionEvent.ACTION_UP -> v.parent.requestDisallowInterceptTouchEvent(false) } return@setOnTouchListener false } ``` 此方式能够有效缓解因滑动冲突而导致的内容不可见或交互异常的情况[^2]。 --- #### 方法三:初始化阶段隐藏`WebView`以强制重绘 一种简单粗暴但实用的办法是在布局定义时先将`WebView`设为不可见状态(`android:visibility="gone"`),待数据加载完毕后再恢复可见性(`VISIBLE`),从而触发其重新渲染过程。 ```xml <WebView android:id="@+id/costom_wb_reorganize" android:layout_width="match_parent" android:layout_height="wrap_content" android:visibility="gone"/> ``` 随后配合如下逻辑实现自动切换显示状态的操作: ```kotlin override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) { super.onPageStarted(view, url, favicon) costom_wb_reorganize.visibility = View.VISIBLE } ``` 这种方式虽然看似笨拙却能很好地规避部分复杂场景下的展示错误现象[^1]. --- #### 方法四:借助服务器端支持提供额外参数辅助计算 对于某些特定需求的应用程序来说(例如仅用于呈现静态图像资源),可以让后台服务返回附加的信息如每幅图画的具体尺寸等元数据字段供客户端解析使用. 假设我们已经获得了这些必要的属性值之后便可以根据它们的比例关系自行推导出适合当前设备屏幕条件的最佳适配方案: ```java int screenWidth = Resources.getSystem().getDisplayMetrics().widthPixels; float scaleRatio = imageWidth / screenWidth; // Adjust webview's layout params accordingly. LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, Math.round(imageHeight * scaleRatio)); costom_wb_reorganize.setLayoutParams(layoutParams); ``` 尽管这种做法可能显得有些繁琐冗余但实际上确实有助于提升用户体验质量尤其是针对那些对视觉效果有着较高追求的产品而言更是如此[^3]. --- ### 总结说明 综上所述,处理 `ScrollView` 嵌套 `WebView` 的高度自适应问题可以从多个角度入手尝试不同的技术手段直至找到最适合实际业务环境的那个最佳实践为止。无论是采用 JavaScript 动态注入还是单纯依靠 XML 属性配置又或者是结合两者共同作用都可以达到预期目标只要合理运用即可获得满意的结果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值