使用Ultra-Pull-To-Refresh實現上拉加載和下拉刷新

分享自：http://blog.csdn.net/lisdye2/article/details/51449716

Ultra-Pull-To-Refresh是一個功能非常強大的類庫，通過他，我們可以實現非常豐富的下拉刷新視圖，並且他支持幾乎所有的控件的下拉刷新（不僅僅是ListView），但該視圖不支持上拉加載，作者可能在考慮此庫設計時的想法與Google官方的SwipeRefreshLayout的理念符合。即刷新可能是許多控件都需要，而上拉加載只有列表視圖需要。

那么我們就開始嘗試使用他吧。

Android Studio 導入Ultra

• 在工程的build.gradle中，加上如下代碼

• allprojects {
      repositories {
          jcenter()
          mavenCentral();
          maven {
              url 'https://oss.sonatype.org/content/repositories/snapshots'
          }
      }
  }

• 添加依賴包

        compile 'in.srain.cube:ultra-ptr:1.0.11' 

• Clean一下工程即可

Eclipse 導入 Ultra

因為作者提供的只有AndroidStudio版本，所以，我把它代碼導出到了一個Eclipse工程中，直接添加依賴即可。

Ultra-Pull-To-Refresh Eclipse 版本下載地址

簡單使用

添加xml文件：activity_listview_ultra_refresh

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <in.srain.cube.views.ptr.PtrClassicFrameLayout
        android:id="@+id/ultra_ptr_frame"
        xmlns:cube_ptr="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <FrameLayout
            android:id="@+id/ultra_refresh_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f00"
            android:paddingTop="100dp">
        </FrameLayout>
    </in.srain.cube.views.ptr.PtrClassicFrameLayout>


</LinearLayout> 

添加了一個PtrClassicFrameLayout包含了一個FrameLayout.

看一下Java代碼

public class UltraRefreshActivity extends Activity {


    private PtrClassicFrameLayout ptrFrame;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_listview_ultra_refresh);

        ptrFrame = ((PtrClassicFrameLayout) findViewById(R.id.ultra_ptr_frame));

        ptrFrame.setLastUpdateTimeRelateObject(this);

        //下拉刷新的阻力，下拉時，下拉距離和顯示頭部的距離比例，值越大，則越不容易滑動
        ptrFrame.setRatioOfHeaderHeightToRefresh(1.2f);

        ptrFrame.setDurationToClose(200);//返回到刷新的位置（暫未找到）

        ptrFrame.setDurationToCloseHeader(1000);//關閉頭部的時間 // default is false

        ptrFrame.setPullToRefresh(false);//當下拉到一定距離時，自動刷新（true），顯示釋放以刷新（false）

        ptrFrame.setKeepHeaderWhenRefresh(true);//見名只意

        ptrFrame.setPtrHandler(new PtrHandler() {
            @Override
            public boolean checkCanDoRefresh(PtrFrameLayout frame,
                                             View content, View header) {
                return PtrDefaultHandler.checkContentCanBePulledDown(frame,
                        content, header);
            }

            @Override
            public void onRefreshBegin(PtrFrameLayout frame) {

                //數據刷新的回調

                ptrFrame.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        ptrFrame.refreshComplete();
                    }
                }, 1500);
            }
        });
    }
}

看一下效果

通過實現過程，我們可以發現，其下拉刷新和其包含的控件沒有之間聯系：也就是說我們可以在PtrClassicFrameLayout包含任何子控件。

他可以設置的一些常量，代碼注釋中都有體現。而他有兩個關鍵性的方法：

• ptrFrame.setPtrHandler(new PtrHandler()):數據刷新的接口回調。包含兩個回調方法

1. checkCanDoRefresh：是否能夠刷新。
2. onRefreshBegin：開始刷新的回調。

• ptrFrame.addPtrUIHandler(new PtrUIHandler())：UI更新接口的回調。其中PtrUIHandler為一個接口，其定義如下

• public interface PtrUIHandler {
  
      /**
       * When the content view has reached top and refresh has been completed, view will be reset.
       *
       * @param frame
       */
      public void onUIReset(PtrFrameLayout frame);
  
      /**
       * prepare for loading
       *
       * @param frame
       */
      public void onUIRefreshPrepare(PtrFrameLayout frame);
  
      /**
       * perform refreshing UI
       */
      public void onUIRefreshBegin(PtrFrameLayout frame);
  
      /**
       * perform UI after refresh
       */
      public void onUIRefreshComplete(PtrFrameLayout frame);
  
      public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator);
  }

   含義如下：

