自定义listview 带下拉刷新动画特效

最新推荐文章于 2021-05-26 03:22:51 发布
最新推荐文章于 2021-05-26 03:22:51 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： android 自定义view 文章标签： android listview 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35522272/article/details/52216281
版权

android 学习中使用最多的大量数量集控件 莫过于listview ，虽然就目前来说 google 新推出一个叫recycleView的新空间，并且他本身集合了许多特性，使用起来非常方便。最主要的特性有以下几点：
**1、控制其显示的方式，请通过布局管理器LayoutManager
2、控制Item间的间隔（可绘制），请通过ItemDecoration
3、控制Item增删的动画，请通过ItemAnimator
作者： 小灬航航
链接：http://www.imooc.com/article/9335
来源：慕课网** 详细可以点击链接
但是就目前来说大多数初级开发者还是更加喜欢和倾向于使用listview，如何实现listview 中的一些完美特效呢。其实，listview本身是提供了头部和尾部的控件接口的。我们可以通过addHeaderView(View v,object data, boolean isSelectable);
addFooterView(View v,object data, boolean isSelectable);
这两个头部和根部的2个接口，通过自定义的view加进去。可以达到我们的效果了。当然在自定义的时候一些刷新动画，都是通过在重写
onTouchEvent（MotionEvent ev）这个触摸事件来完成的。详细内容可以看代码。其中有较为详细的注释。

import java.util.Date;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

/**
 * 自定义拉下刷新ListView，常规箭头旋转，系统进度条，无回弹动画
 * @author
 * @Description
 */
public class MyCusListView extends ListView implements OnScrollListener {
    private static final String TAG = "MyCusListView===>";
    /** 操作状态:下拉刚开始、回退到顶、一次刷新结束 */
    private static final int DONE = 0x1;
    /** 操作状态:松开即可刷新 */
    private final static int RELEASE_TO_REFRESH = 0x2;
    /** 操作状态:下拉可以刷新 */
    private final static int PULL_TO_REFRESH = 0x3;
    /** 操作状态:正在刷新 */
    private final static int REFRESHING = 0x4;
    /** 自定义ListView头布局 */
    private LinearLayout headView;
    /** 刷新提示文本 */
    private TextView txtHeadTip;
    /** 最近刷新时间文本 */
    private TextView txtLastRefresh;
    /** 下拉箭头图标 */
    private ImageView imgRefreshArrow;
    /** 刷新进度条图标 */
    private ProgressBar pbRefreshRound;
    /** headView宽 */
    private int headContentWidth;
    /** headView高 */
    private int headContentHeight;
    /** 下拉时箭头旋转动画 */
    private Animation pullAnim;
    /** 取消时箭头旋转动画 */
    private Animation reserveAnim;
    /** 标识各种刷新状态 */
    private int refreshState;
    /** 首次触摸屏幕设为true,松手时设为false,控制一次触摸事件的记录状态 */
    private boolean isRecored = false;
    /** 手指首次触摸屏幕时Y位置 */
    private int startY;
    /** 手指移动的距离和headView的padding距离的比例,防止移动时headView下拉过长 */
    private final static int RATIO = 3;
    /** 表示已经下拉到可以刷新状态,可以拉回 */
    private boolean isBack = false;
    /** 刷新监听回调接口 */
    private OnRefreshListener refreshListener;
    /** 列表在屏幕顶端第一个完整可见项的position */
    private int firstItemIndex;

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

