专栏首页分享达人秀SwipeRefreshLayout下拉刷新组件

SwipeRefreshLayout下拉刷新组件

在实际开发中,经常都会遇到下拉刷新、上拉加载更多的情形,这一期就一起来学习Android系统的SwipeRefreshLayout下拉刷新组件。

一、SwipeRefreshLayout简介

SwipeRefrshLayout是Google官方更新的一个控件,可以实现下拉刷新的效果,该控件集成自ViewGroup在support-v4兼容包下。

SwipeRefrshLayout常用的几个方法如下:

  • isRefreshing():判断当前的状态是否是刷新状态。
  • setColorSchemeResources(int... colorResIds):设置下拉进度条的颜色主题,参数为可变参数,并且是资源id,可以设置多种不同的颜色,每转一圈就显示一种颜色。
  • setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener listener):设置监听,需要重写onRefresh()方法,顶部下拉时会调用这个方法,在里面实现请求数据的逻辑,设置下拉进度条消失等等。
  • setProgressBackgroundColorSchemeResource(int colorRes):设置下拉进度条的背景颜色,默认白色。
  • setRefreshing(boolean refreshing):设置刷新状态,true表示正在刷新,false表示取消刷新。

使用SwipeRefrshLayout要想达到刷新的目的,首先需要在这个布局里包裹可以滑动的子控件,如ScrollView、ListView、RecyclerView等,并且只能有一个子控件。然后在代码里设置OnRefreshListener设置监听,最后在监听里设置刷新时的数据获取就可以了。

二、简单示例

上面分析了SwipeRefreshLayout和其主要方法,其实使用起来非常的简单,接下来先通过一个简单示例来学习SwipeRefreshLayout的使用方法。

继续使用WidgetSample工程的advancedviewsample模块,在src/main/res/layout/目录下创建swiperefreshlayout_layout.xml文件,在其中填充如下代码片段:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout    
xmlns:android="http://schemas.android.com/apk/res/android"    
android:id="@+id/container_swipe"    
android:layout_width="match_parent"    
android:layout_height="wrap_content">    
<ScrollView        
   android:layout_width="match_parent"        
   android:layout_height="wrap_content">        
<TextView            
  android:id="@+id/content_tv"            
  android:layout_width="match_parent"            
  android:layout_height="wrap_content"            
  android:gravity="center"            
  android:paddingTop="10dp"            
  android:text="SwipeRefreshLayout下拉刷新控件"            
  android:textSize="20sp"            
  android:textStyle="bold"/>  
</ScrollView></android.support.v4.widget.SwipeRefreshLayout>

上面的代码中SwipeRefreshLayout只有一个为ScrollView的子元素,其中是一个文本框,通过下拉刷新来更新文本框里面的内容。

然后新建SwipeRefreshLayoutActivity.java文件,加载上面的布局文件,填充的代码如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
/** * @创建者 鑫鱻 * @描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert */
public class SwipeRefreshLayoutActivity extends AppCompatActivity        implements SwipeRefreshLayout.OnRefreshListener {   
 private SwipeRefreshLayout mSwipeRefreshLayout = null;    
 private TextView mContentTv = null;    
 @Override    
 protected void onCreate(Bundle savedInstanceState) {      
   super.onCreate(savedInstanceState);        
   setContentView(R.layout.swiperefreshlayout_layout);        
   mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container_swipe);        
   mContentTv = (TextView) findViewById(R.id.content_tv);        // 设置刷新时动画的颜色,可以设置4个        
   mSwipeRefreshLayout.setColorSchemeResources(          
         android.R.color.holo_blue_light,                
         android.R.color.holo_red_light,                
         android.R.color.holo_orange_light,                
         android.R.color.holo_green_light);        // 设置下拉监听事件        
   mSwipeRefreshLayout.setOnRefreshListener(this);    
}    
@Override    
public void onRefresh() {        
   mContentTv.setText("正在刷新,请稍后。。。");        // 模拟耗时更新操作        
   new Handler().postDelayed(new Runnable() {            
      @Override            
      public void run() {               
       mContentTv.setText("刷新完毕!");                
       mSwipeRefreshLayout.setRefreshing(false);         
          }        
          }, 5000);
              }
 }

