在 webview 上添加 pull to refresh 以进行刷新答案

【问题标题】：Adding pull to refresh on webview for refreshing在 webview 上添加 pull to refresh 以进行刷新
【发布时间】：2016-10-13 00:19:54
【问题描述】：

我将在我的 webview 上添加 pull 以刷新，以便刷新我的 webview。我已经看到此页面上的所有问题，但我找不到添加拉动刷新的好方法......

Mainactivity.java

package com.vvhvb.hesselfeenstra.vvheerenveenseboys;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String url ="http://heerenveenseboys.nl/";
        WebView view=(WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setBuiltInZoomControls(true);
        view.getSettings().setDisplayZoomControls(false);
        view.setWebViewClient(new WebViewClient());
        view.loadUrl(url);

    }

}

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.vvhvb.hesselfeenstra.vvheerenveenseboys.MainActivity"
    tools:showIn="@layout/activity_main">

    <WebView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/webView"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

我希望任何人都可以帮助我并为我解决这个问题。

【问题讨论】：

标签： java android android-studio webview pull-to-refresh

【解决方案1】：

你可以像这样将 webview 包裹在 Swipe 刷新布局中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.vvhvb.hesselfeenstra.vvheerenveenseboys.MainActivity"
tools:showIn="@layout/activity_main">

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

在java中

package com.vvhvb.hesselfeenstra.vvheerenveenseboys;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
WebView view;
SwipeRefreshLayout mySwipeRefreshLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);
    String url ="http://heerenveenseboys.nl/";
    view=(WebView) this.findViewById(R.id.webView);
    view.getSettings().setJavaScriptEnabled(true);
    view.getSettings().setBuiltInZoomControls(true);
    view.getSettings().setDisplayZoomControls(false);
    view.setWebViewClient(new WebViewClient());
    view.loadUrl(url);

    mySwipeRefreshLayout.setOnRefreshListener(
    new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        view.reload();
    }
    }
    );

}

}

【讨论】：

当我粘贴 webview.reload() 时，该行出现错误。
您已经在 onCreate() Webview webview = (WebView)findViewById(R.id.web_view) 中定义了 webview，然后在 onCreate 中调用 webview.loadUrl("your url") 来初始加载 wbeview。然后在监听器中调用webview.reload()。
嗯..在 reload() 函数后尝试 mySwipeRefreshLayout.setRefreshing(false); 内 onRefresh。
成功了谢谢你！但是你应该这样做 onPageFinished { swRefreshLayout.setRefreshing(false); }
这对我根本不起作用，它显示纯白色的空白屏幕。因为nestedscrollview 的行为很粗鲁

【解决方案2】：

我认为最好的解决方案是使用SwipeRefreshLayout，但其中没有NestedScrollView，就像jitinsharma 描述的那样，因为这个可能的问题：webview height grows indefinitely inside a nestedScrollView。但是vizZ 描述的滚动问题还有另一种解决方案，实施ViewTreeObserver.OnScrollChangedListener。所以工作解决方案应该是这样的：

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <RelativeLayout
            android:id="@+id/nonVideoLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:windowSoftInputMode="adjustResize">

            <WebView
                android:id="@+id/main_web_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:windowSoftInputMode="adjustResize"
                app:layout_constraintDimensionRatio="1" />

        </RelativeLayout>


    </android.support.v4.widget.SwipeRefreshLayout>

活动参数：

private WebView mWebView;
private SwipeRefreshLayout mySwipeRefreshLayout;
private ViewTreeObserver.OnScrollChangedListener mOnScrollChangedListener;

关于活动onCreate:

mWebView = (WebView) findViewById(R.id.main_web_view);
mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);

        mySwipeRefreshLayout.setOnRefreshListener(
                new SwipeRefreshLayout.OnRefreshListener() {
                    @Override
                    public void onRefresh() {
                        mWebView.reload();
                    }
                }
        );

活动的实现：implements AdvancedWebView.Listener

关于活动onStop：

mySwipeRefreshLayout.getViewTreeObserver().removeOnScrollChangedListener(mOnScrollChangedListener);

