android listivew 下拉回彈刷新

該效果是一名國外工程師(johannilsson)的代碼,拿來研究了下,自己整合了一下,現在拿出來,跟大家一起分享。

再次感謝這位國外工程師(johannilsson),謝謝!

新浪微博,和QQ空間裏面,都有那個下拉刷新的效果,另很多人眼前一亮,細細分析,原理原來如此。

在原作者的基礎上,寫了一些註釋,和幫助大家更好的閱讀理解,(可能其中有些地方註釋不準,歡迎指正,謝謝)

下面,就亮出關鍵代碼:

 

 ****  自定義 listivew   (關鍵代碼)

 


public class PullToRefreshListView extends ListView implements OnScrollListener {

    private static final int TAP_TO_REFRESH = 1;     // 初始狀態
    private static final int PULL_TO_REFRESH = 2;    //拉動刷新
    private static final int RELEASE_TO_REFRESH = 3;  //釋放刷新
    private static final int REFRESHING = 4;    //正在刷新

    private static final String TAG = "PullToRefreshListView";
    //刷新接口
    private OnRefreshListener mOnRefreshListener;

    //箭頭圖片
    private static  int REFRESHICON = R.drawable.goicon;
  
    /**
     * listview 滾動監聽器
     */
    private OnScrollListener mOnScrollListener;
   
    //視圖索引器
    private LayoutInflater mInflater;
    /**
     * 頭部視圖  內容  -- start
     */
    private RelativeLayout mRefreshView;
    private TextView mRefreshViewText;
    private ImageView mRefreshViewImage;
    private ProgressBar mRefreshViewProgress;
    private TextView mRefreshViewLastUpdated;
    /**
     * 頭部視圖  內容  -- end
     */
    //當前listivew 的滾動狀態
    private int mCurrentScrollState;
   
    //當前listview 的刷新狀態
    private int mRefreshState;

    //動畫效果
    //變爲向下的箭頭
    private RotateAnimation mFlipAnimation;
    //變爲逆向的箭頭
    private RotateAnimation mReverseFlipAnimation;
    //頭視圖的高度
    private int mRefreshViewHeight;
    //頭視圖 原始的 top padding 屬性值
    private int mRefreshOriginalTopPadding;
    //
    private int mLastMotionY;
    //是否反彈
    private boolean mBounceHack;

    public PullToRefreshListView(Context context) {
        super(context);
        init(context);
    }

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

    public PullToRefreshListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        // Load all of the animations we need in code rather than through XML
     //初始化動畫
     //
        mFlipAnimation = new RotateAnimation(0, -180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mFlipAnimation.setInterpolator(new LinearInterpolator());
        mFlipAnimation.setDuration(250);
        mFlipAnimation.setFillAfter(true);
       
       
       
        mReverseFlipAnimation = new RotateAnimation(-180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mReverseFlipAnimation.setInterpolator(new LinearInterpolator());
        mReverseFlipAnimation.setDuration(250);
        mReverseFlipAnimation.setFillAfter(true);

        mInflater = (LayoutInflater) context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);

  mRefreshView = (RelativeLayout) mInflater.inflate(R.layout.pull_to_refresh_header, this, false);//(R.layout.pull_to_refresh_header, null);
    mRefreshViewText =
            (TextView) mRefreshView.findViewById(R.id.pull_to_refresh_text);
        mRefreshViewImage =
            (ImageView) mRefreshView.findViewById(R.id.pull_to_refresh_image);
        mRefreshViewProgress =
            (ProgressBar) mRefreshView.findViewById(R.id.pull_to_refresh_progress);
        mRefreshViewLastUpdated =
            (TextView) mRefreshView.findViewById(R.id.pull_to_refresh_updated_at);

        mRefreshViewImage.setMinimumHeight(50);
        mRefreshView.setOnClickListener(new OnClickRefreshListener());
        mRefreshOriginalTopPadding = mRefreshView.getPaddingTop();

        mRefreshState = TAP_TO_REFRESH;

        addHeaderView(mRefreshView);

        super.setOnScrollListener(this);

        measureView(mRefreshView);
        mRefreshViewHeight = mRefreshView.getMeasuredHeight();  //獲取頭文件的測量高度
    }

