Android自定义仪表盘

最新推荐文章于 2024-08-22 00:05:28 发布

CODINGOTW

最新推荐文章于 2024-08-22 00:05:28 发布

阅读量1.1k

点赞数 2

分类专栏：自定义控件文章标签： Android 仪表盘 dashbord 自定义转盘

本文链接：https://blog.csdn.net/ChenQi1993/article/details/53502301

版权

本文记录了如何根据同学需求，实现一个具有特定效果的仪表盘。内容包括仪表盘的设计和实现过程，以及项目的GitHub源码链接，供读者参考和学习。

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

效果展示

需求
应同学需求，要实现一个这样的仪表盘，同学在网上看了很多，没有找到合适的，正好我也比较感兴趣，所以帮忙画了一个，没什么技术含量，只是记录一下。
具体实现


/**
 * 仪表盘View
 * <p>
 * Created by Chenqi on 16/10/26 10:46.
 */

public class DashBoardView extends View {
   
    /**
     * 屏幕密度
     */
    private float mDensity;

    /**
     * 画笔
     */
    private Paint mPaint;

    /**
     * 需要绘制的总数
     */
    int mTotalDegrees = 0;

    /**
     * 仪表盘标题
     */
    String mTitle = "您的额度";

    /**
     * 仪表盘最大数值
     */
    int mMaxValue = 10000;

    /**
     * 按钮文字
     */
    String mBtnText = "提升额度";

    /**
     * 按钮绘制范围
     */
    RectF mBtnRectf;

    /**
     * 绘制进度
     */
    private int mDrawDegrees = 0;

    public DashBoardView(Context context) {
   
        super(context);
        init();
    }

    public DashBoardView(Context context, AttributeSet attrs) 
    {
   
        super(context, attrs);
        init();
    }

    public DashBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
   
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
   
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int deltaX, deltaY;
        int min = Math.min(width, height);
        deltaX = (width - min) / 2 + 6;
        deltaY = (height - min) / 2 + 6;
        mPaint.setStyle(Paint.Style.STROKE);

        //绘制表盘底色
        float deltaX0 = deltaX + min / 50 * mDensity + 0.5f;
        float deltaY0 = deltaY + min / 50 * mDensity + 0.5f;
        mPaint.setStrokeWidth(height > width ? 2 * (deltaX0 - 6) : 2 * (deltaY0 - 6));
        mPaint.setColor(Color.rgb(50, 166, 210));
        RectF rectF3 = new RectF(deltaX0, deltaY0, width - deltaX0, height - deltaY0);
        canvas.drawArc(rectF3, -210f, 240f, false, mPaint);

        //绘制最外面一条弧线
        mPaint.setStrokeWidth(3);
        RectF rectF1 = new RectF(deltaX - 3f, deltaY - 3f, width - deltaX + 3f, height - deltaY + 3f);
        canvas.drawArc(rectF1, -210f, 240f, false, mPaint);

        //绘制最里面一条弧线
        deltaX += min / 25 * mDensity + 0.5f;
        deltaY