上面的代码很简单,先给SwipeRefreshLayout设置了刷新时的动画颜色,然后给SwipeRefreshLayout添加一个下拉的Listener,在onRefresh()回调方法中来改变文本框里面的内容。这里使用到了一个Handler对象模拟耗时操作,操作完毕后再更新文本框里面的内容。关于Handler的使用方法后续会详细学习,这里先暂时借用一下。

修改启动的Activity,运行程序,下拉页面可以看到下图所示效果。

三、综合示例

上面的示例将SwipeRefreshLayout和ScrollView结合起来使用,一般开发里面结合ListView和RecyclerView较多,接下来再分享一个简单结合RecyclerView的案例。

在RecyclerView数据动态更新案例的基础上来修改,首先修改布局文件,在RecyclerView的外层LinearLayout替换为SwipeRefreshLayout,修改后的recyclerview_layout.xml文件代码如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout   
 xmlns:android="http://schemas.android.com/apk/res/android"    
 android:id="@+id/swiperefreshlayout"    
 android:layout_width="match_parent"    
 android:layout_height="match_parent">    
 <android.support.v7.widget.RecyclerView        
 android:id="@+id/recyclerview"        
 android:layout_width="match_parent"        
 android:layout_height="wrap_content" />
 </android.support.v4.widget.SwipeRefreshLayout>

关于RecyclerView的item布局和适配器代码不变,便于集中学习这里贴出适配器RecyclerViewAdapter的关键代码,如下所示:

package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.jinyu.cqkxzsxy.android.advancedviewsample.R;
import java.util.ArrayList;
/** * @创建者 鑫鱻 * @描述 Android零基础入门到精通系列教程 * 首发微信公众号分享达人秀(ShareExpert) */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {   
 private ArrayList<String> mDatas = null;    
 private LayoutInflater mInflater = null;    
public RecyclerViewAdapter(Context context, ArrayList<String> datas) {       
 this.mDatas = datas;        
 this.mInflater = LayoutInflater.from(context);    
 }    // 创建新View,被LayoutManager所调用   
@Override    
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      
  View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);       
  ViewHolder vewHolder = new ViewHolder(view);        
  return vewHolder;   
}    // 将数据与界面进行绑定的操作    
@Override    
public void onBindViewHolder(final ViewHolder holder, final int position) {       
 String name = mDatas.get(position);        
 holder.titleTv.setText("Title " + name);        
 holder.contenTv.setText("content " + name);  
}    // 获取数据的数量    
@Override    
public int getItemCount() {     
  return mDatas == null ? 0 : mDatas.size(); 
}    // 在对应位置增加一个item    
public void addData(int position) {      
  mDatas.add(position, "Insert " + position);        
  notifyItemInserted(position);        
  if(position != getItemCount()) {           
   notifyItemRangeChanged(position, getItemCount());    
   }  
     }    // 自定义的ViewHolder,持有每个Item的的所有界面组件    
public class ViewHolder extends RecyclerView.ViewHolder {   
     public TextView titleTv = null;        
     public TextView contenTv = null;        
     public ViewHolder(View itemView) {            
     super(itemView);            
     titleTv = (TextView) itemView.findViewById(R.id.title_tv);            
     contenTv = (TextView) itemView.findViewById(R.id.content_tv);    
         }  
   }}

为了不影响原来的代码,这里新建一个SwipeRecyclerViewActivity文件,代码如下:

