Android 自定义ListView 实现下拉刷新 上拉加载功能

最新推荐文章于 2024-04-24 14:46:15 发布
最新推荐文章于 2024-04-24 14:46:15 发布
阅读量829 收藏 1
点赞数
分类专栏： 自定义控件 文章标签： android 自定义控件 listview 下拉刷新 上拉加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_20645961/article/details/46410107
版权

效果图

这里写图片描述

思考

  • Listview是viewGroup的子类，它本身提供了方法addHeaderView（View view），addFooterView（View view）去添加头布局和底布局，所以我们只要监听它的onTouchEvent方法，判断头布局 底布局的显示状态。

  • 头布局（headerView）

    1. 默认的话，得隐藏。先获取到头布局的高度int headerViewHeight = headerView.getMeasuredHeight();通过设置它的padding(0, -headerViewHeight, 0, 0); 这里要注意：获取头布局高度之前，需要等头布局完全加载上来后，才获取得到，否则为0。可以通过measure()方法主动通知系统去测量该view，也可以通过获取视图树的观察者去增加一个全局的布局监听器。

    2. 重写onTouchEvent(MotionEvent event);
      手指按下时 获取该view的Y方向的坐标downY。
      手指移动时
      获取移动的Y方向的距离deltY = (int) (event.getY() - downY);
      将移动的距离deltY+(-headerViewHeight)就是头布局的位置paddingTop。
      当然这个paddingTop需要限制，比如你上滑时，如果已经到了-headerViewHeight，就不要继续将头布局往上设置了；而且下拉时，如果不是第一个条目，就用listview本身的滑动事件，限制代码：paddingTop > -headerViewHeight && getFirstVisiblePosition() == 0
      在此条件下，继续判断：如果paddingTop>0 && currentState==下拉刷新状态，就将currentState设置为松开立即刷新状态并更新头布局内容；如果paddingTop<0 && currentState==松开立即刷新状态，就将currentState设置为下拉刷新状态并更新头布局内容。
      手指抬起时
      如果是下拉刷新状态，则隐藏头布局
      如果是松开立即刷新状态，则显示头布局，将当前状态设置为正在刷新状态并更新头布局内容。同时在这里设置暴露一个接口方法，让用户在该方法中去加载要刷新出来的数据。

    3. 类中还应该提供刷新完成重置headerView的方法，由用户在获取完数据并更新完adapter之后，去在UI线程中调用该方法。

  • 底布局（footerView）
    1. 默认隐藏。方法同头布局一样
    2. 在初始化的时候，为listview设置一个滑动监听。当滑动状态为OnScrollListener.SCROLL_STATE_IDLE （即手指松开） && 是滑动listview最后一个条目 && 不是加载更多，这时，将footerView显示出来，同时在这里设置暴露一个接口方法，让用户在该方法中去加载更多要加载出来的数据。
    3. 提供加载完成重置footerView的方法

步骤

1.headerView布局

<?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">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp">

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/indicator_arrow" />

        <ProgressBar
            android:id="@+id/pb_load"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerInParent="true"
            android:indeterminateDuration="1000"
            android:indeterminateDrawable="@drawable/indeterminate_drawable"
            android:visibility="invisible" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="下拉刷新"
            android:textColor="#a000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="最后更新：2015-06-06"
            android:textColor="@android:color/darker_gray"
            android:textSize="14sp" />
    </LinearLayout>


</LinearLayout>

2.footerView布局

<?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="30dp"
        android:layout_height="30dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:indeterminateDrawable="@drawable/indeterminate_drawable"
        android:indeterminateDuration="1000" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="加载更多..."
        android:textSize="16sp" />

</LinearLayout>

3.自定义listview的代码

public class RefreshListView extends ListView implements AbsListView.OnScrollListener {

    private static final String TAG = "RefreshListView1";
    private View headerView;//头布局
    private ImageView iv_arrow;
    private ProgressBar pb_load;
    private TextView tv_state;
    private TextView tv_time;
    private View footerView;//底布局

