android 开发 View _8_ 动态图片自定义View

最新推荐文章于 2024-05-21 14:19:11 发布

少问，多查，靠自己

最新推荐文章于 2024-05-21 14:19:11 发布

阅读量410

点赞数

分类专栏： android开发 Android自定义View学习文章标签： android

android开发同时被 2 个专栏收录

73 篇文章

订阅专栏

Android自定义View学习

16 篇文章

订阅专栏

本文介绍如何使用自定义View实现京东风格的加载动画效果。通过不断改变显示的图像部分来模拟动画，代码简单易懂，适用于Android应用开发。

转载地址：https://blog.youkuaiyun.com/mengks1987/article/details/77770922

先来看下效果：

是不是有一种熟悉感，其实这种效果使用序列帧动画也是可以实现的，这里我们介绍下如何使用自定义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);
    }
}