一步步实现带动画效果的下拉刷新

最新推荐文章于 2024-07-12 08:49:54 发布

置顶

wolearn的小舟

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量7.2k

点赞数 5

分类专栏：自定义view

本文链接：https://blog.csdn.net/xuan_xiaofeng/article/details/50515623

版权

本文将逐步指导如何实现一个带有动画的下拉刷新功能，让用户体验更佳。

摘要由CSDN通过智能技术生成

先看效果

分析

1.先要在listview的头部加上一个布局，布局中包含一个文本控件一个图片

2.这个图片控件会随着下拉的过程做一个缩放

3.整个下拉刷新过程分三步：

第一步：下拉未超过布局的原始高度，图片做缩放动作，文字显示下拉刷新

第二步：下拉超过布局的原始高度，图片大小保持不变，文字显示松开刷新

第三步：松手后，如果当前位置在原始高度的上方，不进行刷新，直接回弹；如果在下方，执行刷新任务，并播放动画效果，完成后回弹

实战

1.我们需要一个能随着滑动改变自身大小的自定义控件，继承view是个不错的选择

2.通过画布的缩放来控制图片的大小，同时别忘了处理padding

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //考虑padding的影响
    int leftPadding = getPaddingLeft();
    int topPadding = getPaddingTop();
    int rightPadding = getPaddingRight();
    int bottomPadding = getPaddingBottom();

    int lastWidth = getMeasuredWidth() - leftPadding - rightPadding;
    int lastHeight = getMeasuredHeight() - topPadding - bottomPadding;

    scaleBitmap = Bitmap.createScaledBitmap(initBitmap, lastWidth, lastHeight, true);

    canvas.save();
    //缩放画布
    canvas.scale(mCurrentProgress, mCurrentProgress, lastWidth / 2 + leftPadding, lastHeight / 2 + topPadding);
    //缩放图形,要写在画布缩放后边
    canvas.drawBitmap(scaleBitmap, topPadding, leftPadding, null);

    canvas.restore();
}

3.需要一个方法供外部调用，用于控制绘制控件的大小

public void setCurrentProgress(float currentProgress) {
    mCurrentProgress = currentProgress;
    postInvalidate();
}

4.完整的代码

public class ScaleView extends View {
    private Bitmap initBitmap;
    private Bitmap scaleBitmap;
    private float mCurrentProgress = 1;
    private int mW