    @Override
    protected void onAttachedToWindow() {
        setSelection(1);
    }

    @Override
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);

        setSelection(1);
    }

    /**
     * Set the listener that will receive notifications every time the list
     * scrolls.
     *
     * @param l The scroll listener.
     */
    @Override
    public void setOnScrollListener(AbsListView.OnScrollListener l) {
        mOnScrollListener = l;
    }

    /**
     * Register a callback to be invoked when this list should be refreshed.
     *
     * @param onRefreshListener The callback to run.
     */
    public void setOnRefreshListener(OnRefreshListener onRefreshListener) {
        mOnRefreshListener = onRefreshListener;
    }

    /**
     * Set a text to represent when the list was last updated.
     * @param lastUpdated Last updated at.
     */
    public void setLastUpdated(CharSequence lastUpdated) {
        if (lastUpdated != null) {
            mRefreshViewLastUpdated.setVisibility(View.VISIBLE);
            mRefreshViewLastUpdated.setText(lastUpdated);
        } else {
            mRefreshViewLastUpdated.setVisibility(View.GONE);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
     //當前手指的Y值
        final int y = (int) event.getY();
       
        //Log.i(TAG, "觸屏的Y值"+y);
        mBounceHack = false;  //不反彈
       
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
             //將垂直滾動條設置爲可用狀態
                if (!isVerticalScrollBarEnabled()) {
                    setVerticalScrollBarEnabled(true);
                }
               
                //如果頭部刷新條出現,並且不是正在刷新狀態
                if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {
                    if ((mRefreshView.getBottom() >= mRefreshViewHeight
                            || mRefreshView.getTop() >= 0)
                            && mRefreshState == RELEASE_TO_REFRESH) {   //如果頭部視圖處於拉離頂部的情況
                        // Initiate the refresh
                        mRefreshState = REFRESHING;  //將標量設置爲,正在刷新
                        prepareForRefresh();  //準備刷新
                        onRefresh();   //刷新
                    } else if (mRefreshView.getBottom() < mRefreshViewHeight
                            || mRefreshView.getTop() <= 0) {
                        // Abort refresh and scroll down below the refresh view
                     // 停止刷新,並且滾動到頭部刷新視圖的下一個視圖
                        resetHeader();
                        setSelection(1);  //定位在第二個列表項
                    }
                }
                break;
            case MotionEvent.ACTION_DOWN:
                mLastMotionY = y;  //跟蹤手指的Y值
                break;
           
            case MotionEvent.ACTION_MOVE:
             //更行頭視圖的toppadding 屬性
                applyHeaderPadding(event);
                break;
        }
        return super.onTouchEvent(event);
    }

    /****
     * 不斷的頭部的top padding 屬性
     * @param ev
     */
    private void applyHeaderPadding(MotionEvent ev) {
        //獲取累積的動作數
        int pointerCount = ev.getHistorySize();
       // Log.i(TAG, "獲取累積的動作數"+pointerCount);
        for (int p = 0; p < pointerCount; p++) {
            if (mRefreshState == RELEASE_TO_REFRESH) {    //如果是釋放將要刷新狀態
                if (isVerticalFadingEdgeEnabled()) {  
                    setVerticalScrollBarEnabled(false);
                }
                //歷史累積的高度
                int historicalY = (int) ev.getHistoricalY(p);
                //Log.i(TAG, "單個動作getHistoricalY值:"+historicalY);
                // Calculate the padding to apply, we divide by 1.7 to
                // simulate a more resistant effect during pull.
                int topPadding = (int) (((historicalY - mLastMotionY)
                        - mRefreshViewHeight) / 1.7);
               
                mRefreshView.setPadding(
                        mRefreshView.getPaddingLeft(),
                        topPadding,
                        mRefreshView.getPaddingRight(),
                        mRefreshView.getPaddingBottom());
            }
        }
    }

    /**
     * Sets the header padding back to original size.
     * 使頭部視圖的 toppadding 恢復到初始值
     */
    private void resetHeaderPadding() {
        mRefreshView.setPadding(
                mRefreshView.getPaddingLeft(),
                mRefreshOriginalTopPadding,
                mRefreshView.getPaddingRight(),
                mRefreshView.getPaddingBottom());
    }

    /**
     * Resets the header to the original state. 
     *  初始化頭部視圖 狀態
     */
    private void resetHeader() {
        if (mRefreshState != TAP_TO_REFRESH) {
            mRefreshState = TAP_TO_REFRESH; //初始刷新狀態
            //使頭部視圖的 toppadding 恢復到初始值
            resetHeaderPadding();
            // Set refresh view text to the pull label
            //將文字初始化
            mRefreshViewText.setText(R.string.pull_to_refresh_tap_label);
            // Replace refresh drawable with arrow drawable
            //設置初始圖片
            mRefreshViewImage.setImageResource(REFRESHICON);
            // Clear the full rotation animation
            // 清除動畫
            mRefreshViewImage.clearAnimation();
            // Hide progress bar and arrow.
            //隱藏頭視圖
            mRefreshViewImage.setVisibility(View.GONE);
            //隱藏進度條
            mRefreshViewProgress.setVisibility(View.GONE);
        }
    }

   
    //測量視圖的高度
    private void measureView(View child) {
     //獲取頭部視圖屬性
        ViewGroup.LayoutParams p = child.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.FILL_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
       
        int childWidthSpec = ViewGroup.getChildMeasureSpec(0,
                0 + 0, p.width);
        int lpHeight = p.height;
        int childHeightSpec;
       
        //不懂MeasureSpec------------------------------------------------------------------------------------------
        if (lpHeight > 0) {  //如果視圖的高度大於0
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.EXACTLY);  
        } else {
            childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        }
        child.measure(childWidthSpec, childHeightSpec);
        //不懂MeasureSpec------------------------------------------------------------------------------------------
    }

    /****
     * 滑動事件
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        // When the refresh view is completely visible, change the text to say
        // "Release to refresh..." and flip the arrow drawable.
        if (mCurrentScrollState == SCROLL_STATE_TOUCH_SCROLL   //如果是接觸滾動狀態,並且不是正在刷新的狀態
                && mRefreshState != REFRESHING) {
            if (firstVisibleItem == 0) {    //如果顯示出來了第一個列表項
             //顯示刷新圖片
                mRefreshViewImage.setVisibility(View.VISIBLE);
                if ((mRefreshView.getBottom() >= mRefreshViewHeight + 20
                        || mRefreshView.getTop() >= 0)
                        && mRefreshState != RELEASE_TO_REFRESH) {  //如果下拉了listiview,則顯示上拉刷新動畫
                    mRefreshViewText.setText(R.string.pull_to_refresh_release_label);
                    mRefreshViewImage.clearAnimation();
                    mRefreshViewImage.startAnimation(mFlipAnimation);
                    mRefreshState = RELEASE_TO_REFRESH;
                   
                    Log.i(TAG, "現在處於下拉狀態");
                   
                } else if (mRefreshView.getBottom() < mRefreshViewHeight + 20
                        && mRefreshState != PULL_TO_REFRESH) {    //如果沒有到達,下拉刷新距離,則迴歸原來的狀態
                    mRefreshViewText.setText(R.string.pull_to_refresh_pull_label);
                    if (mRefreshState != TAP_TO_REFRESH) {
                        mRefreshViewImage.clearAnimation();
                        mRefreshViewImage.startAnimation(mReverseFlipAnimation);
                       
                        Log.i(TAG, "現在處於回彈狀態");
                       
                    }
                    mRefreshState = PULL_TO_REFRESH;
                }
            } else {  
                mRefreshViewImage.setVisibility(View.GONE);  //隱藏刷新圖片
                resetHeader();   //初始化,頭部
            }
        } else if (mCurrentScrollState == SCROLL_STATE_FLING  //如果是自己滾動狀態+ 第一個視圖已經顯示 + 不是刷新狀態
                && firstVisibleItem == 0
                && mRefreshState != REFRESHING) {
            setSelection(1);
            mBounceHack = true;   //狀態爲回彈
            Log.i(TAG, "現在處於自由滾動到頂部的狀態");
        } else if (mBounceHack && mCurrentScrollState == SCROLL_STATE_FLING) {
            setSelection(1);
            Log.i(TAG, "現在處於自由滾動到頂部的狀態");
        }

        if (mOnScrollListener != null) {
            mOnScrollListener.onScroll(view, firstVisibleItem,
                    visibleItemCount, totalItemCount);
        }
    }

   
    //滾動狀態改變
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        mCurrentScrollState = scrollState;

        if (mCurrentScrollState == SCROLL_STATE_IDLE) {   //如果滾動停頓
            mBounceHack = false;
        }

        if (mOnScrollListener != null) {
            mOnScrollListener.onScrollStateChanged(view, scrollState);
        }
    }

   
   
    //準備刷新
    public void prepareForRefresh() {
        resetHeaderPadding();   //初始化,頭部文件

        mRefreshViewImage.setVisibility(View.GONE);
        // We need this hack, otherwise it will keep the previous drawable.
        mRefreshViewImage.setImageDrawable(null);
        mRefreshViewProgress.setVisibility(View.VISIBLE);

        // Set refresh view text to the refreshing label
       mRefreshViewText.setText(R.string.pull_to_refresh_refreshing_label);

        mRefreshState = REFRESHING;
    }

    //刷新
    public void onRefresh() {
        Log.d(TAG, "執行刷新");

        if (mOnRefreshListener != null) {
            mOnRefreshListener.onRefresh();
        }
    }

    /**
     * 刷新完成 的回調函數
     * Resets the list to a normal state after a refresh.
     * @param lastUpdated Last updated at.
     */
    public void onRefreshComplete(CharSequence lastUpdated) {
        setLastUpdated(lastUpdated);
        onRefreshComplete();
    }

    /**
     *  刷新完成回調函數
     * Resets the list to a normal state after a refresh.
     */
    public void onRefreshComplete() {       
        Log.d(TAG, "onRefreshComplete");

        resetHeader();

        // If refresh view is visible when loading completes, scroll down to
        // the next item.
        if (mRefreshView.getBottom() > 0) {
            invalidateViews();  //重繪視圖
            setSelection(1);
        }
    }

    /**
     * Invoked when the refresh view is clicked on. This is mainly used when
     * there's only a few items in the list and it's not possible to drag the
     * list.
     */
    private class OnClickRefreshListener implements OnClickListener {

        @Override
        public void onClick(View v) {
            if (mRefreshState != REFRESHING) {
                //準備刷新
                prepareForRefresh(); 
                //刷新  
                onRefresh();
            }
        }

    }

    /**
     * 刷新方法接口
     */
    public interface OnRefreshListener {
       
        public void onRefresh();
    }


   

   

 

 

 

* 如果你還是沒有弄明白的話,那就點擊下面的鏈接,來下載整個demo項目:

 http://download.csdn.net/detail/zjl5211314/3775209

 

 

 

 

原作者:johannilsson 

選自:https://github.com/johannilsson/android-pulltorefresh 

 

 

 

 

發佈了35 篇原創文章 · 獲贊 21 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章