• onUIRefreshPrepare：開始下拉之前的接口回調。
• onUIRefreshBegin：開始刷新的接口回調。
• onUIRefreshComplete:刷新完成的接口回調。
• onUIReset：刷新完成之后，UI消失之后的接口回調。
• onUIPositionChange：下拉滑動的接口回調，多次調用。 
  
  • isUnderTouch ：手指是否觸摸
  • status：狀態值
  • ptrIndicator：滑動偏移量等值的封裝

那么對於onUIPositionChange中，都是返回了那些值呢，我寫了一個自定義的HeadView，並設置高位100，同時打印相應的Log。在這只貼onUIPositionChange中的Log代碼。

@Override
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
        int headerHeight = ptrIndicator.getHeaderHeight();//頭部的高度
        int lastPosY = ptrIndicator.getLastPosY();//上一次滑動的Y偏移值
        int offsetToRefresh = ptrIndicator.getOffsetToRefresh();//刷新需要滑動的偏移量
        float offsetY = ptrIndicator.getOffsetY();//當前與上一次滑動處理的偏移值
        int currentPosY = ptrIndicator.getCurrentPosY();//當前系統偏移值


        Log.i("info","isUnderTouch"+isUnderTouch+"headHeight: "+headerHeight+" lastPosY "+lastPosY+" offsetToRefresh "+offsetToRefresh+" offsetY "+offsetY+" currentPosY "+currentPosY);
    }

 

看一下打印信息

onUIRefreshPrepare
isUnderTouchtrueheadHeight: 100 lastPosY 0 offsetToRefresh 120 offsetY 23.025852 currentPosY 23
............................................................
isUnderTouchtrueheadHeight: 100 lastPosY 299 offsetToRefresh 120 offsetY 2.1575928 currentPosY 301
onUIRefreshBegin
isUnderTouchfalseheadHeight: 100 lastPosY 301 offsetToRefresh 120 offsetY 2.1575928 currentPosY 278
............................................................
isUnderTouchfalseheadHeight: 100 lastPosY 101 offsetToRefresh 120 offsetY 2.1575928 currentPosY 100
onUIRefreshComplete
isUnderTouchfalseheadHeight: 100 lastPosY 100 offsetToRefresh 120 offsetY 2.1575928 currentPosY 96
............................................................
isUnderTouchtrueheadHeight: 100 lastPosY 239 offsetToRefresh 120 offsetY 1.324391 currentPosY 240
onUIRefreshComplete
isUnderTouchfalseheadHeight: 100 lastPosY 240 offsetToRefresh 120 offsetY 1.324391 currentPosY 223
............................................................
isUnderTouchfalseheadHeight: 100 lastPosY 2 offsetToRefresh 120 offsetY 1.324391 currentPosY 1
onUIReset
isUnderTouchfalseheadHeight: 100 lastPosY 1 offsetToRefresh 120 offsetY 1.324391 currentPosY 0

 

Ultra自定義刷新

看一下我們將要實現的效果：

自定義頭部的代碼實現

public class CustomUltraRefreshHeader extends RelativeLayout implements PtrUIHandler {

    CircleView mCircleView;

    TextView mDescText;

    private ObjectAnimator anim;

    public CustomUltraRefreshHeader(Context context) {
        this(context,null);
    }

    public CustomUltraRefreshHeader(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomUltraRefreshHeader(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec,100);
    }

    /**
     * 初始化布局
     */
    private void initView() {

        int circlewidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 30, getResources().getDisplayMetrics());

        mCircleView = new CircleView(getContext());

        LinearLayout.LayoutParams circleParams = new LinearLayout.LayoutParams(circlewidth,circlewidth);

        mCircleView.setLayoutParams(circleParams);

        mDescText = new TextView(getContext());

        LinearLayout.LayoutParams descParams = new LinearLayout.LayoutParams(circlewidth*3, ViewGroup.LayoutParams.WRAP_CONTENT);

        descParams.gravity = Gravity.CENTER;
        descParams.setMargins(circlewidth/2,0,0,0);
        mDescText.setLayoutParams(descParams);
        mDescText.setTextSize(12);
        mDescText.setTextColor(Color.GRAY);
        mDescText.setText("下拉刷新");

        //添加線性的父布局
        LinearLayout ll = new LinearLayout(getContext());
        RelativeLayout.LayoutParams llParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        llParams.addRule(CENTER_IN_PARENT);
        ll.setLayoutParams(llParams);
        ll.setPadding(10,10,10,10);

        ll.addView(mCircleView);
        ll.addView(mDescText);

