前言

相信很多童鞋對於控制元件的下拉重新整理都比較熟悉吧,常用的PullToRefresh開源庫和Google自帶的SwipeRefreshLayout大家肯定也很熟悉吧,但作為一個Android開發新手,對於自定義控制元件和自定義View來實現一些效果肯定還是比較恐懼,無從下手,筆者也是如此.但萬事開頭難,只要理清楚想要實現的效果,按照步驟來分佈來具體程式碼實施就OK了.
其實下拉重新整理,感覺萬變不離其宗,對普通的下拉重新整理有很多可以延伸的地方,比如:帶幀動畫的下拉重新整理.美團,大眾點評,汽車之家.從listview延伸到所有控制元件的下拉重新整理.筆者近期想要實現的就是ViewPager左右滑動重新整理載入帶彈性的效果

效果

本文想要實現的效果是,Android中的ListView下拉的時候有彈性的效果,類似IOS的ListView,但與IOS不一樣,android想要實現這一的效果需要重寫Listview.我們先來看看效果圖,如下:

實現思路

我們想要的目的清楚了,然後就是具體實現思路.
核心:在ListView的頂部增加一個headView.並且在下拉的過程中動態改變HeadView的高度.並且在使用者手鬆開的時候,將ListView回滾到頂部,headView隱藏.
具體實現步驟:
1.在ListView的頂部增加一個headView,將headView的初始位置隱藏在ListView的上方.(即:在ListView裡面addHeaderView);
注:這一步的實現,需要在ListView裡面測繪headView的高寬,方可顯示出來.有點類似繼承View裡面的onmeasure()方法,不過因為是重寫ListView,這裡也要去measure,HeadView的高寬;具體程式碼如下:

private void measureView(View headview) {
        //設定LayoutParams來設定width和height;
        ViewGroup.LayoutParams p = headview.getLayoutParams();
        if (p == null){
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        //這邊寬度就是p的寬度,也就是父容器的width,listView是限制寬度的，所以需要getChildMeasureSpec這個方法
 

        int childWidthSpec = ViewGroup.getChildMeasureSpec(0,0,p.width);
        //接下來是高度
        int lpheight = p.height;
        int childHeightSpec;
        if (lpheight > 0){
            //通過makeMeasureSpec方法來獲取高度
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpheight,MeasureSpec.EXACTLY);//精確模式
        }else{
            childHeightSpec = MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED);//不指定大小
        }
        //寬高賦值給headview
        headview.measure(childWidthSpec, childHeightSpec);
    }

2.新增進去之後,那就是最初的顯示,把headview隱藏到listview上,檢視不可見;

    addHeaderView(headview);//新增到父佈局的headView
        headviewHeight = headview.getMeasuredHeight();//獲取到測量的高度
        headview.setPadding(0,-headviewHeight,0,0);//隱藏到上面

3.在listview處於頂部的時候,監聽使用者滑動的過程監聽使用者手勢進行下拉,否則,就不能下拉,那麼就會用到AbsListView.OnScrollListener這個監聽,噹噹前可見item的postion=0的時候,才下拉:

 @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        //在移動的過程中,把可見的第一項賦值給全域性變數,方便後面下拉重新整理
        mFirstVisibleItem = firstVisibleItem;
    }

4.就是我們的下拉回滾,主要是重寫當前listview的ontouch事件來具體實現.ACTION_MOVE的程式碼主要是來實現listview隨手勢下拉,headview高度增加;ACTION_UP的程式碼主要是listview回滾的彈性特效,其實也監簡單就一句程式碼就搞定,主要用了這個smoothScrollBy()方法,程式碼:

//重寫onTouch方法,實現listview下拉回滾特效
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN:
                //如果當前listview處於初始狀態,也就是第一個可見item的postion為0的時候,記錄手指滑動的Y軸座標
                if (mFirstVisibleItem == 0){
                    startY = ev.getY();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                float tempY = ev.getY();
                //在頂部時,給偏移量賦值
                if (mFirstVisibleItem == 0){
//                    startY = tempY;
                    offsetY = tempY - startY;
                    float currentHeight = (-headviewHeight+offsetY/3);
                    headview.setPadding(0, (int) currentHeight, 0, 0);//這一步就是實現listView隨手勢下拉,headview高度增加
                }
                break;
            case MotionEvent.ACTION_UP:
//                this.smoothScrollBy((int)(-headviewHeight+offsetY/3)+headviewHeight, 500);
                //恢復到headView隱藏的高度
                this.smoothScrollBy(-headviewHeight, 500);
                headview.setPadding(0,-headviewHeight,0,0);//headview隱藏到上面
                break;
        }
        return super.onTouchEvent(ev);
    }

demo下載

http://download.csdn.net/detail/qq_28690547/9398483
注:demo是android-studio專案,如果還在用eclipse的同學,直接把res和java目錄檔案拷過去就能跑了哈,不過建議大家還是多用android-studio,真的很方便.

結語

整個過程就完整實現了,是不是很簡單了.其實自定義View我總結的,就跟咱們以前美術課拿筆在紙上作畫一樣,首先要明確想要畫什麼,其次你就會思考為了實現這個目標,我們第一步第二步第三步要做些什麼.最後就是具體實現這些步驟,與畫畫不一樣,咱們就是用程式碼來實現它而已.不過你這樣理解了,以後就對自定義控制元件不那麼恐懼了.

補充

其實一個很簡單的方法,也可以實現ListView的彈性效果,重寫ListView裡面的overScrollBy的方法,設定maxOverScrollY的值也可以簡單實現效果,(不過下拉重新整理涉及不同狀態改變其中的值,還是得用headview),程式碼:

/**
 * 重寫overScrollBy方法裡面的maxOverScrollY實現ListView的彈性效果
 * Created by max on 2016/1/10.
 */
public class DouListView extends ListView{

    public DouListView(Context context) {
        super(context);
    }

    public DouListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, 300, isTouchEvent);//這個300可以根據螢幕density來滿足多分佈需求.
    }
}