自定义ListView_下拉刷新上拉加载更多

自定义ListView实现下拉刷新和上拉自动加载

效果图：

下拉效果：

 

上拉效果：

 

实现原理：通过ListView的addFooter与addHeader方法，将下拉布局与上拉布局添加到ListView中，再通过设置padding属性，隐藏头部和脚部

　　　　　监听onTouchEvent事件，根据手势滑动距离，动态更改下拉布局的padding,并动态更改头布局内控件效果

　　　　　监听onScrollStateChanged，动态显示隐藏脚布局

              设置回调，提供下拉刷新与加载更多的方法

Demo：http://files.cnblogs.com/files/liujingg/PullRefreshDemo.rar

PullListView.java

import java.text.SimpleDateFormat;

import java.util.Date;



import android.content.Context;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.RotateAnimation;

import android.widget.AbsListView;

import android.widget.AbsListView.OnScrollListener;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.ListView;

import android.widget.ProgressBar;

import android.widget.TextView;



/**

 * 自定义ListView，下拉刷新、上拉自动加载更多

 * @author liujing

 * @version 1.0

 */

public class PullListView extends ListView implements OnScrollListener {



    private final int PULL_DOWN_REFRESH = 0;//下拉状态

    private final int RELEASE_REFRESH = 1;//松开状态

    private final int REFRESHING = 2;//刷新中状态

    private int currentState = PULL_DOWN_REFRESH;

    private int mListViewOnScreenY = -1;

    private int downY = -1;

    

    private boolean isLoadingMore = false;

    private boolean isEnabledPullDownRefresh = false;

    private boolean isEnabledLoadMore = false;

    private OnPullDownRefresh mOnPullDownRefresh;

    

    //头布局、脚布局及高度

    private View mFootView;

    private LinearLayout mHeaderView;

    private int mFooterViewHeight;

    private int mPullDownHeaderViewHeight;

    

    //mHeaderView中组件及动画

    private View mCustomHeaderView;//用户自定义头布局

    private View mPullDownHeader;//下拉刷新头布局

    private RotateAnimation upAnimation,downAnimation;

    private ImageView ivArrow;

    private ProgressBar mProgressBar;

    private TextView tv_statue,tv_time;

    



    public PullListView(Context context) {

        this(context, null);

    }



