商城项目实战 | 8.1 SwipeRefreshLayout 详解 官方下拉刷新控件

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

SwipeRefreshLayout 是 Google 公司推出的用于下拉刷新的控件，在 SDK Version 19.1之后, SwipeRefreshLayout 已经被放到了 SDK 中，作为官方的下拉刷新控件，SwipeRefreshLayout 也是备受开发者的关注。

SwipeRefreshLayout 的相关方法介绍

SwipeRefreshLayout 继承于 ViewGroup ，在属性方面和基本的控件没有什么特别，所以就主要介绍 SwipeRefreshLayout 的一些重要的相关方法。

1. setColorSchemeResources( int… colorResIds )

setColorSchemeResources() 方法在使用 SwipeRefreshLayout 中经常使用，该方法是用于设置下拉进度条的颜色主题，参数为可变参数，并且是 color 的资源 id 值，可以设置多种不同的颜色，每转一圈就显示一种颜色，使得下拉刷新的效果美化了不少。方法的使用很简单，如下。

swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light);

2. setDistanceToTriggerSync( int distance )

需要传入 int 型参数 distance ，该参数表示的手势下拉的距离，所以这个方法的作用也就明了了，就是设置手势滑动的距离的多少来开始响应下拉刷新事件，下拉的距离有个默认值，也就是64。

private static final int DEFAULT_CIRCLE_TARGET = 64;

3. setOnRefreshListener()

这个方法看名字就可以知道是用于设置监听的，和 setOnClickListener() 类似，但是里面需要重写的是 onRefresh() 方法，顶部下拉时会调用这个方法，在里面实现请求数据的逻辑，设置下拉进度条消失等等。

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

             //实现请求数据的逻辑，设置下拉进度条消失等等

            }
        });

4. setRefreshing(boolean refreshing)

这个方法中传入的是个 boolean 类型的参数，是用于设置刷新状态的，其中传入的参数 refreshing 为 true表示正在刷新，false 则表示取消刷新，一般使用情况是针对于下拉刷新的开始和结束时刷新控件的显示和隐藏，下面表示的是刷新结束，刷新提示进度条消失。

swipeRefreshLayout.setRefreshing(false);

5. isRefreshing()

了解了前面的 setRefreshing() 方法，对于这个方法应该也大概知道是啥了，该方法返回的是 boolean 类型，其中 true表示正在刷新，false 则表示取消刷新，也就是返回刷新的状态，开发者可以通过判断返回的刷新状态做相应的处理。

swipeRefreshLayout.isRefreshing();

6. setProgressBackgroundColorSchemeColor(int colorRes)

这个方法也是用于设置进度条的样式的，是设置下拉进度条的背景颜色，默认情况下，进度条背景颜色为白色。这里可以传入 color 的资源 id 值，也可以直接传入 color 的 id 值，下面传入的是资源 id 值。

swipeRefreshLayout.setProgressBackgroundColorSchemeColor(getResources().getColor(R.color.item_press));

SwipeRefreshLayout 的使用

在 SwipeRefreshLayout 控件使用时需要包裹一个滑动控件，比如 ScrollView 、ListView 和 GridView 等，目前有个替代 ListView 和 GridView 的列表滑动控件，也就是 RecyclerView ，这里就介绍下 SwipeRefreshLayout 中嵌套 RecyclerView 的简单使用，关于 RecyclerView 的详细介绍和使用可以参考文章《商城项目实战 | 4.1 RecyclerView 使用完全解析 体验艺术般的控件（一）》和《商城项目实战 | 4.2 RecyclerView 使用完全解析 体验艺术般的控件（二）》。

1. Gradle 添加依赖

这里首先就是要准备好相应的控件，因为使用了 RecyclerView 所以需要进行 gradle 添加相应的依赖配置。

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:recyclerview-v7:25.3.1'
}

2. 布局添加控件

导入好了控件之后，就是要在 xml 布局文件中写入了 SwipeRefreshLayout 和 RecyclerView 控件，并且设置基本的属性。

<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"
    tools:context=".MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/main_layout_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.v7.widget.RecyclerView
            android:id="@+id/main_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
        </android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

3. 添加测试数据

这里就简单的使用本地数据来展示了，数据如下。

private  void initDatas(){
        datas.add("New York");
        datas.add("Boston");
        datas.add("Washington");
        datas.add("San Francisco");
        datas.add("California");
        datas.add("Chicago");
        datas.add("Houston");
        datas.add("Phoenix");
        datas.add("Philadelphia");
        datas.add("Pennsylvania");
        datas.add("San Antonio");
        datas.add("Austin");
        datas.add("Milwaukee");
        datas.add("Las Vegas");
        datas.add("Oklahoma");
        datas.add("Portland");
        datas.add("Mexico");
    }

4. SwipeRefreshLayout 的相关设置

在 Activity/Fragment 中对 SwipeRefreshLayout 进行定义，同时对该控件的一些样式和刷新事件进行相关的设置。

private void  initRefreshLayout(){

        layoutRefresh.setColorSchemeResources(android.R.color.holo_blue_bright,
                android.R.color.holo_green_light,
                android.R.color.holo_orange_light,
                android.R.color.holo_red_light);

        layoutRefresh.setDistanceToTriggerSync(100);

        layoutRefresh.setSize(SwipeRefreshLayout.LARGE);

        layoutRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        for (int i=0; i<=10;i++){
                            mAdatper.addData(i,"new City:"+i);
                        }
                        mAdatper.notifyItemRangeChanged(0,10);
                        recyclerView.scrollToPosition(0);
                        layoutRefresh.setRefreshing(false);
                    }
                },3000);
            }
        });
    }

这里是本地数据测试，所以这里设置数据添加后延时 3s，然后添加数据，刷新列表，同时刷新进度条消失。

5. RecyclerView 的相关设置

刷新控件已经设置好了，列表控件 RecyclerView 也要做一些基本的设置,文章《商城项目实战 | 4.1 RecyclerView 使用完全解析 体验艺术般的控件（一）》和《商城项目实战 | 4.2 RecyclerView 使用完全解析 体验艺术般的控件（二）》已经对 RecyclerView 对了非常详细的介绍，在这里 Adapter 的定义、间隔线的设置这些就不多讲了。

mAdatper = new ListItemAdapter(datas);
        mAdatper.setOnItemClickListener(new ListItemAdapter.OnItemClickListener() {
            @Override
            public void onClick(View v, int position, String city) {

                Toast.makeText(MainActivity.this, "city:" + city + ",position:" + position, Toast.LENGTH_LONG).show();
            }
        });
        recyclerView.setAdapter(mAdatper);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
        recyclerView.setItemAnimator(new DefaultItemAnimator());

6. 效果图

运行代码，获取效果图，如下图所示。

SwipeRefreshLayout 的相关方法和基本使用就介绍到这里了，更多的用法请参考 Android Developer 官方 API 文档。