listview下拉刷新上拉加载扩展（二）-仿美团外卖

经过前几篇的listview下拉刷新上拉加载讲解，相信你对其实现机制有了一个深刻的认识了吧，那么这篇文章我们来实现一个高级的listview下拉刷新上拉加载-仿新版美团外卖的袋鼠动画：

项目结构：

是不是灰常简单！！

headview的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="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <com.baiyuliang.listviewrefreshdemo.RefreshAnimView
        android:id="@+id/refreshAnimView"
        android:layout_width="59dp"
        android:layout_height="70dp"
        android:layout_margin="10dp"/>

    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="59dp"
        android:layout_height="70dp"
        android:layout_margin="10dp"
        android:indeterminateDrawable="@drawable/loading"
        android:visibility="gone"/>

</LinearLayout>

自定义可缩放的View：

package com.baiyuliang.listviewrefreshdemo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class RefreshAnimView extends View{

    private Bitmap daishu;
    private int measuredWidth;
    private int measuredHeight;
    private float mCurrentProgress;
    private int mCurrentAlpha;
    private Paint mPaint;
    private Bitmap scaleDaishu;

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

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

    public RefreshAnimView(Context context) {
        super(context);
        init();
    }
    private void init(){
        //袋鼠bitmap
        daishu = BitmapFactory.decodeResource(getResources(), R.mipmap.takeout_img_list_loading_pic1);
        //mPaint.setAlpha来实现渐变效果
        mPaint = new Paint();
        //首先设置为完全透明
        mPaint.setAlpha(0);
    }

    /**
     * 测量方法
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
    }
    //测量宽度
    private int measureWidth(int widthMeasureSpec){
        int result = 0;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if (MeasureSpec.EXACTLY == mode) {
            result = size;
        }else {
            result = daishu.getWidth();
            if (MeasureSpec.AT_MOST == mode) {
                result = Math.min(result, size);
            }
        }
        return result;
    }
    //测量高度
    private int measureHeight(int heightMeasureSpec){
        int result = 0;
        int size = MeasureSpec.getSize(heightMeasureSpec);
        int mode = MeasureSpec.getMode(heightMeasureSpec);
        if (MeasureSpec.EXACTLY == mode) {
            result = size;
        }else {
            result = daishu.getHeight();
            if (MeasureSpec.AT_MOST == mode) {
                result = Math.min(result, size);
            }
        }
        return result;
    }
    //在这里面拿到测量后的宽和高，w就是测量后的宽，h是测量后的高
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        measuredWidth = w;
        measuredHeight = h;
        //根据测量后的宽高来对袋鼠做一个缩放
        scaleDaishu = Bitmap.createScaledBitmap(daishu,measuredWidth,measuredHeight,true);
    }

    /**
     * 绘制方法
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.scale(mCurrentProgress, mCurrentProgress, measuredWidth/2, measuredHeight);
        mPaint.setAlpha(mCurrentAlpha);
        canvas.drawBitmap(scaleDaishu, 0, 0, mPaint);
    }

    /**
     * 根据进度对袋鼠进行缩放
     * @param currentProgress
     */
    public void setCurrentProgress(float currentProgress){
        this.mCurrentProgress = currentProgress;
        this.mCurrentAlpha = (int) (currentProgress*255);
    }
}

在listview中的onTouch事件中将手指下拉滑动距离与headview的高度比传递给RefreshAnimView 重绘，以实现图片根据手指移动来缩放图片：

 case MotionEvent.ACTION_MOVE:
                offsetY = ev.getY() - startY;
                /**
                 * 下拉刷新
                 */
                if (isRefreshable &&offsetY > 0 && loadstate == LOAD_DONE && isScrollFirst && refreshstate != REFRESHING) {
                    float headerViewShowHeight = offsetY / REFRESH_RATIO;
                    float scaleProgress=headerViewShowHeight/headerViewHeight;//图片放大缩小比例
                    if(scaleProgress>1){
                        scaleProgress=1;
                    }
......

     if (refreshstate == PULL_TO_REFRESH || refreshstate == RELEASE_TO_REFRESH) {
                        headerView.setPadding(0, (int) (headerViewShowHeight - headerViewHeight), 0, 0);
                        refreshAnimView.setCurrentProgress(scaleProgress);//设置refreshAnimView的缩放进度
                        refreshAnimView.invalidate();//重绘
                    }

根据刷新状态实时更新headview：

 private void changeHeaderByState(int state) {
        switch (state) {
            case REFRESH_DONE:
                headerView.setPadding(0, -headerViewHeight, 0, 0);
                refreshAnimView.setVisibility(View.VISIBLE);
                pb.setVisibility(View.GONE);
                break;
            case RELEASE_TO_REFRESH:
                break;
            case PULL_TO_REFRESH:
                break;
            case REFRESHING:
                headerView.setPadding(0, 0, 0, 0);
                refreshAnimView.setVisibility(View.GONE);
                pb.setVisibility(View.VISIBLE);
                break;
            default:
                break;
        }
    }

PS：如何快速简单的实现一个帧动画？

利用ProgressBar的indeterminateDrawable属性，定义一个animation-list，也是灰常简单：

    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="59dp"
        android:layout_height="70dp"
        android:layout_margin="10dp"
        android:indeterminateDrawable="@drawable/loading"
        android:visibility="gone"/>

loadding.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item android:duration="50">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@mipmap/takeout_img_list_loading_pic1"
            android:gravity="left" />
    </item>
    <item android:duration="50">
        <clip
            android:clipOrientation="horizontal"
            android:drawable="@mipmap/takeout_img_list_loading_pic2"
            android:gravity="left" />
    </item>

</animation-list>

好了，如果你还是那么懒，不想动手，demo给你：http://download.csdn.net/detail/baiyuliang2013/9344831