    public PullListView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }



    public PullListView(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);

        initPullDownHeaderView();

        initLoadMoreFooterView();

    }

    

    private void initLoadMoreFooterView() {

        //加载更多的布局文件

        mFootView = View.inflate(getContext(), R.layout.pull_listview_footer,

                null);

        mFootView.measure(0, 0);//测量

        mFooterViewHeight = mFootView.getMeasuredHeight();

        //隐藏脚布局

        mFootView.setPadding(0,-mFooterViewHeight,0,0);

        addFooterView(mFootView);

        setOnScrollListener(this);

    }



    private void initPullDownHeaderView() {

        //下拉刷新的布局文件

        mHeaderView = (LinearLayout) View.inflate(getContext(),

                R.layout.pull_listview_header, null);

        mPullDownHeader = mHeaderView

                .findViewById(R.id.ll_refresh_pull_down_header);

        ivArrow = (ImageView) mHeaderView

                .findViewById(R.id.iv_refresh_header_arrow);

        mProgressBar = (ProgressBar) mHeaderView

                .findViewById(R.id.pb_refresh_header);

        tv_statue = (TextView) mHeaderView

                .findViewById(R.id.tv_refresh_header_status);

        tv_time = (TextView) mHeaderView

                .findViewById(R.id.tv_refresh_header_time);

        mPullDownHeader.measure(0, 0);//测量

        mPullDownHeaderViewHeight = mPullDownHeader.getMeasuredHeight();

        //隐藏头布局

        mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0);

        addHeaderView(mHeaderView);

        initAnimation();

    }

    

    /**

     * 添加额外的头布局，比如轮播图

     * @param v 自定义头布局

     */

    public void addListViewCustomHeaderView(View v) {

        mCustomHeaderView = v;

        mHeaderView.addView(mCustomHeaderView);

    }



    @Override

    public boolean onTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {

        case MotionEvent.ACTION_DOWN:

            downY = (int) ev.getY();

            break;

        case MotionEvent.ACTION_MOVE:

            if (downY == -1)

                downY = (int) ev.getY();

            //是否启用下拉刷新

            if (!isEnabledPullDownRefresh)

                break;

            if (currentState == REFRESHING)

                break;

            //解决用户添加header与下拉刷新header的冲突

            if (mCustomHeaderView != null) {

                int[] location = new int[2];

                if (mListViewOnScreenY == -1) {

                    this.getLocationOnScreen(location);

                    mListViewOnScreenY = location[1];

                }

                mCustomHeaderView.getLocationOnScreen(location);

                if (location[1] < mListViewOnScreenY) {

                    break;

                }

            }



            int moveY = (int) ev.getY();

            int diffY = (moveY - downY)/2;

            if (diffY > 0 && getFirstVisiblePosition() == 0) {

                int paddingTop = -mPullDownHeaderViewHeight + diffY;

                if (paddingTop < 0 && currentState != PULL_DOWN_REFRESH) {

                    //当前没有完全显示且当前状态为松开刷新，进入下拉刷新

                    currentState = PULL_DOWN_REFRESH;

                    refreshPullDownState();

                } else if (paddingTop > 0 && currentState != RELEASE_REFRESH) {

                    //当前完全显示且当前状态为下拉刷新，进入松开刷新

                    currentState = RELEASE_REFRESH;

                    refreshPullDownState();

                }

                mPullDownHeader.setPadding(0, paddingTop, 0, 0);

                return true;

            }else if(diffY < 0 && getLastVisiblePosition() == getCount()-1){

                //脚布局可向上滑动

                mFootView.setPadding(0,0,0,0);

            }

            break;

        case MotionEvent.ACTION_UP:

            downY = -1;

            if (currentState == PULL_DOWN_REFRESH) {

                //隐藏header

                mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0);

            } else if (currentState == RELEASE_REFRESH) {

                currentState = REFRESHING;

                refreshPullDownState();

                mPullDownHeader.setPadding(0, 0, 0, 0);

                //回调刷新方法

                if (mOnPullDownRefresh != null) {

                    mOnPullDownRefresh.onPullDownRefresh();

                }

            }

            break;

        }

        return super.onTouchEvent(ev);

    }

    

    /**

     * 隐藏头布局或脚布局并重置控件

     */

    public void OnRefreshDataFinish() {

        if (isLoadingMore) {

            isLoadingMore = false;

            mFootView.setPadding(0,-mFooterViewHeight,0,0);

        } else {

            ivArrow.setVisibility(View.VISIBLE);

            mProgressBar.setVisibility(View.INVISIBLE);

            tv_statue.setText("下拉刷新");

            tv_time.setText("最后刷新时间：" + getCurrentTime());

            mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0);

            currentState = PULL_DOWN_REFRESH;



        }

    }



    private String getCurrentTime() {

        SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss");

        return format.format(new Date());

    }



    private void refreshPullDownState() {

        switch (currentState) {

        case PULL_DOWN_REFRESH:

            ivArrow.startAnimation(downAnimation);

            tv_statue.setText("下拉刷新");

            break;

        case RELEASE_REFRESH:

            ivArrow.startAnimation(upAnimation);

            tv_statue.setText("松开刷新");

            break;

        case REFRESHING:

            ivArrow.clearAnimation();

            ivArrow.setVisibility(View.INVISIBLE);

            mProgressBar.setVisibility(View.VISIBLE);

            tv_statue.setText("正在刷新");

            break;

        default:

            break;

        }

    }

    

    /**

     * 箭头旋转动画

     */

    private void initAnimation() {

        upAnimation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,

                0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

        upAnimation.setDuration(200);

        upAnimation.setFillAfter(true);



        downAnimation = new RotateAnimation(-180, -360,

                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,

                0.5f);

        downAnimation.setDuration(200);

        downAnimation.setFillAfter(true);

    }

    

    /**

     * 回调方法，用于刷新数据及加载更多

     * @param listener

     */

    public void setOnPullDownRefresh(OnPullDownRefresh listener) {

        this.mOnPullDownRefresh = listener;

    }



    public interface OnPullDownRefresh {

        public void onPullDownRefresh();

        public void onLoadingMore();

    }



    @Override

    public void onScrollStateChanged(AbsListView view, int scrollState) {

        if (!isEnabledLoadMore) {

            return;

        }

        //listView停止状态或惯性滑动状态

        if (scrollState == SCROLL_STATE_IDLE

                || scrollState == SCROLL_STATE_FLING) {

            //listView已到达最底部

            if ((getLastVisiblePosition() == getCount() - 1) && !isLoadingMore) {

                isLoadingMore = true;

                //展示脚布局

                //mFootView.setPadding(0, 0, 0, 0);

                setSelection(getCount());

                if (mOnPullDownRefresh != null) {

                    mOnPullDownRefresh.onLoadingMore();

                }

            }

        }

    }



    @Override

    public void onScroll(AbsListView view, int firstVisibleItem,

            int visibleItemCount, int totalItemCount) {

        

    }

    

    /**

     * 是否启用下拉刷新

     * @param isEnable

     */

    public void setEnabledPullDownRefresh(boolean isEnable) {

        isEnabledPullDownRefresh = isEnable;

    }

    

    /**

     * 是否启用加载更多

     * @param isEnable

     */

    public void setEnabledLoadMore(boolean isEnable) {

        isEnabledLoadMore = isEnable;

    }

}

 

 pull_listview_header.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical" >



    <LinearLayout

        android:id="@+id/ll_refresh_pull_down_header"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >



        <FrameLayout

            android:layout_width="40dp"

            android:layout_height="40dp"

            android:layout_marginBottom="3dp"

            android:layout_marginLeft="28dp"

            android:layout_marginTop="8dp" >



            <ImageView

                android:id="@+id/iv_refresh_header_arrow"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:src="@drawable/common_listview_headview_red_arrow" />



            <ProgressBar

                android:id="@+id/pb_refresh_header"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:indeterminateDrawable="@drawable/custom_progressbar"

                android:visibility="invisible" />

        </FrameLayout>



        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:layout_weight="1"

            android:gravity="center_horizontal"

            android:orientation="vertical" >



            <TextView

                android:id="@+id/tv_refresh_header_status"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="下拉刷新"

                android:textColor="#ff0000"

                android:textSize="16sp"

                android:textStyle="bold" >

            </TextView>



            <TextView

                android:id="@+id/tv_refresh_header_time"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_marginTop="5dp"

                android:text="最后刷新时间：09:23:23"

                android:textColor="@android:color/darker_gray"

                android:textSize="12sp" >

            </TextView>

        </LinearLayout>

        <TextView 

            android:layout_width="40dp"

            android:layout_marginRight="28dp"

            android:layout_height="wrap_content"

            />

    </LinearLayout>



</LinearLayout>

pull_listview_footer.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:gravity="center"

    android:orientation="horizontal" >



    <ProgressBar

        android:layout_width="40dp"

        android:layout_height="40dp"

        android:layout_margin="2dp"

        android:indeterminateDrawable="@drawable/custom_progressbar" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:padding="5dp"

        android:text="加载更多..."

        android:textColor="#ff0000"

        android:textSize="18sp" />



</LinearLayout>

custom_progressbar.xml

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="360" >



    <shape

        android:innerRadiusRatio="4"

        android:shape="ring"

        android:thicknessRatio="10"

        android:useLevel="false" >

        <gradient

            android:centerColor="#ff6666"

            android:endColor="#ff0000"

            android:startColor="#ffffff"

            android:type="sweep" />

    </shape>



</rotate>