iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android中Listview下拉刷新和上拉加载更多的多种实现方案
  • 481
分享到

Android中Listview下拉刷新和上拉加载更多的多种实现方案

listviewAndroid 2022-06-06 05:06:44 481人浏览 安东尼
摘要

 listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明。      方案一:添加头布局和

 listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明。

     方案一:添加头布局和脚布局

        Android系统为listview提供了addfootview和addheadview两个api。这样可以直接自定义一个View,以添加视图的形式实现下来刷新和上拉加载。

     实现步骤   

       1、创建一个类继承ListView:class PullToRefreshListView extends ListView; 

     2、在构造方法中添加HeadView:addHeaderView(headView);

       3、获取HeadView的高。测量控件的高可以有两方法getMeasuredHeight和getHeight,getMeasuredHeight()在onMeasure方法执行之后才能获取到;getHeight()  在onLayout方法执行之后才能获取到值;

       4、显示和隐藏headView,通过setpadding实现,当向下滑,且第一条可见item是第0条的时候才需要设置HeadView的paddingTop来显示HeadView。          

       显示:headView.setPadding(0,0,0,0);     

       隐藏:headView.setPadding(0,-headViewHeight,0,0);

      5、下拉刷新三种状态的判断,移动的时候,当paddingTop < 0 的时候,说明HeadView没有完全显示出来,进入下拉刷新状态;移动的时候,当paddingTop >= 0 的时候,   说明HeadView已经完全显示出来了,进入松开以新状态;手指抬起的时候,且当前状态是松开刷新状态的时候,进入正在刷新状态; 当已经是“正在刷新”状态时,   则不允许再做”下拉刷新”和”松开刷新”的操作了,在Move事件中加入判断,如果已经是正在刷新状态了,则不处理下拉的操作了。      

       6、下拉箭头的转动。下拉刷新是向下,松开刷新时向上。旋转动画通过属性动画实现。隐藏箭头的时候要清除动画:iv_arrow.clearAnimation();  如果不隐藏动画效果,设置View.GoNE之后还是看得见的。    

       7、HeadView显示时,当手指松开时的处理,松开时如果是“正在刷新”状态,则把headVie完全显示;松开时如果是“下拉刷新”状态,则把HeadView完全隐藏    

       8、增加FooterView:addFooterView(footerView)。当ListView处于空闲状态,并且最后一条可见item是ListView中的最后一条数据时显示footview,   footerView显示出来后,ListView不会自动上滑把FooterView显示出来的,所以需要手动设置:setSelection(getCount() - 1);即选中最后一条。     

      9、增加回调监听器。当ListView处于刷新状态的时候会调用onRefreshing()方法;当ListView处于加载更多的时候会调用onLoadMore()。加载完成后通知控件加载完成。

       具体实现:


import com.itheima.pulltorefreshlistview.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;
public class PullToRefreshListView extends ListView {
  private View headerView;
  private float downY;
  private int headerViewHeight;
  
  private static final int STATE_PULL_TO_REFRESH = 0;
  
  private static final int STATE_RELEASE_REFRESH = 1;
  
  private static final int STATE_REFRESHING = 2;
  
  private int currentState = STATE_PULL_TO_REFRESH;  // 默认是下拉刷新状态
  private ImageView iv_arrow;
  private ProgressBar progress_bar;
  private TextView tv_state;
  private RotateAnimation upAnim;
  private RotateAnimation downAnim;
  private OnRefreshingListener mOnRefreshingListener;
  private View footerView;
  private int footerViewHeight;
  
