Android開發之SwipeRefreshLayout實現下拉重新整理

簡介

SwipeRefreshLayout是Google官方推出的一款下拉重新整理元件，位於v4相容包下，android.support.v4.widget.SwipeRefreshLayout，Support Library 必須19.1以上。使用起來很簡單，只要在需要重新整理的控制元件最外層加上SwipeRefreshLayout，其child必須是可滾動的view，如ScrollView、GridView或者ListView，這裡就測試最常用的ListView。

佈局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    tools:context=".MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></ListView>

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

</RelativeLayout>

Activity

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {

    private SwipeRefreshLayout mSwipeLayout;
    private ListView mListView;
    private ArrayAdapter<String> mAdapter;
    private ArrayList<String> data;
    private boolean isRefresh = false;//是否重新整理中

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

        init();


        //設定SwipeRefreshLayout
        mSwipeLayout = (SwipeRefreshLayout) findViewById(R.id.swipeLayout);

        //設定進度條的顏色主題，最多能設定四種 載入顏色是迴圈播放的，只要沒有完成重新整理就會一直迴圈，holo_blue_bright>holo_green_light>holo_orange_light>holo_red_light
       // mSwipeLayout.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);

        //上面的方法已經廢棄
        mSwipeLayout.setColorSchemeColors(Color.BLUE,
                Color.GREEN,
                Color.YELLOW,
                Color.RED);


        // 設定手指在螢幕下拉多少距離會觸發下拉重新整理
        mSwipeLayout.setDistanceToTriggerSync(300);
        // 設定下拉圓圈的背景
        mSwipeLayout.setProgressBackgroundColorSchemeColor(Color.WHITE);
        // 設定圓圈的大小
        mSwipeLayout.setSize(SwipeRefreshLayout.LARGE); 

        //設定下拉重新整理的監聽
        mSwipeLayout.setOnRefreshListener(this);
    }

    /*
     * 初始化  設定ListView
     */
    private void init() {
        mListView = (ListView) findViewById(R.id.listview);

        data = new ArrayList<String>();

        for (int i = 1; i < 10; i++) {
            data.add("這是第" + i + "個資料");
        }

        //初始化adapter
        mAdapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, data);

        mListView.setAdapter(mAdapter);
    }

    /*
     * 監聽器SwipeRefreshLayout.OnRefreshListener中的方法，當下拉重新整理後觸發
     */
    public void onRefresh() {
        //檢查是否處於重新整理狀態
        if (!isRefresh) {
            isRefresh = true;
            //模擬載入網路資料，這裡設定4秒，正好能看到4色進度條
            new Handler().postDelayed(new Runnable() {
                public void run() {

                    //顯示或隱藏重新整理進度條
                    mSwipeLayout.setRefreshing(false);
                    //修改adapter的資料
                    data.add("這是新新增的資料");
                    mAdapter.notifyDataSetChanged();
                    isRefresh = false;
                }
            }, 4000);
        }
    }
}

測試

SwipeRefreshLayout.gif

問題

細心的讀者肯定發現，程式碼中 setColorSchemeColors 設定顏色時候並未按如下設定

mSwipeLayout.setColorSchemeColors(android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light);

那是因為，經過測試，如果按照如上設定顏色，進度條不會有顏色迴圈的效果，不知道為何？難道是bug嗎？知道的告知，感謝~~~

程式碼地址

https://github.com/yungfan/SwipeRefreshLayout