Android自定义之仿支付宝支付成功、失败状态的加载进度

其他 2018-10-31 22:51:24 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiaxiazaizai01/article/details/52914558

话说今天就是传说中的1024，程序员的节日，在这个重大的节日里我决定撸一篇博文压压惊。今天实现的效果是仿支付宝支付时的几种状态效果，首先是Material Design风格的小圆圈在不停的旋转，当支付成功后，会出现一个带动画效果的对勾，反之，一个大红叉子呈现在你面前，这就尴尬了。。
先看下效果图
这里写图片描述
对于自定义view前面也写了很多篇了，这里就不再啰嗦了，关于自定义view的步骤请移驾查看前几篇博文，理论+实践，相信你能有所收获。

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MdStyleProgress">
        <attr name="progress_color" format="color"/>
        <attr name="progress_width" format="dimension"/>
        <attr name="radius" format="dimension"/>
    </declare-styleable>
</resources>

还是把整个自定义view的类贴出来吧，方便大家浏览，其中对勾和叉号动画，我采用的是属性动画来实现的，并通过AnimatorSet实现将多个动画组合到一起，关于属性动画相关的知识点，可以到郭婶的博客中去，写的比较详细，什么？？你不愿意去翻，那好吧，我把地址贴过来吧，郭婶讲属性动画

public class MdStyleProgress extends View {

    private static final int PROGRESS_COLOR = Color.parseColor("#10a679");
    private static final int PROGRESS_WIDTH = 3;
    private static final int RADIUS = 30;

    private int mProgressColor = PROGRESS_COLOR;
    private int mProgressWidth = dp2px(PROGRESS_WIDTH);
    private int mRadius = dp2px(RADIUS);

    private Paint progressPaint;

    private int rotateDelta = 4;
    private int curAngle = 0;

    private int minAngle = -90;
    private int startAngle = -90;
    private int endAngle = 120;

    private Path path;
    private Status mStatus = Status.Loading;
    private float lineValueLeft;//左边对勾
    private float lineValueRight;//右边对勾
    private float failLineFirst;//叉号
    private float failLineSecond;

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

    public MdStyleProgress(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public MdStyleProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取自定义属性
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MdStyleProgress);
        int indexCount = typedArray.getIndexCount();
        for (int i=0;i<indexCount;i++){
            int attr = typedArray.getIndex(i);
            switch (attr){
                case R.styleable.MdStyleProgress_progress_color:
                    mProgressColor = typedArray.getColor(attr,PROGRESS_COLOR);
                    break;
                case R.styleable.MdStyleProgress_progress_width:
                    mProgressWidth = (int) typedArray.getDimension(attr,mProgressWidth);
                    break;
                case R.styleable.MdStyleProgress_radius:
                    mRadius = (int) typedArray.getDimension(attr,mRadius);
                    break;
            }
        }
        //回收TypedArray对象
        typedArray.recycle();
        //设置画笔
        setPaint();