  private boolean loadingMore;
  public PullToRefreshListView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initHeaderView();
    initFooterView();
  }
  private void initHeaderView() {
    headerView = View.inflate(getContext(), R.layout.header_view, null);
    iv_arrow = (ImageView) headerView.findViewById(R.id.iv_arrow);
    progress_bar = (ProgressBar) headerView.findViewById(R.id.progress_bar);
    showRefreshingProgressBar(false);
    tv_state = (TextView) headerView.findViewById(R.id.tv_state);
    headerView.measure(0, 0);  // 主动触发测量,mesure内部会调用onMeasure
    headerViewHeight = headerView.getMeasuredHeight();
    hideHeaderView();
    super.addHeaderView(headerView);
    upAnim = createRotateAnim(0f, -180f);
    downAnim = createRotateAnim(-180f, -360f);
  }
  private void initFooterView() {
    footerView = View.inflate(getContext(), R.layout.footer_view, null);
    footerView.measure(0, 0);// 主动触发测量,mesure内部会调用onMeasure
    footerViewHeight = footerView.getMeasuredHeight();
    hideFooterView();
    super.addFooterView(footerView);
    super.setOnScrollListener(new OnScrollListener() {
      // 当ListView滚动的状态发生改变的时候会调用这个方法
      @Override
      public void onScrollStateChanged(AbsListView view, int scrollState) {
        if (scrollState == OnScrollListener.SCROLL_STATE_IDLE  // ListView处于空闲状态
            && getLastVisiblePosition() == getCount() - 1  // 界面上可见的最后一条item是ListView中最后的一条item
            && loadingMore == false              // 如果当前没有去做正在加载更多的事情
            ) {
          loadingMore = true;
          showFooterView();
          setSelection(getCount() - 1);
          if (mOnRefreshingListener != null) {
            mOnRefreshingListener.onLoadMore();
          }
        }
      }
      // 当ListView滚动的时候会调用这个方法
      @Override
      public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
      }
    });
  }
  private void hideFooterView() {
    int paddingTop = -footerViewHeight;
    setFooterViewPaddingTop(paddingTop);
  }
  private void showFooterView() {
    int paddingTop = 0;
    setFooterViewPaddingTop(paddingTop);
  }
  private void setFooterViewPaddingTop(int paddingTop) {
    footerView.setPadding(0, paddingTop, 0, 0);
  }
  
  private void showRefreshingProgressBar(boolean showProgressBar) {
    progress_bar.setVisibility(showProgressBar ? View.VISIBLE : View.GONE);
    iv_arrow.setVisibility(!showProgressBar ? View.VISIBLE : View.GONE);
    if (showProgressBar) {
      iv_arrow.clearAnimation();  // 有动画的View要清除动画才能真正的隐藏
    }
  }
  
  private RotateAnimation createRotateAnim(float fromDegrees, float toDegrees) {
    int pivotXType = RotateAnimation.RELATIVE_TO_SELF;    // 旋转点的参照物
    int pivotYType = RotateAnimation.RELATIVE_TO_SELF;    // 旋转点的参照物
    float pivotXValue = 0.5f;  // 旋转点x方向的位置
    float pivotYValue = 0.5f;  // 旋转点y方向的位置
    RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);
    ra.setDuration(300);
    ra.setFillAfter(true);  // 让动画停留在结束位置
    return ra;
  }
  
  private void hideHeaderView() {
    int paddingTop = -headerViewHeight;
    setHeaderViewPaddingTop(paddingTop);
  }
  
  private void showHeaderView() {
    int paddingTop = 0;
    setHeaderViewPaddingTop(paddingTop);
  }
  
  private void setHeaderViewPaddingTop(int paddingTop) {
    headerView.setPadding(0, paddingTop, 0, 0);
  }
  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN:
      downY = ev.getY();
      break;
    case MotionEvent.ACTION_MOVE:
      if (currentState == STATE_REFRESHING) {
        // 如果当前已经是“正在刷新“的状态了,则不用去处理下拉刷新了
        return super.onTouchEvent(ev);
      }
      int fingerMoveDistanceY = (int) (ev.getY() - downY);    // 手指移动的距离
      // 如果是向下滑动,并且界面上可见的第一条item是ListView的索引为0的item时我们才处理下拉刷新的操作
      if (fingerMoveDistanceY > 0 && getFirstVisiblePosition() == 0) {
        int paddingTop = -headerViewHeight + fingerMoveDistanceY;
        setHeaderViewPaddingTop(paddingTop);
        if (paddingTop < 0 && currentState != STATE_PULL_TO_REFRESH) {
          // 如果paddingTop小于0,说明HeaderView没有完全显示出来,则进入下拉刷新的状态
          currentState = STATE_PULL_TO_REFRESH;
          tv_state.setText("下拉刷新");
          iv_arrow.startAnimation(downAnim);
          showRefreshingProgressBar(false);
          // 让箭头转一下
        } else if (paddingTop >= 0 && currentState != STATE_RELEASE_REFRESH) {
          // 如果paddingTop>=0,说明HeaderView已经完全显示出来,则进入松开刷新的状态
          currentState = STATE_RELEASE_REFRESH;
          tv_state.setText("松开刷新");
          iv_arrow.startAnimation(upAnim);
          showRefreshingProgressBar(false);
        }
        return true;
      }
      break;
    case MotionEvent.ACTION_UP:
      if (currentState == STATE_RELEASE_REFRESH) {
        // 如果当前状态是松开刷新,并且抬起了手,则进入正在刷新状态
        currentState = STATE_REFRESHING;
        tv_state.setText("正在刷新");
        showRefreshingProgressBar(true);
        showHeaderView();
        if (mOnRefreshingListener != null) {
          mOnRefreshingListener.onRefreshing();
        }
      } else if (currentState == STATE_PULL_TO_REFRESH) {
        // 如果抬起手时是下拉刷新状态,则把HeaderView完成隐藏
        hideHeaderView();
      }
      break;
    }
    return super.onTouchEvent(ev);
  }
  public void setOnRefreshingListener(OnRefreshingListener mOnRefreshingListener) {
    this.mOnRefreshingListener = mOnRefreshingListener;
  }
  
  public interface OnRefreshingListener {
    
    void onRefreshing();
    
    void onLoadMore();
  }
  
  public void onRefreshComplete() {
    hideHeaderView();
    currentState = STATE_PULL_TO_REFRESH;
    showRefreshingProgressBar(false);
  }
  
  public void onLoadmoreComplete() {
    hideFooterView();
    loadingMore = false;
  }
}

 方案二: listview的多种样式显示

        设置listview的适配器的时候可以实现两个方法: getViewTypeCount()和getItemViewType(),前者指定条目的种类,后者返回具体的类型,这样可以根据不同的类型设计相关的样式,包括上拉加载更多,和下拉刷新,两者类似,因此这里仅仅给出加载更多的写法。具体实现如下:

        1、重写getViewTypeCount()和getItemViewType(),这里包括普通的item条目和加载更多的条目,所以getViewTypeCount()返回值为2;


