Xamarin Android：如何通过SwipeRefreshLayout禁止WebView内容上滑？

嘿，我懂你现在的困扰——把WebView塞进SwipeRefreshLayout之后，滑动网页内容时总不小心触发下拉刷新，特别影响体验对吧？别担心，我给你两个实用的解决方案，帮你搞定这个滑动冲突问题：

方案一：监听WebView滚动状态，动态控制刷新开关 #

这个思路很直接：只有当WebView已经滚动到内容顶部时，才允许SwipeRefreshLayout触发下拉刷新；如果WebView还能向上滚动（说明没到顶），就禁用刷新功能。

实现代码 #

在你的Activity/Fragment里找到对应控件，添加滚动监听：

// 绑定布局控件
var swipeRefresh = FindViewById<SwipeRefreshLayout>(Resource.Id.swipeRefreshLayout);
var webView = FindViewById<WebView>(Resource.Id.webView);

// 监听WebView的滚动变化
webView.ScrollChange += (sender, e) =>
{
    // 判断WebView是否已经滚动到顶部：CanScrollVertically(-1)返回false表示无法向上滚动
    bool isAtTop = !webView.CanScrollVertically(-1);
    // 动态控制SwipeRefreshLayout的可用状态
    swipeRefresh.Enabled = isAtTop;
};

// 绑定刷新逻辑
swipeRefresh.Refresh += (sender, e) =>
{
    webView.Reload();
    // 网页加载完成后停止刷新动画
    webView.LoadFinished += (s, args) => swipeRefresh.Refreshing = false;
};

代码说明 #

CanScrollVertically(-1)是个很实用的方法：传入-1表示检测是否能向上滚动，返回false就说明已经到达内容顶部。相比单纯判断ScrollY == 0，这个方法能适配WebView存在内边距、网页有固定头部等特殊场景，准确性更高。

方案二：自定义SwipeRefreshLayout，拦截触摸事件 #

如果想从事件传递的根源解决冲突，可以自定义SwipeRefreshLayout，重写触摸事件拦截逻辑：只有当WebView无法向上滚动时，才拦截事件触发刷新；否则把事件交给WebView处理。

第一步：创建自定义SwipeRefreshLayout #

using Android.Content;
using Android.Support.V4.Widget;
using Android.Views;
using Android.Webkit;

namespace YourAppNamespace
{
    public class WebViewSwipeRefreshLayout : SwipeRefreshLayout
    {
        private WebView _targetWebView;

        public WebViewSwipeRefreshLayout(Context context) : base(context) { }
        public WebViewSwipeRefreshLayout(Context context, IAttributeSet attrs) : base(context, attrs) { }

        // 设置需要关联的WebView
        public void BindWebView(WebView webView)
        {
            _targetWebView = webView;
        }

        // 重写触摸事件拦截逻辑
        public override bool OnInterceptTouchEvent(MotionEvent ev)
        {
            if (_targetWebView != null)
            {
                // 如果WebView还能向上滚动，不拦截事件，让WebView处理滑动
                bool canScrollUp = _targetWebView.CanScrollVertically(-1);
                if (canScrollUp)
                {
                    return false;
                }
            }
            // 否则交给父类处理，触发下拉刷新
            return base.OnInterceptTouchEvent(ev);
        }
    }
}

第二步：修改布局文件 #

把原生的SwipeRefreshLayout替换成自定义的控件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtURL" />

    <your.app.namespace.WebViewSwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    </your.app.namespace.WebViewSwipeRefreshLayout>
</LinearLayout>

第三步：在代码中初始化 #

var swipeRefresh = FindViewById<WebViewSwipeRefreshLayout>(Resource.Id.swipeRefreshLayout);
var webView = FindViewById<WebView>(Resource.Id.webView);
// 关联WebView和自定义SwipeRefreshLayout
swipeRefresh.BindWebView(webView);

// 设置刷新逻辑
swipeRefresh.Refresh += (sender, e) =>
{
    webView.Reload();
    webView.LoadFinished += (s, args) => swipeRefresh.Refreshing = false;
};

额外注意 #

如果你的WebView加载的网页里有嵌套的滚动容器（比如带滚动的div），原生的CanScrollVertically可能无法准确判断网页内部的滚动状态。这种情况下可以通过JS与原生交互，让网页在滚动到顶部时通知原生代码，再控制SwipeRefreshLayout的状态——不过这种场景比较少见，大部分普通网页用上面的两种方案就足够解决问题了。

内容的提问来源于stack exchange，提问作者Mostafa Fawzy