Android 自定义控件仿支付宝芝麻信用的刻度盘

最新推荐文章于 2024-09-19 08:25:16 发布

cekiasoo

最新推荐文章于 2024-09-19 08:25:16 发布

阅读量4.6k

点赞数 1

分类专栏： Android 开发 Android 自定义控件文章标签： Android 自定义控件支付宝芝麻信用刻度盘

本文链接：https://blog.csdn.net/cekiasoo/article/details/55823287

版权

本文介绍了如何在Android中模仿支付宝芝麻信用界面的刻度盘控件。作者通过分析芝麻信用界面，详细讲解了刻度盘的设计原理，包括圆弧、渐变、小圆点和分度的绘制。并展示了最终实现的效果，同时提供了自定义属性、尺寸计算和绘图方法等关键步骤。

摘要由CSDN通过智能技术生成

一、前言

最近在看芝麻信用的时候突发奇想自己做一个芝麻信用的界面然后可以用来装装逼，可惜的是把支付宝解开来没发现相关的界面图片，虽然是这样但也不影响到咱的动手能力，好了，进入正题。

一、分析

来看看芝麻信用的界面先。

可以看到有一个外面有个圆弧，前面一段是渐变的，后面一段颜色浅一些没有渐变的，没有渐变的在渐变的底下，圆弧上还有个小圆点，我们放大圆点这里再看，

其实这个圆点应该是用张图片来做的。

里面是个由一个点一个点组成的圆弧，从上面的放大图也可以看出这不是圆点而是像小矩形的点，总共有56个点，已走过的点比未走过的点的颜色要深。

这张图是上个版本的芝麻信用的刻度盘，可以看出这个盘如果是圆形的话，大刻度的就是分为8份，每一份就是45度，这里有5份，所以这个盘为225度，现在的版本应该也是一样225度，在这个版本可以看出分数是从350开始到950，350到550为一个大刻度，每一分就是0.225°；550到600为一个大刻度，600到650为一个大刻度，650到700为一个大刻度，这三个间隔是相同的，就是550到700的每一分是0.9°；700到950为一个大刻度，每一分占0.18°。

接下来还有个小指针，再里面就是文字了，

用ps开启网格看下，文字的位置就很清楚了。

二、效果

来看看实现后的效果先。

三、实现

（一）自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--刻度圆弧半径-->
    <attr name="scaleArcRadius" format="dimension" />
    <!--刻度圆弧的宽度-->
    <attr name="scaleArcWidth" format="dimension" />
    <!--进度圆弧的半径-->
    <attr name="progressArcRadius" format="dimension" />
    <!--进度圆弧的宽度-->
    <attr name="progressArcWidth" format="dimension" />
    <!--BETA的字体大小-->
    <attr name="betaTextSize" format="dimension" />
    <!--信用级别的字体大小-->
    <attr name="creditLevelTextSize" format="dimension" />
    <!--信用分数的字体大小-->
    <attr name="creditScoreTextSize" format="dimension" />
    <!--评估时间的字体大小-->
    <attr name="evaluationTimeTextSize" format="dimension" />
    <!--字上下行之间的间隔-->
    <attr name="textSpacing" format="dimension" />
    <!--箭头与圆弧的间隔-->
    <attr name="arrowSpacing" format="dimension" />
    <declare-styleable name="DialView">
        <attr name="scaleArcRadius" />
        <attr name="scaleArcWidth" />
        <attr name="progressArcRadius" />
        <attr name="progressArcWidth" />
        <attr name="betaTextSize" />
        <attr name="creditLevelTextSize" />
        <attr name="creditScoreTextSize" />
        <attr name="evaluationTimeTextSize" />
        <attr name="textSpacing" />
        <attr name="arrowSpacing" />
    </declare-styleable>
</resources>

（二）解析属性

public class DialView extends View {

    /**
     * 圆弧的度数
     */
    private final static float TOTAL_ANGLE = 225.0f;
    /**
     * 刻度圆弧有56个点
     */
    private final static int SCALE_COUNT = 56;