    private int headerViewHeight;//头布局的高度
    private int downY;//手指按下时Y的坐标
    private static final int PULL_TO_REFRESH = 0;  //下拉刷新
    private static final int RELEASE_REFRESH = 1;   //松开以刷新
    private static final int REFRESHING = 2;//正在刷新
    private int currentState = PULL_TO_REFRESH;
    private RotateAnimation upAnimation;
    private RotateAnimation downAnimation;
    private int footerViewHeight;//底布局的高度
    private boolean isLoadingMore = false;//当前是否正在处于加载更多

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

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

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

    private void init() {
        setOnScrollListener(this);
        initHeaderView();
        initRotateAnimation();
        initFooterView();
    }

    /**
     * 初始化头布局
     */
    private void initHeaderView() {
        headerView = View.inflate(getContext(), R.layout.layout_header, null);
        iv_arrow = (ImageView) headerView.findViewById(R.id.iv_arrow);
        pb_load = (ProgressBar) headerView.findViewById(R.id.pb_load);
        tv_state = (TextView) headerView.findViewById(R.id.tv_state);
        tv_time = (TextView) headerView.findViewById(R.id.tv_time);
//        第一种方法获取头布局的高度
//        final ViewTreeObserver viewTreeObserver = headerView.getViewTreeObserver();
//        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
//            @Override
//            public void onGlobalLayout() {
//                viewTreeObserver.removeOnGlobalLayoutListener(this);
//                int headerViewHeight = headerView.getHeight();
//                Log.i(TAG, "headerViewHeight:" + headerViewHeight);
//                headerView.setPadding(0, -headerViewHeight, 0, 0);
//                addHeaderView(headerView);
//            }
//        });
        //第二种方法获取头布局的高度
        headerView.measure(0, 0);//主动通知系统去测量该view;
        headerViewHeight = headerView.getMeasuredHeight();
        Log.i(TAG, "headerViewHeight:" + headerViewHeight);
        headerView.setPadding(0, -headerViewHeight, 0, 0);
        addHeaderView(headerView);
    }