    /** 初始化 */
    private void init(Context context) {
        Log.i(TAG, "init()...");
        // 获取自定义头view
        headView = (LinearLayout) LayoutInflater.from(context).inflate(
                R.layout.head_cus_listview, null);
        // 获取headView中控件
        imgRefreshArrow = (ImageView) headView
                .findViewById(R.id.imgRefreshArrow);
        pbRefreshRound = (ProgressBar) headView
                .findViewById(R.id.pbRefreshRound);
        txtHeadTip = (TextView) headView.findViewById(R.id.txtHeadTip);
        txtLastRefresh = (TextView) headView.findViewById(R.id.txtLastRefresh);
        // 预估headView宽高
        measureView(headView);
        // 获取headView宽高
        headContentWidth = headView.getMeasuredWidth();
        headContentHeight = headView.getMeasuredHeight();
        Log.i(TAG, "headView宽:[" + headContentWidth + "],高:["
                + headContentHeight + "]");
        // 设置headView的padding值,topPadding为其本身的负值,达到在屏幕中隐藏的效果
        headView.setPadding(0, -headContentHeight, 0, 0);
        // 重绘headView
        headView.invalidate();
        // 将headView添加到自定义的ListView头部
        this.addHeaderView(headView, null, false);
        // 设置ListView的滑动监听
        this.setOnScrollListener(this);
        // 获取箭头旋转动画
        pullAnim = AnimationUtils.loadAnimation(context, R.anim.arrow_rotate);
        reserveAnim = AnimationUtils.loadAnimation(context,
                R.anim.arrow_rotate_reverse);
        // 初始刷新状态
        refreshState = DONE;
    }

