logo标签列表

在Webview上添加下拉刷新以进行刷新

javaandroidandroid-studiowebviewpull-to-refresh
30

我将在我的webview上添加下拉刷新，这样就可以刷新我的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);

    }

}

内容主文件.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>

我希望有人能够帮助我解决这个问题。

8个回答
43

您可以像这样将Webview包装在Swipe Refresh布局中

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

}

}
我没有错误，但是我错过了</android.support.v4.widget.SwipeRefreshLayout>，我应该把它放在content_main的哪里？如果我把它放在<android.support.v4.widget.SwipeRefreshLayout后面，我就无法下拉刷新。 - Hessel
它运行了！非常感谢！现在唯一的问题是这个圆圈停留在我的屏幕上，就像这张图片中的那样：http://i-cdn.phonearena.com/images/articles/162782-thumb/chrome.png - Hessel
1
尝试在reload()函数后面的onRefresh内添加mySwipeRefreshLayout.setRefreshing(false);。 - jitinsharma
20
它运行正常，谢谢！但你应该在onPageFinished方法中加入以下代码： swRefreshLayout.setRefreshing(false); - Emre Tekin
2
这对我完全不起作用，它只显示了一个纯白的空白屏幕。因为嵌套滚动视图的行为很粗鲁。 - Bhavik Mehta
显示剩余8条评论
21

我认为最好的解决方案是使用SwipeRefreshLayout，但是不要将NestedScrollView放在其中，就像jitinsharma所描述的那样，因为可能会出现这个问题：Webview在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，而且加载效果不太好。 - UdayaLakmal
实现 AdvancedWebView.Listener 接口：无法理解此内容。 - Prajwal Waingankar
2

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>

对于 Kotlin：

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

这应该可以完美地工作！在您的布局文件中，将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); - 11m0
0
0
在我的研究中，我发现有三种简单的方法可以在您的Android应用程序中实现下拉刷新：
  • 您可以使用第三方库/SDK 或者
  • 您可以使用自定义实现（例如在此处提到的代码片段）。这个选项更加复杂，但提供了更大的自定义灵活性。 或者
  • 在Android WebViewGold中，在Config.java中，只需将ENABLE__PULL_REFRESH设置为true即可。
祝您使用愉快！
0

这是我代码的一部分，对我很有用。它处理了两个问题：

  1. 当用户在webview中滚动后，再次尝试向上滚动时，屏幕会被刷新。但是，在onStart()和onStop()中添加代码可以处理这个问题，它检查用户是否在webview中滚动，然后禁用刷新部分。

  2. 使用WebViewClient()调用onPageFinished()可以禁用刷新图标，否则它会进入无限刷新循环。

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

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(true);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        mySwipeRefreshLayout.setRefreshing(false);
    }
});
webView.loadUrl("https://www.enter your url here");

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


      }

  @Override
     protected void onStart() {
      super.onStart();

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

            }
        });
         }


    @Override
     protected void onStop() {
       super.onStop();
          mySwipeRefreshLayout.getViewTreeObserver()
    .removeOnScrollChangedListener(mOnScrollChangedListener);
      }
0

如果您只想要下拉刷新，请尝试这个。

    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

我能用这个来刷新我的Web视图吗？ - Hessel
你可以在 MotionEvent.ACTION_DOWN 之后再次使用 loadURL(<YOUR URL>) 并添加一些查询参数，如果你需要更多类型的动作，请参考 https://developer.android.com/reference/android/view/MotionEvent.html。 - Yash Jain
1
@Hessel 找一个函数来获取你的线性布局中的所有内容。 - Yash Jain
我有一个RelativeLayout。 - Hessel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接