SwipeRefreshLayout example

原本是使用 https://github.com/chrisbanes/ActionBar-PullToRefresh 來實作往下拉時重新整理.
最近 Google 也推出此功能. 所以稍微玩一下看是否能很簡單的實作.

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/refreshlayout"
    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" />

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

這邊要特別注意的 SwipeRefreshLayout 底下只能有一個 Layout, 且此 Layout 必須是 scrollable 的. 比如 Listview, Scrollview 或者本範例中的 webview.

由於本範例使用 webview 來測試, 所以 AndroidManifest.xml 裡記得把網路權限加上.

<pre class='brush: xml'>
<uses-permission android:name="android.permission.INTERNET" />

SwipeRefreshLayout 很簡單使用.
主要只要注意幾個就可以了. 從字面上應該都很清楚意思, 另外特別注意, 使用 SwipeRefreshLayout, 一定要 set OnRefreshListener, 否則當下拉時會出現 NULLPointerException.

1. setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener listener)
2. setRefreshing(boolean refreshing)
3. setColorScheme(int colorRes1, int colorRes2, int colorRes3, int colorRes4)
4. isRefreshing()

完整的 class 如下

package tw.clotai.example.swiperefreshexample;

import android.graphics.Bitmap;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends ActionBarActivity implements SwipeRefreshLayout.OnRefreshListener {

    SwipeRefreshLayout mRefreshLayout;
    WebView mWebView;

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

        mRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.refreshlayout);
        mWebView = (WebView) findViewById(R.id.webview);

    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);

        mRefreshLayout.setColorScheme(android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light);
        mRefreshLayout.setOnRefreshListener(this);

        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                mRefreshLayout.setRefreshing(true);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                mRefreshLayout.setRefreshing(false);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        mWebView.loadUrl("http://www.yahoo.com");
    }

    @Override
    public void onRefresh() {
        mRefreshLayout.setRefreshing(true);
        mWebView.loadUrl("http://www.google.com");
    }
}

我想程式碼應該足夠解釋所有的意思了.

完整範例: SwipeRefreshExample.zip