    /**
     * 初始化旋转动画
     */
    private void initRotateAnimation() {
        upAnimation = new RotateAnimation(0, -180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        upAnimation.setDuration(300);
        upAnimation.setFillAfter(true);
        downAnimation = new RotateAnimation(-180, -360,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        downAnimation.setDuration(300);
        downAnimation.setFillAfter(true);
    }

    private void initFooterView() {
        footerView = View.inflate(getContext(), R.layout.layout_footer, null);
        footerView.measure(0, 0);
        footerViewHeight = footerView.getMeasuredHeight();
        footerView.setPadding(0, -footerViewHeight, 0, 0);
        addFooterView(footerView);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (currentState == REFRESHING) {
                    break;
                }
                int deltY = (int) (event.getY() - downY);
                int paddingTop = -headerViewHeight + deltY;
                if (paddingTop > -headerViewHeight && getFirstVisiblePosition() == 0) {//下拉的状态 并且 listview第一个条目可见
                    Log.i(TAG, "paddingTop:" + paddingTop);
                    headerView.setPadding(0, paddingTop, 0, 0);
                    if (paddingTop > 0 && currentState == PULL_TO_REFRESH) {//头布局可见 并且为 下拉刷新状态
                        //进入松开刷新状态
                        currentState = RELEASE_REFRESH;
                        refreshHeaderView();
                    } else if (paddingTop < 0 && currentState == RELEASE_REFRESH) {
                        currentState = PULL_TO_REFRESH;
                        refreshHeaderView();
                    }
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (currentState == PULL_TO_REFRESH) {
                    //隐藏headerView
                    headerView.setPadding(0, -headerViewHeight, 0, 0);
                } else if (currentState == RELEASE_REFRESH) {
                    headerView.setPadding(0, 0, 0, 0);
                    currentState = REFRESHING;
                    refreshHeaderView();
                    if (listener != null) {
                        listener.onPullRefresh();
                    }
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    /**
     * 刷新headerView
     */
    private void refreshHeaderView() {
        switch (currentState) {
            case PULL_TO_REFRESH:
                tv_state.setText("下拉刷新");
                iv_arrow.startAnimation(downAnimation);
                break;
            case RELEASE_REFRESH:
                tv_state.setText("松开立即刷新");
                iv_arrow.startAnimation(upAnimation);
                break;
            case REFRESHING:
                iv_arrow.clearAnimation();//因为向上的旋转动画有可能没有执行完
                iv_arrow.setVisibility(View.INVISIBLE);
                pb_load.setVisibility(View.VISIBLE);
                tv_state.setText("正在刷新...");
                break;
        }
    }

    /**
     * 完成刷新操作，重置状态,在获取完数据并更新完adapter之后，去在UI线程中调用该方法
     */
    public void completeRefresh() {
        if (isLoadingMore) {
            //重置footerView状态
            footerView.setPadding(0, -footerViewHeight, 0, 0);
            isLoadingMore = false;
        } else {
            //重置headerView状态
            headerView.setPadding(0, -headerViewHeight, 0, 0);
            currentState = PULL_TO_REFRESH;
            pb_load.setVisibility(View.INVISIBLE);
            iv_arrow.setVisibility(View.VISIBLE);
            tv_state.setText("下拉刷新");
            tv_time.setText("最后刷新：" + getCurrentTime());
        }
    }


    /**
     * 获取当前系统时间，并格式化
     */
    private String getCurrentTime() {
        SimpleDateFormat format = new SimpleDateFormat("yy-MM-dd HH:mm:ss");
        return format.format(new Date());
    }

    private OnRefreshListener listener;

    public void setOnRefreshListener(OnRefreshListener listener) {
        this.listener = listener;
    }


    public interface OnRefreshListener {
        void onPullRefresh();

        void onLoadingMore();
    }

    /**
     * SCROLL_STATE_IDLE:闲置状态，手指松开 值为0
     * SCROLL_STATE_TOUCH_SCROLL：触摸滑动状态 值为1
     * SCROLL_STATE_FLING：快速滑动状态 值为2
     */
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        Log.i(TAG, "scrollState = " + scrollState);
        if (scrollState == OnScrollListener.SCROLL_STATE_IDLE
                && getLastVisiblePosition() == (getCount() - 1) && !isLoadingMore) {
            isLoadingMore = true;

            footerView.setPadding(0, 0, 0, 0);//显示出footerView
            setSelection(getCount());//让listview最后一条显示出来

            if (listener != null) {
                listener.onLoadingMore();
            }
        }
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

    }

}

4.主函数调用的布局

<?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="match_parent">

    <com.example.refreshlistview.view.RefreshListView
        android:id="@+id/my_refresh_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.refreshlistview.view.RefreshListView>

</LinearLayout>

5.主函数调用的代码

public class MainActivity extends Activity {

    private RefreshListView myRefreshListView;
    private List<String> list = new ArrayList<String>();
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            adapter.notifyDataSetChanged();
            myRefreshListView.completeRefresh();
        }
    };
    private MyAdapter adapter;

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

    private void initViews() {
        setContentView(R.layout.activity_main);
        myRefreshListView = (RefreshListView) this.findViewById(R.id.my_refresh_listview);
    }

    private void initData() {
        for (int i = 0; i < 20; i++){
            list.add("listview的原始数据："+i);
        }
        initListView();
    }

    private void initListView() {
        adapter = new MyAdapter();
        myRefreshListView.setAdapter(adapter);
        myRefreshListView.setOnRefreshListener(new RefreshListView.OnRefreshListener() {
            @Override
            public void onPullRefresh() {
                getDataFromServer(false);
            }

            @Override
            public void onLoadingMore() {
                getDataFromServer(true);
            }

        });
    }

    /**
     * 模拟向服务器请求数据
     */
    private void getDataFromServer(final boolean isLoadingMore){
        new Thread(){
            @Override
            public void run() {
                SystemClock.sleep(3000);//模拟请求服务器的一个时间长度
                if (!isLoadingMore) {
                    list.add(0, "下拉刷新的数据-1");
                } else {
                    list.add("加载更多的数据-1");
                    list.add("加载更多的数据-2");
                    list.add("加载更多的数据-3");
                }

                //在UI线程更新UI
                handler.sendEmptyMessage(0);
            }
        }.start();
    }

    class MyAdapter extends BaseAdapter{

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            TextView textView = new TextView(MainActivity.this);
            textView.setText(list.get(position));
            textView.setTextSize(18);
            textView.setPadding(20, 20 ,20, 20);
            return textView;
        }
    }
「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 史上最简单的自定义listview上拉刷新下拉加载
迟到的微笑
08-25 7249
今天有人问我，android上拉刷新下拉加载怎么实现。我对他说网上有很多例子啊，他说，网上是有很多例子，但是很杂，对于小白不友好。所以我就专门写了一个史上最简单的上拉刷新下拉加载。整个工程就一个activity，一个自定义listview，还有三个布局文件。是不是很简单很简洁？ 老规矩先上程序运行截图 默认界面 下拉刷新 上拉加载 开始正题 首先我们先看三个布局...
android 自定义控件ListView实现下拉刷新上拉加载更多
小胡仔
01-16 230
自定义方法 public class MyListView extends ListView implements AbsListView.OnScrollListener { private TextView tv_head;//头部提示语 private ProgressBar bar_head;//头部加载控件 private ImageView arrow;//...
Android ListView 实现下拉刷新上拉加载
思月行云
10-20 6491
转载请注明出处：http://blog.csdn.net/allen315410/article/details/39965327 1.简介        无疑，在Android开发中，ListView是使用非常频繁的控件之一，ListView提供一个列表的容易，允许我们以列表的形式将数据展示到界面上，但是Google给我们提供的原生ListView的控件，虽然在功能上很强大，但是在用户体验和
android ListView上拉加载更多 下拉刷新功能实现（采用pull-to-refresh）
热门推荐
攀爬蜗牛-dutycode.com
01-14 5万+
Android实现上拉加载更多功能以及下拉刷新功能， 采用了目前比较火的PullToRefresh，他是目前实现比较好的下拉刷新的类库。 目前他支持的控件有：ListView， ExpandableListView，GridView，WebView等。 下载地址：https://github.com/chrisbanes/Android-PullToRefresh 首先第一
Android自定义listview布局实现上拉加载下拉刷新功能
08-31
主要介绍了Android自定义listview布局实现上拉加载下拉刷新功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
自定义ListView实现下拉刷新+加载更多功能Demo
10-09
自定义ListView实现下拉刷新+加载更多功能Demo
Android 自定义ListView（下拉刷新PullToRefreshListView 上拉加载LoadListView）
06-10
Android 自定义ListView，分别实现下拉刷新的ListView及上拉加载的ListView 详情可以参考我的博客 http://blog.csdn.net/sunshanai/article/details/51622917
Android UI自定义ListView实现下拉刷新和加载更多效果
09-01
主要介绍了Android UI自定义ListView实现下拉刷新和加载更多效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
视差特效
mjd的专栏
02-10 1701
1.1 界面初始化 1.1.1 填充 ListView 1.1.2 ListView 添加 Header 1.2 下拉放大 1.2.1 overScrollBy() 方法参数解析 1.2.2 动态改变头布局的高度 1.3 回弹动画效果1.1 界面初始化1.1.1 填充 ListView自定义 ParallaxListView 继承 ListViewpackage com.fighting.qqvie
Android 广告轮播效果（伪无限循环）
mjd的专栏
06-04 1213
效果图思考 要实现上面的效果，布局上使用viewpager控件，还需一个textview用来显示文字，一个LinearLayout用来存放动态创建的小圆点。 用handler隔几秒发送一个消息来控制图片的轮播切换。 要使在最后一张图片继续左滑时，跳到第一张图片上，可以将viewpager适配器中的getCount()方法中返回最大的整数，在instantiateItem中通过对list的长度取模来设
Android 下拉选择
mjd的专栏
06-05 1199
效果图思考 要实现以上效果，首先控件是：一个EditText，一个下拉的箭头ImageView，一个listview，还有让listview悬浮在文本框下方的PopupWindow 当listview数据被删除时，需要去判断，如果listview的高度小于popupWindow的指定高度，则更新popupWindow的高度为listview的高度，当没有数据时，将下拉箭头置为不可见。 步骤 布局主页
仿QQ侧滑面板（三）
mjd的专栏
01-28 1142
1.5 状态更新及事件回调 1.5.1 状态分析 1.5.2 事件回调分析 1.5.2 实现状态更新及事件回调 1.6 触摸优化 1.6.1 填充界面数据 1.6.2 主面板触摸优化 1.5 状态更新及事件回调1.5.1 状态分析拖拽的状态可以分为： 打开状态 关闭状态 拖拽状态 通过枚举定义这三种状态，且定义默认状态为关闭 //默认状态为关闭 private Status status =
Android 自定义ToggleButton
mjd的专栏
06-06 1013
效果图思考 因为是自定义view，不是viewGroup，所以在进行了onMeasure()的测量方法之后，所以不需要onLayout方法，但是必须实现onDraw()方法 程序如何设计呢？需要提供设置ToggleButton开关背景图片的方法 需要提供设置ToggleButton滑动背景图片的方法 需要提供设置ToggleButton开关状态的方法 需要提供设置ToggleButton状态改变的监
仿QQ侧滑面板（二）
mjd的专栏
01-28 760
1.3 结束动画 1.3.1 跳转的结束动画 1.3.2 平滑的结束动画 1.4 伴随动画 1.4.1 分解伴随动画 1.4.2 实现伴随动画 1.3 结束动画拖拽过程中当手指抬起时，需要实现一个打开，关闭面板的动画，结束动画可以在 onViewReleased()方法实现1.3.1 跳转的结束动画onViewReleased()方法在松手之后会被调用，此时可以做结束动画，结束动画只需要考虑需要打开
Android 自定义侧滑菜单
mjd的专栏
06-10 687
效果图思考 可以看出滑动的是两个layout，所以自定义的侧滑控件应该继承ViewGroup，实现onMessure()和onLayout()方法，为了简化操作，可以继承android系统已经实现好的ViewGroup的子类 —— FrameLayout，这样就不用自己去测量了。 onLayout()方法中，初始化的时候，要将侧边菜单的布局放到屏幕左边看不到的地方。menuView.layout(-
仿QQ侧滑面板（一）
mjd的专栏
01-28 639
1.1 实现最简单的拖拽 1.1.1 自定义一个 DragLayout 1.1.2 串连构造方法 1.1.3 ViewDragHelper 简介 1.1.4 创建 ViewDragHelper 1.1.5 触摸事件转交 1.1.6 处理回调事件 1.1.7 DragLayout 布局到 xml 1.2 限定拖拽范围 1.2.1 onFinishInflate()介绍 1.2.2 获取控件宽高 1.2
android仿老式优酷菜单
mjd的专栏
01-23 576
1.2 自定义组合控件之优酷菜单 1.2.1 项目概述 1.2.2 优酷菜单 UI 1.2.3 优酷菜单业务逻辑实现 1.2.4 AnimUtil工具类的逻辑实现 1.2.5 知识点总结 1.2 自定义组合控件之优酷菜单1.2.1 项目概述首先，我们学习如何自定义一个组合控件，其中，优酷菜单是一个典型的自定义组合控件，它的效果图如图 1-1 所示： 图中由中间往外， 分别
react-native开发安卓端app
最新发布
m0_73872315的博客
04-24 727
总之，第一次app开发还是颇废了我一番功夫的，可以说红温了很多次，不过好在最终没有夭折。。。接下来要做点啥好像暂时还没有思路，正在思考我需要点啥中。。。。
android listview 上拉刷新，下拉加载
05-16
实现上拉刷新、下拉加载的 ListView，可以使用第三方库，如 Google 推荐的 SwipeRefreshLayout，或者自己实现。 下面是自己实现的一种方法： 1. 在布局文件中加入 ListView 和 ProgressBar： ``` android:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值