        path = new Path();
        path.moveTo(mRadius/2,mRadius);
        path.lineTo(mRadius,mRadius+mRadius/2);
        path.lineTo(mRadius+mRadius/2,mRadius/2);
    }

    private void setPaint() {
        progressPaint = new Paint();
        progressPaint.setAntiAlias(true);
        progressPaint.setDither(true);
        progressPaint.setColor(mProgressColor);
        progressPaint.setStyle(Paint.Style.STROKE);
        progressPaint.setStrokeWidth(mProgressWidth);
        progressPaint.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int widthSize;
        int heightSize;
        if(widthMode != MeasureSpec.EXACTLY){
            widthSize = getPaddingLeft() + mProgressWidth + mRadius*2 + getPaddingRight();
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize,MeasureSpec.EXACTLY);
        }
        if(heightMode != MeasureSpec.EXACTLY){
            heightSize = getPaddingTop() + mProgressWidth + mRadius*2 + getPaddingBottom();
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize,MeasureSpec.EXACTLY);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        canvas.translate(getPaddingLeft(),getPaddingTop());

        if(mStatus == Status.Loading){
            if (startAngle == minAngle) {
                endAngle += 6;
            }
            if (endAngle >= 300 || startAngle > minAngle) {
                startAngle += 6;
                if(endAngle > 20) {
                    endAngle -= 6;
                }
            }
            if (startAngle > minAngle + 300) {
                minAngle = startAngle;
                endAngle = 20;
            }
            canvas.rotate(curAngle += rotateDelta,mRadius,mRadius);//旋转rotateDelta=4的弧长
            canvas.drawArc(new RectF(0,0,mRadius*2,mRadius*2),startAngle,endAngle,false,progressPaint);
            invalidate();
        }else if(mStatus == Status.LoadSuccess){
            canvas.drawArc(new RectF(0,0,mRadius*2,mRadius*2),startAngle,360,false,progressPaint);
            //canvas.drawPath(path,progressPaint);
            //画圆圈中的对勾
            canvas.drawLine(mRadius/2,mRadius,mRadius/2+lineValueLeft,mRadius+lineValueLeft,progressPaint);
            canvas.drawLine(mRadius,mRadius+mRadius/2,mRadius+lineValueRight,mRadius+mRadius/2-1.5f*lineValueRight,progressPaint);
        }else {
            canvas.drawArc(new RectF(0,0,mRadius*2,mRadius*2),startAngle,360,false,progressPaint);
            //画圆圈中的叉号(画右边叉号的时候，终止位置的x坐标为起始x位置减去failLineFirst，而failLineFirst在属性动画中的取值范围是0-mRadius)
            canvas.drawLine(mRadius+mRadius/2,mRadius/2,mRadius*3/2-failLineFirst,mRadius/2+failLineFirst,progressPaint);
            canvas.drawLine(mRadius/2,mRadius/2,mRadius/2+failLineSecond,mRadius/2+failLineSecond,progressPaint);
        }

        canvas.restore();
    }


    public enum Status{
        Loading,
        LoadSuccess,
        LoadFail
    }

    public void startAnima(){
        //对勾左边线的属性动画
        ValueAnimator animatorLeft = ValueAnimator.ofFloat(0f,mRadius/2f);
        animatorLeft.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
               lineValueLeft = (float) animation.getAnimatedValue();
                Log.i("lineValueLeft",lineValueLeft+"");
                invalidate();//重绘，调onDraw()重绘
            }
        });
        //对勾右边线的属性动画
        ValueAnimator animatorRight = ValueAnimator.ofFloat(0f,mRadius/2f);
        animatorRight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                lineValueRight = (float) animation.getAnimatedValue();
                Log.i("lineValueRight",lineValueRight+"");
                invalidate();
            }
        });
        //将多个动画组合到一起需要借助AnimatorSet这个类
        final AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(animatorRight).after(animatorLeft);
        animatorSet.setDuration(150);
        animatorSet.start();
    }

    public void failAnima(){
        ValueAnimator failOne = ValueAnimator.ofFloat(0f,mRadius);
        failOne.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                failLineFirst = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        ValueAnimator failOther = ValueAnimator.ofFloat(0f,mRadius);
        failOther.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                failLineSecond = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.play(failOther).after(failOne);
        animatorSet.setDuration(150);
        animatorSet.start();
    }

    public Status getStatus() {
        return mStatus;
    }

    public void setStatus(Status mStatus) {
        this.mStatus = mStatus;
        invalidate();
    }

    /**
     * dp 2 px
     */
    protected int dp2px(int dpVal)
    {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, getResources().getDisplayMetrics());
    }
    /**
     * sp 2 px
     */
    protected int sp2px(int spVal)
    {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                spVal, getResources().getDisplayMetrics());
    }
}

xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.mdstyleprogress.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">
        <!--<Button
            android:id="@+id/loading"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="还原"
            android:layout_marginRight="5dp"
            android:layout_weight="1"/>-->
        <Button
            android:id="@+id/success"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="成功"
            android:layout_marginRight="5dp"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/fail"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="失败"
            android:layout_weight="1"/>
    </LinearLayout>
    <com.example.mdstyleprogress.MdStyleProgress
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="10dp"
         />
</RelativeLayout>

最后是我们的MainActivity调用

public class MainActivity extends AppCompatActivity {

    private MdStyleProgress progress;
    private Button btnLoading,btnSuccess,btnFail;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progress = (MdStyleProgress) findViewById(R.id.progress);
        //btnLoading = (Button) findViewById(R.id.loading);
        btnSuccess = (Button) findViewById(R.id.success);
        btnFail = (Button) findViewById(R.id.fail);
        /*btnLoading.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(progress.getStatus() != MdStyleProgress.Status.Loading){
                    progress.setStatus(MdStyleProgress.Status.Loading);
                }
            }
        });*/
        //成功状态
        btnSuccess.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(progress.getStatus() != MdStyleProgress.Status.LoadSuccess){
                    progress.setStatus(MdStyleProgress.Status.LoadSuccess);
                    progress.startAnima();
                }
            }
        });

        //失败状态
        btnFail.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(progress.getStatus() != MdStyleProgress.Status.LoadFail){
                    progress.setStatus(MdStyleProgress.Status.LoadFail);
                    progress.failAnima();
                }
            }
        });
    }
}

代码中已经注释的很清楚了，其中叉号的实现不是很漂亮，略显长，可适当调整下叉号的坐标值即可，这里我就不再微调了，关于坐标的计算如果有看不懂的，欢迎提出，也可以自己下载demo，断点调试下就明白了,随后即将源码奉上。1024送你一个漂亮的加载进度条。

猜你喜欢

转载自blog.csdn.net/xiaxiazaizai01/article/details/52914558
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022