@Override
  public int getViewTypeCount() {
    return super.getViewTypeCount() + 1;
  }
  @Override
  public int getItemViewType(int position) {
    if (position == getCount() - 1) {
      return 0;
    } else {
      return addViewType(position); //构造一个方法出来,方便子类修改,添加更多的样式
    }
  }
  public int addViewType(int position) {
    return 1;
  }

         2、在getview()中针对不同的类型添加布局:


 @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    BaseHoldle holdle;
    if (convertView == null) {
      if (getItemViewType(position) == 0) { //type为0 表示应该加载加载更多的视图
        holdle = getLoadmoreHoldle();
      } else {                //否则为普通视图
        holdle = getSpecialBaseHoldle(position);
      }
    } else {
      holdle = (BaseHoldle) convertView.getTag();
    }
    if (getItemViewType(position) == 0) {   //加载更多视图,请求网络获取数据
      if (havemore()) {
        holdle.setDataAndRefreshHoldleView(LoadmoreHoldle.LOADMORE_LODING);
        triggleLoadMoreData();
      } else {               
        holdle.setDataAndRefreshHoldleView(LoadmoreHoldle.LOADMORE_NONE);
      }
    } else {                 //普通视图视图,请求网络获取数据
      T data = (T) mdata.get(position);
      holdle.setDataAndRefreshHoldleView(data);
    }
    mHoldleView = holdle.mHoldleView;
    mHoldleView.setScaleX(0.6f);
    mHoldleView.setScaleY(0.6f);
    ViewCompat.animate(mHoldleView).scaleX(1).scaleY(1).setDuration(400).setInterpolator(new OvershootInterpolator(4)).start();
    return mHoldleView;
  }

           3、具体的加载更多视图的实现