    /**
     * 预估headView的宽高
     * 
     * @param child
     */
    private void measureView(View child) {
        Log.i(TAG, "measureView()...");
        ViewGroup.LayoutParams p = child.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
        int lpHeight = p.height;
        int childHeightSpec;
        if (lpHeight > 0) {
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
                    MeasureSpec.EXACTLY);
        } else {
            childHeightSpec = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
        }
        child.measure(childWidthSpec, childHeightSpec);
    }

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

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

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        // 记录滚动时列表第一个完整可见项的position
        firstItemIndex = firstVisibleItem;
    }

    /** 监听触摸事件 */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:// 第一次触摸时
            if (firstItemIndex == 0) {
                // 开始记录
                isRecored = true;
                // 获取首次Y位置
                startY = (int) ev.getY();
                Log.i(TAG, "从首次触摸点就开始记录...");
            } else {
                Log.i(TAG, "首次触摸时firstItemIndex不为0,不执行下拉刷新");
            }
            Log.i(TAG, "记录状态isRecored:" + isRecored);
            break;
        case MotionEvent.ACTION_UP:// 松开屏幕时
            // 移除记录
            isRecored = false;
            Log.i(TAG, "停止记录..." + ",isRecored:" + isRecored);
            if (refreshState == PULL_TO_REFRESH) {
                refreshState = DONE;
                changeHeadView();
                Log.i(TAG, "PULL_TO_REFRESH状态松手,回到原始状态");
            } else if (refreshState == RELEASE_TO_REFRESH) {
                refreshState = REFRESHING;
                changeHeadView();
                onRefreshing();
                Log.i(TAG, "RELEASE_TO_REFRESH状态松手,进入REFRESHING状态");
            } else if (refreshState == REFRESHING) {
                if (firstItemIndex == 0) {
                    // 保持刷新状态
                    headView.setPadding(0, -headContentHeight, 0, 0);
                    Log.i(TAG, "REFRESHING状态松手,保持该状态,headView仍在顶部");
                } else {
                    Log.i(TAG, "REFRESHING状态松手,保持该状态,headView被推出顶部");
                }
            }
            break;
        case MotionEvent.ACTION_MOVE:// 手势移动时
            // 记录实时的手指移动时在屏幕的Y位置,用于和startY比较
            int curY = (int) ev.getY();

            if (!isRecored && firstItemIndex == 0) {
                isRecored = true;
                Log.i(TAG, "从移动状态执行下拉刷新,开始记录..." + ",isRecored:" + isRecored);
                startY = curY;
            }

            if (isRecored) {
                // 开始或结束状态
                if (refreshState == DONE) {
                    if (curY - startY > 0) {// 表示向下拉了
                        // 状态改为下拉刷新
                        refreshState = PULL_TO_REFRESH;
                        changeHeadView();
                    }
                }

                // 下拉刷新状态
                if (refreshState == PULL_TO_REFRESH) {
                    setSelection(0);
                    // 不断改变headView的高度
                    headView.setPadding(0, (curY - startY) / RATIO
                            - headContentHeight, 0, 0);
                    // 下拉到RELEASE_TO_REFRESH状态
                    if ((curY - startY) / RATIO >= headContentHeight * 1.5) {
                        refreshState = RELEASE_TO_REFRESH;
                        isBack = true;
                        changeHeadView();
                    } else if ((curY - startY) <= 0) {
                        // 上推到顶
                        refreshState = DONE;
                        changeHeadView();
                    }
                }

                // 松手可以刷新状态
                if (refreshState == RELEASE_TO_REFRESH) {
                    setSelection(0);
                    // 不断改变headView的高度
                    headView.setPadding(0, (curY - startY) / RATIO
                            - headContentHeight, 0, 0);
                    // 又往上推
                    if ((curY - startY) / RATIO < headContentHeight * 1.5) {
                        refreshState = PULL_TO_REFRESH;
                        changeHeadView();
                    }
                }

                // 正在刷新状态
                if (refreshState == REFRESHING) {
                    if (curY - startY > 0) {
                        // 只改变padding值,不做其余处理
                        headView.setPadding(0, (curY - startY) / RATIO, 0, 0);
                    }
                }
            }
            break;
        }
        return super.onTouchEvent(ev);
    }

    /** 进入刷新的方法 */
    private void onRefreshing() {
        // 调用回调接口中的刷新方法
        if (refreshListener != null) {
            refreshListener.toRefresh();
        }
    }

    /** 使用界面传递给此ListView的回调接口,用于两者间通信 */
    public interface OnRefreshListener {
        public void toRefresh();
    }

    /**
     * 注册一个用于刷新的回调接口
     * 
     * @param refreshListener
     */
    public void setOnRefreshListener(OnRefreshListener refreshListener) {
        // 获取传递过来的回调接口
        this.refreshListener = refreshListener;
    }

    /** 使用界面执行完刷新操作时调用此方法 */
    public void onRefreshFinished() {
        refreshState = DONE;
        changeHeadView();
        // 显示最近更新
        txtLastRefresh.setText("最近更新:" + new Date().toLocaleString());
    }

    /** 根据下拉的状态改变headView */
    private void changeHeadView() {
        switch (refreshState) {
        case DONE:// 开始或结束状态
            Log.i(TAG, "当前状态:DONE");
            // 回退状态清除
            isBack = false;
            // 回复原始高度
            headView.setPadding(0, -headContentHeight, 0, 0);
            // 进度条隐藏
            pbRefreshRound.setVisibility(View.GONE);
            // 设置原始箭头图片
            imgRefreshArrow.setImageResource(R.drawable.indicator_arrow);
            imgRefreshArrow.setVisibility(View.VISIBLE);
            txtHeadTip.setText("下拉可以刷新...");
            break;
        case PULL_TO_REFRESH:// 下拉刷新状态
            Log.i(TAG, "当前状态:PULL_TO_REFRESH");
            // 从RELEASE_TO_REFRESH回到PULL_TO_REFRESH状态
            Log.i(TAG, "是否从松开刷新回到下拉刷新...isBack:" + isBack);
            if (isBack) {
                // 设置箭头回转动画
                imgRefreshArrow.startAnimation(reserveAnim);
            }
            txtHeadTip.setText("下拉可以刷新...");
            break;
        case RELEASE_TO_REFRESH:
            Log.i(TAG, "当前状态:RELEASE_TO_REFRESH");
            // 设置箭头旋转动画
            imgRefreshArrow.startAnimation(pullAnim);
            txtHeadTip.setText("松开即可刷新...");
            break;
        case REFRESHING:
            startY = 0;
            // 保持headView在屏幕顶端显示
            // headView.setPadding(0, 0, 0, 0);
            headView.setPadding(0, -headContentHeight, 0, 0);
            headView.setVisibility(View.GONE);
            refreshState = DONE;
            // 显示出进度条
            pbRefreshRound.setVisibility(View.GONE);
            // 隐藏箭头图标
            imgRefreshArrow.clearAnimation();
            imgRefreshArrow.setVisibility(View.GONE);
            txtHeadTip.setText("正在刷新...");
            Log.i(TAG, "当前状态:REFRESHING");
            break;
        }
    }

    @Override
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);
        txtLastRefresh.setText("最近更新:" + new Date().toLocaleString());
    }
}