和活动onStart：

 mySwipeRefreshLayout.getViewTreeObserver().addOnScrollChangedListener(mOnScrollChangedListener =
                new ViewTreeObserver.OnScrollChangedListener() {
                    @Override
                    public void onScrollChanged() {
                        if (mWebView.getScrollY() == 0)
                            mySwipeRefreshLayout.setEnabled(true);
                        else
                            mySwipeRefreshLayout.setEnabled(false);

                    }
                });

【讨论】：

是的，只有这个解决方案才能提供流畅的加载，android.support.v4.widget.NestedScrollView 是在加载时包装 webview 并且加载并不漂亮。

【解决方案3】：

activity_main.xml

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
<WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginBottom="0dp"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

对于 Kotllin：

MainActivity.kt

var mySwipeRefreshLayout: SwipeRefreshLayout? = null
var myWebView: WebView? = null
mySwipeRefreshLayout = findViewById<SwipeRefreshLayout>(R.id.swipeContainer)

    mySwipeRefreshLayout?.setOnRefreshListener {
        Log.i("on refresh", "onRefresh called from SwipeRefreshLayout")

        // This method performs the actual data-refresh operation.
        // The method calls setRefreshing(false) when it's finished.
        myWebView?.reload();
    }
myWebView!!.webViewClient = object : WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
            view?.loadUrl("http://www.google.com")
            return false;
        }

        override fun onPageFinished(view: WebView?, url: String?) {
            mySwipeRefreshLayout?.isRefreshing = false
        }
    }

【讨论】：

【解决方案4】：

如果你只想拉刷新试试这个

    ll = (LinearLayout)findViewById(R.id.CategorySelect_lLayout_noID);
ll.setOnTouchListener(new OnTouchListener() {

    public boolean onTouch(View v, MotionEvent event) {

        if(event.getAction() == MotionEvent.ACTION_DOWN){
            Toast.makeText(CategorySelect.this, "action DOWN called", Toast.LENGTH_SHORT).show();
            return true;
        } 

        return false;
    }
});
    return true;
}

或者如果你想要一个图标或类似 chrome 的东西

https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

【讨论】：

我可以用那个刷新我的网页视图吗？
是的，你可以在 MotionEvent.ACTION _DOWN 之后再次输入 loadURL()，如果你想要更多类型的动作，请参考developer.android.com/reference/android/view/MotionEvent.html
@Hessel 找到一个函数来获取所有作为你的线性布局
我有RelativeLayout

【解决方案5】：

https://developer.android.com/training/swipe/add-swipe-interface.html

您可以使用 Swipe-to-Refresh 布局，它易于使用并为您处理刷新动画。

你可以添加一个 OnRefreshListener 来刷新你的 webview

【讨论】：

【解决方案6】：

这应该可以完美运行！在您的布局文件中，将 webview 包装在 SwipeRefreshLayout 中。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    >
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/webView"
       />
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

在您的 Java 文件中，声明 SwipeRefreshLayout mySwipeRefreshLayout; 课外。然后，将此添加到onCreate() 方法中

    mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);

        mySwipeRefreshLayout.setOnRefreshListener(
                        new SwipeRefreshLayout.OnRefreshListener() {
                            @Override
                            public void onRefresh() {
                                    mWebview.reload();
        mWebview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);
// This is important as it forces webview to load from the instead of reloading from cache

        mWebview .loadUrl(getString(R.string.app_link));

                            }
                        }
                );

【讨论】：

你不需要添加这一行，因为它默认设置为LOAD_DEFAULT模式mWebview.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT);

【解决方案7】：

在研究过程中，我发现可以通过三种简单的方法在 Android 应用程序中实现拉取刷新：

您可以使用第三方库/SDK 或
您可以使用您的自定义实现（例如这里提到的代码 sn-ps）。此选项更复杂，但为定制提供了更大的灵活性或
在 Android WebViewGold 的 Config.java 中，只需将 ENABLE__PULL_REFRESH 设置为 true

滚动愉快！

【讨论】：