private BaseHoldle getLoadmoreHoldle() {
    if (mLoadmoreHoldle == null) {
      mLoadmoreHoldle = new LoadmoreHoldle();
    }
    return mLoadmoreHoldle;
  }
  public class LoadmoreHoldle extends BaseHoldle {
  @Bind(R.id.item_loadmore_container_loading)
  LinearLayout itemloadmorecontainerloading;
  @Bind(R.id.item_loadmore_container_retry)
  LinearLayout itemloadmorecontainerretry;
  @Bind(R.id.item_loadmore_tv_retry)
  TextView item_loadmore_tv_retry;
  public static final int LOADMORE_LODING = 0;
  public static final int LOADMORE_ERROR = 1;
  public static final int LOADMORE_NONE = 2;
  private int mCurretState;
  @Override
  public void refreshHoldleView(Object data) {
    itemloadmorecontainerloading.setVisibility(View.GONE);
    itemloadmorecontainerretry.setVisibility(View.GONE);
    mCurretState = (int) data;
    switch (mCurretState) {
      case LOADMORE_LODING:
        itemloadmorecontainerloading.setVisibility(View.VISIBLE);
        break;
      case LOADMORE_ERROR:
        itemloadmorecontainerretry.setVisibility(View.VISIBLE);
        break;
      case LOADMORE_NONE:
        break;
    }
  }
  @Override
  public View ininViewHoldle() {
    View view = View.inflate(UiUtils.getContext(), R.layout.itemloadmore, null);
    ButterKnife.bind(this, view);
    return view;
  }
}
//holder基类,提取公共的方法
public abstract class BaseHoldle<T> {
  public View mHoldleView;
  public T mdata;
  public BaseHoldle() {
    mHoldleView = ininViewHoldle();
    mHoldleView.setTag(this);
  }
  public void setDataAndRefreshHoldleView(T mdata) {
    this.mdata = mdata;
    refreshHoldleView(mdata);
  }
  public abstract void refreshHoldleView(T data);
  public abstract View ininViewHoldle();
}

方案三: SwipeRefreshLayout实现下来刷新

     SwipeRefreshLayout对下不兼容,且只有下拉刷新功能没有上拉加载更多的功能。当时作为Andriod5.0之后的新特性,使用起来方便,可以直接调用系统的API。使用方法也较为简单。具体实现如下:

    首先声明控件,设置颜色: 


 refreshLayout = (SwipeRefreshLayout) findViewById(R.id.refresh);
   refreshLayout.setOnRefreshListener(this); 
   refreshLayout.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);
   refreshLayout.setProgressBackgroundColor(R.color.refresh_bg);
   refreshLayout.setProgressBackgroundColor(R.color.refresh_bg);

    写一个类实现SwipeRefreshLayout.OnRefreshListener,重写onRefresh()方法:


@Override  
  public void onRefresh() { 
   refreshLayout.postDelayed(new Runnable() {
    @Override
    public void run() {
     //请求网络,获取数据        
     refreshLayout.setRefreshing(false);
    }
    },3000);
  }

以上所述是小编给大家介绍的Android中Listview下拉刷新和上拉加载更多的多种实现方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持!

您可能感兴趣的文章:Android实现上拉加载更多以及下拉刷新功能(ListView)Android RecyclerView 上拉加载更多及下拉刷新功能的实现方法Android ListView实现上拉加载更多和下拉刷新功能Android下拉刷新上拉加载更多左滑动删除Android XListView下拉刷新和上拉加载更多Android RecyclerView实现下拉刷新和上拉加载更多Android RecyclerView下拉刷新和上拉加载更多Android 仿硅谷新闻下拉刷新/上拉加载更多android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多Android实践之带加载效果的下拉刷新上拉加载更多


--结束END--

本文标题: Android中Listview下拉刷新和上拉加载更多的多种实现方案