这个自定义控件实现了下拉箭头，和回弹的箭头。以及刷新时的进度更新动作，并且附带刷新时间。
自定义headView布局页面代码如下：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >


        <LinearLayout
            android:id="@+id/layout_Text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/txtHeadTip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="下拉可以刷新..."
                android:textColor="@color/gray"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/txtLastRefresh"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="无更新记录"
                android:textColor="@color/lightgray"
                android:textSize="13sp" />
        </LinearLayout>


        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@id/layout_Text" >

            <ImageView
                android:id="@+id/imgRefreshArrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/indicator_arrow" />

            <ProgressBar
                android:id="@+id/pbRefreshRound"
                style="?android:attr/progressBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:visibility="gone" />
        </FrameLayout>
    </RelativeLayout>

</LinearLayout>

下面是效果图：
刷新时的效果
下拉时的效果
松开的效果图

向大牛前行
关注
专栏目录
FLUTTER 自己动手对LISTVIEW添加下拉刷新
importIng的博客
07-10 667
material实际上自带有下拉刷新控件，不过既然是学习就自己实现一个，这里是实现一个IOS中比较常见的tableviewHeader式的下拉刷新控件 。效果类似于MJNormalHeader。 先踩个坑 在做下拉刷新的时候，我首先是利用滚动控件拉出滚动范围时，利用offset做处理。 也实现了，在IOS端listview有弹簧效果，因此会被拉出负的offset,但是在安卓端运行时弹簧效果却会被...
Android UI--自定义ListView(实现下拉刷新+加载更多），framework框架
m0_64383081的博客
12-13 447
(TextView) mRefreshHeaderView.findViewById(R.id.pull_to_refresh_updated_at); mLoadMoreFooterView = (RelativeLayout) mInflater.inflate( R.layout.loadmore_footer, this, false); mLoadMoreText = (TextView) mLoadMoreFooterView.findViewById(R.id.loadmore_text);
listview下拉后的动画效果
11-03
listview下拉+动画效果，良心代码
自定义渐变式炫酷动画的ListView下拉刷新
u012891600的博客
02-15 419
自定义渐变式炫酷动画的ListView下拉刷新装载请注明出处：http://blog.csdn.net/u012891600/article/details/55144013主要要点 listview刷新过程中主要有三个步骤当前：状态为下拉刷新，当前状态为下拉刷新，当前状态为放开刷新，当前状态为正在刷新；主要思路为三个步骤分别对应三个自定义的view；即ibuRefreshFirstStepVi
动画特效九：下拉刷新
weixin_33794672的博客
04-26 83
这一节为大家介绍一个经常使用的操作：下拉刷新。我这里的Demo。是模拟情况。没有涉及到详细的数据源。真实的下拉刷新控件还是比較复杂的。先看看效果图。 关于UITableView的代码就忽略不计了。那不是本节解说的重点。 动画分析： 1. UITableView上方有一个View，就是用来展示下拉刷新的特效的。所以全然能够自己定义一个View来封装它，我将其命名为Ref...
安卓自定义下拉刷新 带动画效果
04-17
安卓listview自定义下拉刷新 自带帧动画效果
listview的下拉刷新，动画+带时间；；底部刷新加载数据
04-01
用的是Android studio实现了listview 的上拉刷新还有下滑刷新。有动画有时间。
三种下拉刷新动画特效
10-04
本主题将详细介绍三种不同的下拉刷新动画特效，以及如何在Android平台上实现这些效果。 1. **环形旋转动画** 第一种动画效果是环形旋转，它通常表现为一个加载图标围绕自己的中心轴线进行旋转，象征着数据正在加载...
安卓下拉上拉刷新相关-listView下拉刷新上拉刷新带阻尼效果.rar
07-29
在安卓开发中，下拉刷新和上拉加载...通过研究源码，开发者可以了解如何自定义ListView的行为，如何处理触摸事件，以及如何创建动态的刷新动画。对于提升安卓应用的用户体验设计和开发技能，这是一个非常有价值的资源。
ListView_上拉下拉_刷新_不刷新特效Test
12-06
总之，"ListView_上拉下拉_刷新_不刷新特效Test"项目涵盖了Android中ListView的高级使用技巧，包括下拉刷新和上拉加载更多功能的实现，以及刷新特效的自定义。这些内容需要开发者对Android UI组件、Adapter机制以及...
Android 自带下拉上拉动画刷新ListView
08-29
这是一个 自带 上拉 下拉 刷新 动画 的 ListView
效果不错的listview(带下拉刷新和加载更多,条目滚动带动画
09-21
效果不错的listview(带下拉刷新和加载更多,条目滚动带动画),效果很不错,值得一用,谁用谁知道
Android中ListView动态刷新
12-01
Android中ListView用NotifyDataSetChanged实现添加数据时动态刷新
上拉下拉动画listview/recyclerview
01-11
android上拉加载下拉刷新带动画listview/recyclerview， 源代码，可支持设置横向竖向
android listview 下拉动画,Android----单纯的下拉刷新ListView
weixin_39922151的博客
05-26 77
目录无标题.png演示gif5新文件 (1).gif思路1.设置can控制现在是不是可以滑动。2.如果现在第一个可见元素position是0，设置可以滑动。3.滑动的实现，本质上是用header的高度去控制。4.全局只用currentHeight去控制当前滑动的量demoListView的代码package com.example.rtyui.androidteach.PullRefreshLis...
给listview加动画，让动画执行结束后再刷新
dianjinwei7924的博客
05-20 157
问题：当给listview的条目加动画时，例如添加一个条目或者移除一个条目，动画效果会和添加删除条目的逻辑同时进行，因为动画并不是阻塞式的，这样会造成动画还没有结束，条目已经添加或者移除，从而动画作用在下面一个条目上面。 解决办法：想办法让动画执行完了之后再进行条目的添加或者移除操作（也就是刷新数据适配器），可以通过设置动画监听来实现，将要添加或者删除条目的逻辑放到动画监听的方法中，可...
android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
weixin_39675178的博客
05-25 263
Android开发中利用ListView实现一个渐变式的下拉刷新动画发布时间：2020-11-23 16:50:31来源：亿速云阅读：80作者：Leah本篇文章给大家分享的是有关Android开发中利用ListView实现一个渐变式的下拉刷新动画，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。主要要点listview刷新过程中主要有三个...
给你的ListView列表添加载入动画
西木的专栏
05-22 2576
Android开发中，我们经常会用到列表，列表的实现当然是采用ListView或者RecyclerView， 如果能给列表添加炫酷的载入动画，会给用户增加不小的视觉美感，比如stroll.js里面展示的那样，不过他那里面是用CSS实现的动画，在我们的native应用里，我们同样也可以实现这样的效果。开源库JazzyListView已经很好的实现了，不过我们今天来自己实现下这些效果，理解了这些动画的原
android listview下拉刷新动画,Android ListView 的下拉刷新【附源码】
weixin_35853363的博客
05-26 205
Android 实现listview的下拉刷新已经不是什么新鲜问题了，这里我先上图。运行程序：看不出这是一个listview或者不知道listview是啥玩意儿的，建议不要往下看了。然后下拉这个listview下拉到知道高度，有一个箭头翻转动画松开listview等待刷新完成后上面为这个demo的主要流程。做下简单讲解：首先这是一个自定义的listview控件(自定义控件应该都明白)继承listv...
自定义渐变ListView下拉刷新动画实现详解
"Android自定义渐变式炫酷ListView下拉刷新动画" 在Android开发中，ListView是常用的组件，用于展示大量的列表数据。然而，为了提升用户体验，开发者常常需要对ListView进行自定义，添加一些交互性更强的功能，比如...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值