當前位置:編程學習大全網 - 源碼下載 - 為什麽“下拉刷新”沒有成為移動應用的標準功能

為什麽“下拉刷新”沒有成為移動應用的標準功能

下拉刷新這種用戶交互最早由twitter創始人洛倫?布裏切特(Loren Brichter)發明,有理論認為,下拉刷新是壹種適用於按照從新到舊的時間順序排列feeds的應用,在這種應用場景中看完舊的內容時,用戶會很自然地下拉查找更新的內容,因此下拉刷新就顯得非常合理。大家可以參考這篇文章:有趣的下拉刷新,下面我貼出壹個有趣的下拉刷新的案例。

2. 實現原理

上面這些例子,外觀做得再好看,他的本質上都壹樣,那就是壹個下拉刷新控件通常由以下幾部分組成:

1Header

Header通常有下拉箭頭,文字,進度條等元素,根據下拉的距離來改變它的狀態,從而顯示不同的樣式

2Content

這部分是內容區域,網上有很多例子都是直接在ListView裏面添加Header,但這就有局限性,因為好多情況下並不壹定是用ListView來顯示數據。我們把要顯示內容的View放置在我們的壹個容器中,如果妳想實現壹個用ListView顯示數據的下拉刷新,妳需要創建壹個ListView旋轉到我的容器中。我們處理這個容器的事件(down, move, up),如果向下拉,則把整個布局向下滑動,從而把header顯示出來。

3Footer

Footer可以用來顯示向上拉的箭頭,自動加載更多的進度條等。

關於上圖,需要說明幾點:

1、這個布局擴展於LinearLayout,垂直排列

2、從上到下的順序是:Header, Content, Footer

3、Content填充滿父控件,通過設置top, bottom的padding來使Header和Footer不可見,也就是讓它超出屏幕外

4、下拉時,調用scrollTo方法來將整個布局向下滑動,從而把Header顯示出來,上拉正好與下拉相反。

5、派生類需要實現的是:將Content View填充到父容器中,比如,如果妳要使用的話,那麽妳需要把ListView, ScrollView, WebView等添加到容器中。

6、上圖中的紅色區域就是屏的大小(嚴格來說,這裏說屏幕大小並不準確,應該說成內容區域更加準確)

3. 具體實現

明白了實現原理與過程,我們嘗試來具體實現,首先,為了以後更好地擴展,設計更加合理,我們把下拉刷新的功能抽象成壹個接口:

1、IPullToRefresh<T extends View>

它具體的定義方法如下:

[java] view plain copy

public interface IPullToRefresh<T extends View> {

public void setPullRefreshEnabled(boolean pullRefreshEnabled);

public void setPullLoadEnabled(boolean pullLoadEnabled);

public void setScrollLoadEnabled(boolean scrollLoadEnabled);

public boolean isPullRefreshEnabled();

public boolean isPullLoadEnabled();

public boolean isScrollLoadEnabled();

public void setOnRefreshListener(OnRefreshListener<T> refreshListener);

public void onPullDownRefreshComplete();

public void onPullUpRefreshComplete();

public T getRefreshableView();

public LoadingLayout getHeaderLoadingLayout();

public LoadingLayout getFooterLoadingLayout();

public void setLastUpdatedLabel(CharSequence label);

}

這個接口是壹個泛型的,它接受View的派生類,因為要放到我們的容器中的不就是壹個View嗎?

2、PullToRefreshBase<T extends View>

這個類實現了IPullToRefresh接口,它是從LinearLayout繼承過來,作為下拉刷新的壹個抽象基類,如果妳想實現ListView的下拉刷新,只需要擴展這個類,實現壹些必要的方法就可以了。這個類的職責主要有以下幾點:

處理onInterceptTouchEvent()和onTouchEvent()中的事件:當內容的View(比如ListView)正如處於最頂部,此時再向下拉,我們必須截斷事件,然後move事件就會把後續的事件傳遞到onTouchEvent()方法中,然後再在這個方法中,我們根據move的距離再進行scroll整個View。

負責創建Header、Footer和Content View:在構造方法中調用方法去創建這三個部分的View,派生類可以重寫這些方法,以提供不同式樣的Header和Footer,它會調用createHeaderLoadingLayout和createFooterLoadingLayout方法來創建Header和Footer創建Content View的方法是壹個抽象方法,必須讓派生類來實現,返回壹個非null的View,然後容器再把這個View添加到自己裏面。

設置各種狀態:這裏面有很多狀態,如下拉、上拉、刷新、加載中、釋放等,它會根據用戶拉動的距離來更改狀態,狀態的改變,它也會把Header和Footer的狀態改變,然後Header和Footer會根據狀態去顯示相應的界面式樣。

3、PullToRefreshBase<T extends View>繼承關系

這裏我實現了三個下拉刷新的派生類,分別是ListView、ScrollView、WebView三個,它們的繼承關系如下:

關於PullToRefreshBase類及其派和類,有幾點需要說明:

對於ListView,ScrollView,WebView這三種情況,他們是否滑動到最頂部或是最底部的實現是不壹樣的,所以,在PullToRefreshBase類中需要調用兩個抽象方法來判斷當前的位置是否在頂部或底部,而其派生類必須要實現這兩個方法。比如對於ListView,它滑動到最頂部的條件就是第壹個child完全可見並且first postion是0。這兩個抽象方法是:

[java] view plain copy

/**

* 判斷刷新的View是否滑動到頂部

*

* @return true表示已經滑動到頂部,否則false

*/

protected abstract boolean isReadyForPullDown();

/**

* 判斷刷新的View是否滑動到底

*

* @return true表示已經滑動到底部,否則false

*/

protected abstract boolean isReadyForPullUp();

創建可下拉刷新的View(也就是content view)的抽象方法是

[java] view plain copy

/**

* 創建可以刷新的View

*

* @param context context

* @param attrs 屬性

* @return View

*/

protected abstract T createRefreshableView(Context context, AttributeSet attrs);

4、LoadingLayout

LoadingLayout是刷新Layout的壹個抽象,它是壹個抽象基類。Header和Footer都擴展於這個類。這類抽象類,提供了兩個抽象方法:

getContentSize

這個方法返回當前這個刷新Layout的大小,通常返回的是布局的高度,為了以後可以擴展為水平拉動,所以方法名字沒有取成getLayoutHeight()之類的,這個返回值,將會作為松手後是否可以刷新的臨界值,如果下拉的偏移值大於這個值,就認為可以刷新,否則不刷新,這個方法必須由派生類來實現。

setState

這個方法用來設置當前刷新Layout的狀態,PullToRefreshBase類會調用這個方法,當進入下拉,松手等動作時,都會調用這個方法,派生類裏面只需要根據這些狀態實現不同的界面顯示,如下拉狀態時,就顯示出箭頭,刷新狀態時,就顯示loading的圖標。

可能的狀態值有:RESET, PULL_TO_REFRESH, RELEASE_TO_REFRESH, REFRESHING, NO_MORE_DATA

我們可以隨意地制定自己的Header和Footer,我們也可以實現如圖壹和圖二中顯示的各種下拉刷新案例中的Header和Footer,只要重寫上述兩個方法getContentSize()和setState()就行了。HeaderLoadingLayout,它默認是顯示箭頭式樣的布局,而RotateLoadingLayout則是顯示壹個旋轉圖標的式樣。

5、事件處理

我們必須重寫PullToRefreshBase類的兩個事件相關的方法onInterceptTouchEvent()和onTouchEvent()方法。由於ListView,ScrollView,WebView它們是放到PullToRefreshBase內部的,所在事件先是傳遞到PullToRefreshBase#onInterceptTouchEvent()方法中,所以我們應該在這個方法中去處理ACTION_MOVE事件,判斷如果當前ListView,ScrollView,WebView是否在最頂部或最底部,如果是,則開始截斷事件,壹旦事件被截斷,後續的事件就會傳遞到PullToRefreshBase#onInterceptTouchEvent()方法中,我們再在ACTION_MOVE事件中去移動整個布局,從而實現下拉或上拉動作。

6、滾動布局(scrollTo)

如圖三的布局結構可知,默認情況下Header和Footer是放置在Content View的最上面和最下面,通過設置padding來讓他跑到屏幕外面去了,如果我們將整個布局向下滾動(scrollTo)壹定距離,那麽Header就會被顯示出來,基於這種情況,所以在我的實現中,最終我是調用scrollTo來實現下拉動作的。

總的說來,實現的重要的點就這些,具體的壹些細節在實現在會碰到很多,可以參考代碼。

4. 如何使用

使用下拉刷新的代碼如下

[java] view plain copy

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mPullListView = new PullToRefreshListView(this);

setContentView(mPullListView);

// 上拉加載不可用

mPullListView.setPullLoadEnabled(false);

// 滾動到底自動加載可用

mPullListView.setScrollLoadEnabled(true);

mCurIndex = mLoadDataCount;

mListItems = new LinkedList<String>();

mListItems.addAll(Arrays.asList(mStrings).subList(0, mCurIndex));

mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListItems);

// 得到實際的ListView

mListView = mPullListView.getRefreshableView();

// 綁定數據

mListView.setAdapter(mAdapter);

// 設置下拉刷新的listener

mPullListView.setOnRefreshListener(new OnRefreshListener<ListView>() {

@Override

public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {

mIsStart = true;

new GetDataTask().execute();

}

@Override

public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {

mIsStart = false;

new GetDataTask().execute();

}

});

setLastUpdateTime();

// 自動刷新

mPullListView.doPullRefreshing(true, 500);

}

這是初始化壹個下拉刷新的布局,並且調用setContentView來設置到Activity中。

在下拉刷新完成後,我們可以調用onPullDownRefreshComplete()和onPullUpRefreshComplete()方法來停止刷新和加載

5. 運行效果

這裏列出了demo的運行效果圖。

6. 源碼下載

實現這個下拉刷新的框架,並不是我的原創,我也是參考了很多開源的,把我認為比較好的東西借鑒過來,從而形成我的東西,我主要是參考了下面這個demo:

/chrisbanes/Android-PullToRefresh 這個demo寫得不錯,不過他這個太復雜了,我們都知道,壹旦復雜了,萬壹我們要添加壹些需要,自然也要費勁壹些,我其實就是把他的簡化再簡化,以滿足我們自己的需要。

  • 上一篇:RHEL6中用什麽命令修復文件系統
  • 下一篇:Mht評分標準
  • copyright 2024編程學習大全網