    private final static String CREDIT_LEVEL[] = {"信用较差", "信用中等", "信用良好", "信用优秀", "信用极好"};

    private final static String BETA = "BETA";

    private final static String EVALUATION_TIME = "评估时间:";

    private final static int MIN_ALPHA = 0;

    private final static int MAX_ALPHA = 255;

    private final static int RED = 255;

    private final static int GREEN = 255;

    private final static int BLUE = 255;

    private final static int COLOR_TRANSPARENT = Color.argb(MIN_ALPHA, RED, GREEN, BLUE);

    private final static int COLOR_WHITE = Color.argb(MAX_ALPHA, RED, GREEN, BLUE);
    /**
     * 渐变进度圆弧的颜色
     */
    private final static int GRADIENT_COLORS[] = {COLOR_TRANSPARENT, COLOR_TRANSPARENT, COLOR_WHITE, COLOR_WHITE, COLOR_WHITE, COLOR_WHITE};
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 刻度圆弧的半径
     */
    private int mScaleArcRadius;
    /**
     * 刻度圆弧的宽度
     */
    private int mScaleArcWidth;
    /**
     * 进度圆弧的半径
     */
    private int mProgressArcRadius;
    /**
     * 进度圆弧的宽度
     */
    private int mProgressArcWidth;
    /**
     * 进度圆弧上的小圆点的半径
     */
    private int mBallOverstepWidth;
    /**
     * BETA的字体大小
     */
    private int mBetaTextSize;
    /**
     * 信用级别的字体大小
     */
    private int mCreditLevelTextSize;
    /**
     * 信用分数的字体大小
     */
    private int mCreditScoreTextSize;
    /**
     * 评估时间的字体大小
     */
    private int mEvaluationTimeTextSize;
    /**
     * 字上下行的间隔
     */
    private int mTextSpacing;
    /**
     * 箭头与圆弧的间隔
     */
    private int mArrowSpacing;
    /**
     * 信用分数
     */
    private int mCreditScore = 666;

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

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

    public DialView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        parseAttr(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
    }

    /**
     * 解析属性
     *
     * @param context      Context
     * @param attrs        AttributeSet
     * @param defStyleAttr defStyleAttr
     */
    private void parseAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray _TypedArray = context.obtainStyledAttributes(attrs, R.styleable.DialView, defStyleAttr, 0);
        mScaleArcRadius = _TypedArray.getDimensionPixelSize(R.styleable.DialView_scaleArcRadius, dp2px(context, 100));
        mScaleArcWidth = _TypedArray.getDimensionPixelSize(R.styleable.DialView_scaleArcWidth, dp2px(context, 2));
        mProgressArcRadius = _TypedArray.getDimensionPixelSize(R.styleable.DialView_progressArcRadius, dp2px(context, 105));
        mProgressArcWidth = _TypedArray.getDimensionPixelSize(R.styleable.DialView_progressArcWidth, dp2px(context, 1));
        mBetaTextSize = _TypedArray.getDimensionPixelSize(R.styleable.DialView_betaTextSize, dp2px(context, 12));
        mCreditLevelTextSize = _TypedArray.getDimensionPixelSize(R.styleable.DialView_creditLevelTextSize, dp2px(context, 18));
        mCreditScoreTextSize = _TypedArray.getDimensionPixelSize(R.styleable.DialView_creditScoreTextSize, dp2px(context, 40));
        mEvaluationTimeTextSize = _TypedArray.getDimensionPixelSize(R.styleable.DialView_evaluationTimeTextSize, dp2px(context, 12));
        mTextSpacing = _TypedArray.getDimensionPixelSize(R.styleable.DialView_textSpacing, dp2px(context, 12));
        mArrowSpacing = _TypedArray.getDimensionPixelSize(R.styleable.DialView_arrowSpacing, dp2px(context, 5));