下拉刷新原理

在移動應用開發中,無論是Android還是IOS應用,經常可以看到下拉列表鬆開後自動刷行數據,在IOS中,使用下拉刷新UITableView中的數據用的非常多,最典型的就是新浪微博的客戶端,使用下拉的形式來更新最新的微博信息。


首先請點擊下載源碼,下載完成後裏面有個Demo是可以直接運行的Xcode工程,然後就是這個開源項目的源碼,如何使用可以參照Demo,這個EGOTableViewPullRefresh我修改了一部分,並添加了一些註釋,主要是支持了中英文版本,原生的只支持英文,我添加了中英文支持,然後就是刷新時間的格式,修改後的格式更直觀,原生的是使用SDK自帶的時間格式。


這時我第一次寫博客,寫的不好請見諒哈!


開始進入正題。。。。。

這次主要講解EGOTableViewPullRefresh下拉的實現原理,並對EGOTableViewPullRefresh源代碼進行講解,至於如何使用EGOTableViewPullRefresh,可以參考我上傳的Demo。

UITableView繼承之UIScrollView,所以利用UIScrollView滾動的位置屬性contentOffset,獲取用戶下拉的位置contentOffset.y,通過計算用戶下拉了多少,來實現下拉刷新的功能。

首先看看下拉列表的組成部分,下拉列表就是UITableView了,在UITableView中添加一個子View,用來顯示下拉刷新的狀態,我把它叫做HeaderView,HeaderView初始化frame的位置是{0,-60,0,60},所以正常情況下我們看不到HeaderView,當用戶下拉列表時HeaderView就會顯示出來。第二張圖的數值表示的是初始化的時候,不是下拉時的數值,爲了方便看到HeaderView,便於理解,所以把列表下拉後標註數值。



UITableView在頂部時UIScrollView的contentoffset.y=0,在用戶下拉滑動列表時,

contentoffset.y爲負數增大,

當contentoffset.y <= -65時表示HeaderView已經完全顯示出來了,此時HeaderView便顯示“鬆開刷新”

,並把下拉的箭頭圖標向上。


此時若用戶鬆開手,停止下拉,HeaderView的狀態就改爲等待數據的狀態,如下圖所示(下圖的contentoffset.y=0標錯了,是=-60)



以上就是頂部下拉刷新數據的原理了,根據這個原理也就不難寫出底部上拉刷新數據的實現了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章