package com.jinyu.cqkxzsxy.android.advancedviewsample;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.RecyclerViewAdapter;
import com.jinyu.cqkxzsxy.android.advancedviewsample.view.RecyclerViewItemDivider;
import java.util.ArrayList;
/** * @创建者 鑫鱻 * @描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert */
public class SwipeRecyclerViewActivity extends AppCompatActivity        implements SwipeRefreshLayout.OnRefreshListener {  
  private SwipeRefreshLayout mSwipeView = null;    
  private RecyclerView mRecyclerView = null;    
  private RecyclerViewAdapter mAdapter = null;    
  private ArrayList<String> mDatas = null;    
  @Override    
  protected void onCreate(Bundle savedInstanceState) {      
 super.onCreate(savedInstanceState);        
 setContentView(R.layout.swip_recycler_view_layout);        // 获取界面组件        
 mSwipeView = (SwipeRefreshLayout) findViewById(R.id.swiperefreshlayout);        
 mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);        // 设置管理器        
 LinearLayoutManager layoutManager = new LinearLayoutManager(this);        
 mRecyclerView.setLayoutManager(layoutManager);        // 自定义分割线        
 RecyclerView.ItemDecoration itemDecoration = new RecyclerViewItemDivider(this,R.drawable.recyclerview_item_divider);        
 mRecyclerView.addItemDecoration(itemDecoration);        // 如果可以确定每个item的高度是固定的,设置这个选项可以提高性能        
 mRecyclerView.setHasFixedSize(true);        // 初始化列表数据        
 initDatas();        // 设置适配器        
 mAdapter = new RecyclerViewAdapter(this, mDatas);        
 mRecyclerView.setAdapter(mAdapter);        // 设置默认动画        
 mRecyclerView.setItemAnimator(new DefaultItemAnimator());        // 设置颜色属性的时候一定要注意是引用了资源文件还是直接设置16进制的颜色,都是int值容易搞混        // 设置下拉进度的背景颜色,默认就是白色的        mSwipeView.setProgressBackgroundColorSchemeResource(android.R.color.white);        // 设置下拉进度的主题颜色        
 mSwipeView.setColorSchemeResources( 
R.color.colorPrimaryDark,      
R.color.colorAccent,                
R.color.colorPrimary);        // 下拉时触发SwipeRefreshLayout的下拉动画,动画完毕之后就会回调这个方法        
mSwipeView.setOnRefreshListener(this);   
 }    
 private void initDatas() {        
 mDatas = new ArrayList<>();        
 for (int i = 0; i < 50; i++) {           
  mDatas.add(i, i + 1 + "");        }  
    }  
 @Override    
 public void onRefresh() {        // 模拟一些比较耗时的操作,比如联网获取数据,需要放到子线程去执行       
  new Handler().postDelayed(new Runnable() {            
  @Override            
  public void run() {                
  mAdapter.addData(0);                
  mAdapter.notifyDataSetChanged();                // 加载完数据设置为不刷新状态                
  mSwipeView.setRefreshing(false);            }       
   }, 2000);  
     }
  }

上述代码首先获取布局控件,先设置RecyclerView显示的管理器和适配器,然后再设置SwipeRefreshLayout。

修改程序启动的Activity,运行程序,下拉列表页面,可以看到下图所示的界面效果:

这里只是简单示范了一下SwipeRefreshLayout和RecyclerView结合使用的案例,还可以在这基础上增加下拉刷新的列表头提示灯操作。

至此,Android中常用的一些UI控件暂告一段落,关于菜单、对话框等内容后续再学习。下一期差不多是国庆长假之后开始学习Android四大组件之手——Activity,敬请期待。

本文分享自微信公众号 - 分享达人秀(ShareExpert),作者:鑫鱻

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 两种对齐方式,layout_gravity和gravity大不同

    上一期我们一起学习了LinearLayout线性布局的方向、填充模型和权重,本期来一起学习LinearLayout线性布局的对齐。 一、LinearLay...

    分享达人秀
  • 视图切换组件ViewSwitcher

    前面三期学习了ProgressBar系列组件,那本期开始一起来学习ViewAnimator组件。 一、ViewAnimator组件概述 View...

    分享达人秀
  • StackView实现卡片堆叠如此简单

    上一期学习了AdapterViewFilpper的使用,你已经掌握了吗?本期开始学习同系列的StackView控件的使用方法。 一、认识StackView ...

    分享达人秀
  • 用百度地图API打造方便自己使用的手机地图

    有钱人咱就不说了,因为偶是个穷银……因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等...

    lzugis
  • 5.Android-电话拨号器详解

    之前学习了3.Android-ADT之helloworld项目结构介绍后,本章便来写个简单的电话拨号器程序.

    张诺谦
  • Android的Fragment的第一种声明方式

    Dream城堡
  • ttf设置文字字体

    MainActivity如下: package cn.testfont;   import android.os.Bundle;   import andr...

    xiangzhihong
  • Android自定义下拉刷新动画--仿百度外卖下拉刷新

    版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/51...

    Hankkin
  • 5.侧边栏逻辑

    六月的雨
  • Android应用界面开发——Widget(实现液晶时钟)

    桌面控件是通过BroadcastReceiver的形式进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver。开发桌面控件时,只需继承Bro...

    trampcr

扫码关注云+社区

领取腾讯云代金券