        addView(ll);
    }

    @Override
    public void onUIReset(PtrFrameLayout frame) {
        //重置時，將動畫置為初始狀態
        mCircleView.setRotation(0f);
        Log.i("info","onUIReset");
    }

    @Override
    public void onUIRefreshPrepare(PtrFrameLayout frame) {
        mDescText.setText("下拉加載數據");
        Log.i("info","onUIRefreshPrepare");
    }

    @Override
    public void onUIRefreshBegin(PtrFrameLayout frame) {

        //開始刷新，啟動動畫
        anim = ObjectAnimator.ofFloat(mCircleView, "rotation", mCircleView.getRotation(), mCircleView.getRotation()+360f)
                .setDuration(500);
        anim.setRepeatCount(ValueAnimator.INFINITE);
        anim.setRepeatMode(ValueAnimator.RESTART);
        anim.start();

        mDescText.setText("正在加載數據");
        Log.i("info","onUIRefreshBegin");
    }

    @Override
    public void onUIRefreshComplete(PtrFrameLayout frame) {
        anim.cancel();
        mDescText.setText("加載完成");
        Log.i("info","onUIRefreshComplete");
    }

    @Override
    public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
        int headerHeight = ptrIndicator.getHeaderHeight();//頭部的高度
        int lastPosY = ptrIndicator.getLastPosY();//上一次滑動的Y偏移值
        int offsetToRefresh = ptrIndicator.getOffsetToRefresh();//舒心需要滑動的偏移量
        float offsetY = ptrIndicator.getOffsetY();//當前與上一次滑動處理的偏移值
        int currentPosY = ptrIndicator.getCurrentPosY();//當前系統偏移值

        if (isUnderTouch&&status== PtrFrameLayout.PTR_STATUS_PREPARE) {

            mCircleView.setRotation(currentPosY);
            if(currentPosY<offsetToRefresh&&lastPosY >= offsetToRefresh){
                //表示不刷新了
                mDescText.setText("下拉加載數據");
            }else if(currentPosY>offsetToRefresh&&lastPosY<=offsetToRefresh){
                mDescText.setText("松開加載更多");
            }
        }

       /* if (currentPos < mOffsetToRefresh && lastPos >= mOffsetToRefresh) {
            if (isUnderTouch && status == PtrFrameLayout.PTR_STATUS_PREPARE) {*//*
        Log.i("info","isUnderTouch"+isUnderTouch+"headHeight: "+headerHeight+" lastPosY "+lastPosY+" offsetToRefresh "+offsetToRefresh+" offsetY "+offsetY+" currentPosY "+currentPosY);*/
    }
}

 

在這里我們實現了PtrUIHandler接口，用於下拉刷新時的接口會調，有兩點說明：

• 使用的CircleView為自定義控件，就是圖中的轉盤，在我以前的博客中有相應的實現。RecyclerView 下拉刷新和上拉加載

• 在動態改變現實視圖時，需要注意的便是onUIPositionChange，我們只有在手指觸摸且status為PtrFrameLayout.PTR_STATUS_PREPARE才修改我們的屬性，其他時候不能修改。因為該方法會一直回調。

封裝自定義的UltraRefreshListView繼承ListView，並實現了PtrHandler接口，用以數據更新回調。

public class UltraRefreshListView extends ListView implements PtrHandler,AbsListView.OnScrollListener {

    private UltraRefreshListener mUltraRefreshListener;

    /**
     * 根布局
     */
    private View footView;


    /**
     * 是否正在加載數據
     */
    private boolean isLoadData = false;

    /**
     * 是否是下拉刷新，主要在處理結果時使用
     */
    private boolean isRefresh = false;

    public UltraRefreshListView(Context context) {
        this(context,null);
    }

    public UltraRefreshListView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public UltraRefreshListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化布局，及添加一個跟布局
        initView();
    }

    private void initView() {
        footView = LayoutInflater.from(getContext()).inflate(R.layout.foot_ultra_refresh_listview, null);

        setOnScrollListener(this);
    }



    @Override
    public void onRefreshBegin(PtrFrameLayout frame) {

        isLoadData  =true;
        isRefresh =true;
        //下拉刷新的回調
        if(mUltraRefreshListener!=null){

            mUltraRefreshListener.onRefresh();
        }
    }


    @Override
    public boolean checkCanDoRefresh(PtrFrameLayout frame, View content, View header) {
        //  PtrHandler 的接口回調，是否能夠加載數據的判斷
        return !isLoadData&&checkContentCanBePulledDown(frame, content, header);
    }

    // 從PtrHandler的默認實現類 PtrDefaultHandler中找到的，用以判斷是否可以下拉刷新
    public static boolean checkContentCanBePulledDown(PtrFrameLayout frame, View content, View header) {
        return !canChildScrollUp(content);

    }

    // 從PtrHandler的默認實現類 PtrDefaultHandler中找到的，用以判斷是否可以下拉刷新
    public static boolean canChildScrollUp(View view) {
        if (android.os.Build.VERSION.SDK_INT < 14) {
            if (view instanceof AbsListView) {
                final AbsListView absListView = (AbsListView) view;
                return absListView.getChildCount() > 0
                        && (absListView.getFirstVisiblePosition() > 0 || absListView.getChildAt(0)
                        .getTop() < absListView.getPaddingTop());
            } else {
                return view.getScrollY() > 0;
            }
        } else {
            return view.canScrollVertically(-1);
        }
    }


    /**
     * 設置ListView的監聽回調
     */
    public void setUltraRefreshListener(UltraRefreshListener mUltraRefreshListener) {
        this.mUltraRefreshListener = mUltraRefreshListener;
    }

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

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        /*Log.i("info","isLoadData:"+isLoadData+" totalItemCount "+totalItemCount+" firstVisibleItem "+
                firstVisibleItem+" visibleItemCount "+ visibleItemCount);
*/
        //加載更多的判斷
        if(totalItemCount>1&&!isLoadData&&totalItemCount==firstVisibleItem+visibleItemCount){
            isRefresh =false;
            isLoadData = true;
            addFooterView(footView);
            mUltraRefreshListener.addMore();
        }
}



    //刷新完成的后調用此方法還原布局
    public void refreshComplete(){
        isLoadData = false;
        if(isRefresh){
            //獲取其父控件，刷新
            ViewParent parent = getParent();
            if(parent instanceof PtrClassicFrameLayout){
                ((PtrClassicFrameLayout) parent).refreshComplete();
            }
        }else{
            removeFooterView(footView);
        }
    }
}

 