本文链接: https://www.lsjlt.com/news/22825.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义ListView实现下拉刷新上拉加载更多
    目录1、创建刷新控件1.1、创建头部View1.2、下拉事件1.3、接口回调2、上拉加载更多2.1、底部样式2.2、布局添加Listview现在用的很少了,基本都是使用Recycle...
    99+
    2024-04-02
  • Flutter实现下拉刷新和上拉加载更多
    本文实例为大家分享了Flutter实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 效果 下拉刷新 如果实现下拉刷新,必须借助RefreshIndicator,在li...
    99+
    2024-04-02
  • Flutter listview如何实现下拉刷新上拉加载更多功能
    目录下拉刷新 RefreshIndicator 上拉加载更多 总结:下拉刷新 在Flutter中系统已经为我们提供了google material design的刷新功能 , 样式...
    99+
    2024-04-02
  • 原生js实现下拉刷新和上拉加载更多
    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: t...
    99+
    2024-04-02
  • Flutter中怎么利用listview实现下拉刷新上拉加载更多功能
    这期内容当中小编将会给大家带来有关Flutter中怎么利用listview实现下拉刷新上拉加载更多功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。下拉刷新在Flutter中系统已经为我们提供了googl...
    99+
    2023-06-20
  • 原生js怎么实现下拉刷新和上拉加载更多
    本篇文章为大家展示了原生js怎么实现下拉刷新和上拉加载更多,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器...
    99+
    2023-06-26
  • vue2.0中移动端如何实现下拉刷新和上拉加载更多
    这篇文章主要介绍了vue2.0中移动端如何实现下拉刷新和上拉加载更多,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。示例<templat...
    99+
    2024-04-02
  • H5基于iScroll如何实现下拉刷新和上拉加载更多
    这篇文章将为大家详细讲解有关H5基于iScroll如何实现下拉刷新和上拉加载更多,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言   &n...
    99+
    2024-04-02
  • 微信小程序怎么实现下拉刷新和上拉加载更多
    微信小程序可以通过使用onPullDownRefresh和onReachBottom两个方法来实现下拉刷新和上拉加载更多的功能。 ...
    99+
    2024-04-03
    微信小程序
  • Android中ListView下拉刷新的实现代码
    Android中ListView下拉刷新实现效果图:ListView中的下拉刷新是非常常见的,也是经常使用的,看到有很多同学想要,那我就整理一下,供大家参考。那我就不解释,直接上代码了。这里需要自己重写一下ListView,重写代码如下:p...
    99+
    2023-05-31
    android listview 下拉刷新
  • uniapp怎么实现下拉刷新和上拉加载功能
    随着移动端开发的不断升级,开发者们对于移动应用的需求也越来越高。而在很多移动应用中,下拉刷新和上拉加载更多是必不可少的功能之一,为了提高用户体验,许多移动应用都会加入这两个功能。在这里,我们将介绍如何在uniapp中实现下拉刷新和上拉加载更...
    99+
    2023-05-14
  • Spring怎么实现上拉刷新和下拉加载效果
    这篇文章主要介绍Spring怎么实现上拉刷新和下拉加载效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!导依赖:compile 'com.android.support:recyclerview-v...
    99+
    2023-05-30
    spring
  • MUI如何实现上拉加载和下拉刷新效果
    这篇文章主要介绍了MUI如何实现上拉加载和下拉刷新效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。编写存储过程分页(此处使用T-SQL)C...
    99+
    2024-04-02
  • Vue实现下拉加载更多
    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infini...
    99+
    2024-04-02
  • Flutter 给列表增加下拉刷新和上滑加载更多功能
    目录有状态组件 异步 async/await 引入 flutter_easyrefresh 使用 flutter_easyrefresh运行结果 结语 有状态组件 当 Flutte...
    99+
    2024-04-02
  • Android如何通过XListView实现上拉加载下拉刷新功能
    小编给大家分享一下Android如何通过XListView实现上拉加载下拉刷新功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下## 导入XListVIew第三方库文件。通过LinkedList将刷新...
    99+
    2023-05-30
  • 小程序怎么实现上拉刷新下拉加载
    这篇文章主要介绍“小程序怎么实现上拉刷新下拉加载”,在日常操作中,相信很多人在小程序怎么实现上拉刷新下拉加载问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现上拉刷新下拉加载”的疑惑有所帮助!接下来...
    99+
    2023-06-26
  • MUI如何实现上拉刷新/下拉加载功能
    小编给大家分享一下MUI如何实现上拉刷新/下拉加载功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!新闻信息列表必备的功能,支持...
    99+
    2024-04-02
  • vue2中mint-ui loadmore如何实现下拉刷新,上拉更多功能
    小编给大家分享一下vue2中mint-ui loadmore如何实现下拉刷新,上拉更多功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解...
    99+
    2024-04-02
  • 怎么用vue代码实现下拉刷新,上拉更多功能
    这篇文章主要讲解了“怎么用vue代码实现下拉刷新,上拉更多功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vue代码实现下拉刷新,上拉更多功能”吧!具体代码如下:<templa...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作