首页 > 代码库 > 瀑布流ListView

瀑布流ListView

前言  

  终于忙完了一段时间,现在前段时间写的一个瀑布流ListView到想法分享下,这个东西是扩展自Listview,当列表内容拉到最后后触发刷新操作,以便抓取更多到数据。

先贴下整个代码,先有个整体到概念,然后再进一步细聊。代码如下

技术分享
  1 package cn.bitlove.waterfalllistview.widget;  2   3 import cn.bitlove.waterfalllistview.R;  4 import android.content.Context;  5 import android.util.AttributeSet;  6 import android.view.LayoutInflater;  7 import android.view.View;  8 import android.view.ViewGroup;  9 import android.widget.AbsListView; 10 import android.widget.FrameLayout; 11 import android.widget.AbsListView.OnScrollListener; 12 import android.widget.ListView; 13  14 /** 15  * 瀑布流Listview 16  * */ 17 public class WaterfallListview extends ListView implements OnScrollListener { 18  19     final private String tag="WaterfallListView"; 20     private Context mContext; 21     private LayoutInflater mInflater;         22     final int REFRESH_IDEL=0;        //空闲中 23     final int REFRESH_PREPARE=1;    //准备刷新 24     final int REFRESH_ING=2;        //刷新中 25     final int REFRESH_End=3;        //刷新完成 26     private int mRefreshState = REFRESH_IDEL;        //刷新状态 27     private int mScrollState;        //滚动状态 28  29     private FrameLayout mFooterLayout;    //ListView 的footer 30     private View mListFoot;        //底部刷新区域 31  32     private IOnRefresh mRefreshListener = null;    //刷新监听器 33     public WaterfallListview(Context context) { 34         super(context); 35     } 36     public  WaterfallListview(Context context, AttributeSet attrs) { 37         super(context,attrs); 38         init(); 39     } 40     @Override 41     public void onScrollStateChanged(AbsListView view, int scrollState) { 42         mScrollState = scrollState; 43     } 44  45     @Override 46     public void onScroll(AbsListView view, int firstVisibleItem, 47             int visibleItemCount, int totalItemCount) { 48         if(totalItemCount==0 || mScrollState==SCROLL_STATE_IDLE){ 49             return; 50         } 51         //最后一个item 52         int lastItemCount = firstVisibleItem+visibleItemCount; 53         if(lastItemCount==totalItemCount && mRefreshState==REFRESH_IDEL){ 54             prepareRefresh(); 55             doRefresh(); 56         } 57     } 58  59     private void init(){ 60         mContext = getContext(); 61         mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 62         initFooter(); 63         setOnScrollListener(this); 64     } 65     /** 66      * 设置刷新器 67      * */ 68     public void setRefreshListener(IOnRefresh refresher){ 69         mRefreshListener = refresher; 70     } 71  72     /** 73      * 初始化底部刷新内容 74      * */ 75     private void initFooter(){ 76         mListFoot = mInflater.inflate(R.layout.foot_waterfall_listview, null); 77         mFooterLayout = new FrameLayout(mContext); 78         addFooterView(mFooterLayout); 79     } 80     /** 81      * 准备刷新 82      * */ 83     private void prepareRefresh(){ 84         //Log.i(tag,"prepareRefresh"); 85         mRefreshState = REFRESH_PREPARE; 86         ViewGroup vg = (ViewGroup) mListFoot.getParent(); 87         if(vg!=null){ 88             vg.removeView(mListFoot); 89         } 90  91         mFooterLayout.addView(mListFoot); 92  93         if(mRefreshListener!=null){ 94             mRefreshListener.beforeRefresh(); 95         } 96     } 97     /** 98      * 执行刷新 99      * */100     private void doRefresh(){101         //Log.i(tag,"doRefresh");102         mRefreshState=REFRESH_ING;103 104         if(mRefreshListener!=null){105             mRefreshListener.doRefresh();106         }107 108     }109     /**110      * 完成刷新111      * */112     public void completeRefresh(){113         mRefreshState = REFRESH_IDEL;114         mFooterLayout.removeAllViews();115     }116     117     public interface IOnRefresh{118         public void beforeRefresh();119         /**120          * 执行完doRefresh操作后,必须调用completeRefresh方法来清理刷新状态121          * */122         public void doRefresh();123     }124 }
View Code

底部视图  

  为了完成滑动到底部后触发刷新事件,为此给Listview增加了一个底部view,代码如下

 1 <?xml version="1.0" encoding="utf-8"?> 2 <!-- waterfallListview 底部刷新区域 --> 3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 4     android:layout_width="match_parent" 5     android:layout_height="match_parent"  6     > 7      8 <TextView  9     android:layout_height="40dp"10     android:layout_width="match_parent"11     android:text="加载更多数据..."12     android:gravity="center"13     />14 </RelativeLayout>

很简单,只是用来展示一个获取状态。

接口

   除此之外,还增加了一个内部接口,IOnRefresh,表示相关事件,代码如下所示

1 public interface IOnRefresh{2         public void beforeRefresh();3         /**4          * 执行完doRefresh操作后,必须调用completeRefresh方法来清理刷新状态5          * */6         public void doRefresh();7 }

 这两个方法的含义根据名字来看就很清楚了,beforeRefresh,在刷新之前调用,让client有机会做一些事情;doRefresh,真正执行刷新到部分,另外需要注意到时候,当执行完刷新到时候,要掉用下widget的completeRefresh方法来清理刷新状态,标示真正执行完了刷新操作

completeRefresh方法

很简单到一个方法,有两个主要功能,一是置状态,二是取消listview底部的view,代码如下

1 public void completeRefresh(){2         mRefreshState = REFRESH_IDEL;3         mFooterLayout.removeAllViews();4 }

设计思路

  大体到内容就是以上那些,下面来看下实现的思路。
  为了完成这个功能,增加了一个刷新状态mRefreshState,这个状态用来表示当前控件所处到刷新状态,以便在不同状态下做不同到处理,其有以下四个状态

final int REFRESH_IDEL=0;        //空闲中
final int REFRESH_PREPARE=1;    //准备刷新
final int REFRESH_ING=2;        //刷新中
final int REFRESH_End=3;        //刷新完成

然后整个widget到逻辑就是控制这四个状态,然后在不同到状态执行不同到操作,比如在执行beforeRefresh函数时,此时状态处于REFRESH_PREPARE,
当执行doRefresh时状态处于REFRESH_ING,当我们调用completeRefresh后,状态改为REFRESH_IDEL,其实当初设计的时候还希望有一个REFRESH_End状态,但是实现过程中没有发现此状态的用处,暂时为保留状态,以便以后扩充用。

控制状态

控制状态,主要是在onScroll函数中操作的,代码如下

 1 @Override 2     public void onScroll(AbsListView view, int firstVisibleItem, 3             int visibleItemCount, int totalItemCount) { 4         if(totalItemCount==0 || mScrollState==SCROLL_STATE_IDLE){ 5             return; 6         } 7         //最后一个item 8         int lastItemCount = firstVisibleItem+visibleItemCount; 9         if(lastItemCount==totalItemCount && mRefreshState==REFRESH_IDEL){10             prepareRefresh();11             doRefresh();12         }13     }

主要实现思路就是监测最后一个item是否出现。

  好了,到此为止,主要到思路就完了。

后记

  这个控件到Demo程序下载地址:https://github.com/xiaoai-opensource/WaterfallListview

  有需要到朋友可以前去下载查看

瀑布流ListView