Android 自定义View实例之 “京东跑”

自定义View的相关文章：

• Android 实现一个简单的自定义View
• Android 自定义View步骤
• Android Paint详解
• Android 自定义View之Canvas相关方法说明
• Android 自定义View实例之 “京东跑”
• Android 自定义View实例之进度圆环
• Android 源码分析（TextView）
• Android 自定义View分发流程
• Android 自定义View 需要注意的事项

先来看下效果：

是不是有一种熟悉感，其实这种效果使用序列帧动画也是可以实现的，这里我们介绍下如何使用自定义View实现。
这是我们的素材，一张图片上有5个京东小哥

我们只需要不停的变换小哥就好了，原理明白了我们看下代码：

public class JDLoadingView extends View {

    private Bitmap bitmap;

    private int index = 0;

    private Paint paint;

    private long lastTime = 0;

    public JDLoadingView(Context context) {
        this(context,null);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr,0);
    }

    public JDLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.jd);
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第2个和第3个一样的，作图的时候重复了，所以抛弃第二个
        if(index == 2){
            index = 3;
        }
        //计算显示第几个小哥
        int left = bitmap.getWidth()/5*index;
        int top =0;
        int right = bitmap.getWidth()/5*(index+1);
        int bottom = bitmap.getHeight();
        //显示一个京东小哥
        canvas.drawBitmap(bitmap,new Rect(left,top,right,bottom),new Rect(0,0,getWidth(),getHeight()),paint );
        index++;
        //显示到最后一个，再次从头开始显示
        if(index >=5){
            index = 0;
        }
        //100ms以后刷新
        postInvalidateDelayed(100);
    }
}

重点地方加上了注释，只要原理明白了，实现还是很简单的。