其中有以下幾個關鍵點需要注意：

• isRefresh：標清當前是正在下拉刷新還是在正在加載更多，這樣就不用其調用者在使用refreshComplete()時，傳入相應參數。
• checkCanDoRefresh()方法中，在判斷是否可以刷新時，加入了!isLoadData，該目的是，當正在加載更多時，不允許下拉刷新。
• checkContentCanBePulledDown()和canChildScrollUp()方法的實現，是從其源碼PtrDefaultHandler中找到的，作者已經給出了比較靠譜的實現方式。

該方法，將下拉刷新和上拉加載整合到了一起，定義一個共同的接口以便進行相應操作的回調

/**
 * 數據接口的回調
 * Created by Alex_MaHao on 2016/5/18.
 */
public interface UltraRefreshListener {

    //下拉刷新
    void onRefresh();

    //上拉加載
    void addMore();
}

 

最后我們看一下如何使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <in.srain.cube.views.ptr.PtrClassicFrameLayout
        android:id="@+id/ultra_ptr"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.mahao.alex.systemwidgetdemo.listView.ultra_refresh.UltraRefreshListView
            android:id="@+id/ultra_lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </in.srain.cube.views.ptr.PtrClassicFrameLayout>

</LinearLayout>

 

/**
 * Created by Alex_MaHao on 2016/5/18.
 */
public class UltraRefreshListActivity extends AppCompatActivity implements UltraRefreshListener {

    private PtrClassicFrameLayout mPtrFrame;

    private List<String> datas = new ArrayList<>();

    private SimpleBaseAdapter mAdapter;

    private UltraRefreshListView mLv;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_listview_ultra);

        //查找控件
        mPtrFrame = ((PtrClassicFrameLayout) findViewById(R.id.ultra_ptr));

        mLv = ((UltraRefreshListView) findViewById(R.id.ultra_lv));

        //創建我們的自定義頭部視圖
        CustomUltraRefreshHeader header = new CustomUltraRefreshHeader(this);

        //設置頭部視圖
        mPtrFrame.setHeaderView(header);

        //設置視圖修改的回調，因為我們的CustomUltraRefreshHeader實現了PtrUIHandler
        mPtrFrame.addPtrUIHandler(header);

        //設置數據刷新的會回調，因為UltraRefreshListView實現了PtrHandler
        mPtrFrame.setPtrHandler(mLv);

        mAdapter = new SimpleBaseAdapter(datas);

        mLv.setAdapter(mAdapter);

        //設置數據刷新回調接口
        mLv.setUltraRefreshListener(this);
    }

    @Override
    public void onRefresh() {
        mPtrFrame.postDelayed(new Runnable() {
            @Override
            public void run() {
                datas.clear();
                for(int i = 0;i<20;i++){
                    datas.add("添加了數據~~"+i);
                }
                //刷新完成
                mLv.refreshComplete();
                mAdapter.notifyDataSetChanged();
            }
        },1000);

    }

    @Override
    public void addMore() {
        mPtrFrame.postDelayed(new Runnable() {
            @Override
            public void run() {

                int count = mAdapter.getCount();
                for(int i = count; i< count +10; i++){
                    datas.add("添加了數據~~"+i);
                }
                mAdapter.notifyDataSetChanged();
                //刷新完成
                mLv.refreshComplete();
            }
        },1000);

    }
}

 

OK,注釋你要看不懂，那我也很糾結該怎么辦。

該控件非常好用，推薦。