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