手把手带你画一个时尚仪表盘 Android 自定义View

本文链接：https://blog.youkuaiyun.com/wingichoy/article/details/50468674

本文介绍如何在Android中实现一个自定义View，复现时尚仪表盘的效果。内容包括自定义属性、构造函数、测量过程以及绘制细节，如弧度、刻度、指针的计算和画布旋转技巧。同时强调了纸上画图对于理解自定义View的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拿到美工效果图，咱们程序员就得画得一模一样。为了不被老板喷，只能多练啊。

听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的。

转载请注明出处：http://blog.youkuaiyun.com/wingichoy/article/details/50468674

注意：每一篇博客都是建立在之前博客的基础知识上的，如果你刚接触自定义view。可以来说说自定义view简单学习的方式这里看我以前的文章。记录了我学习自定义view的过程，而且前几篇博客或多或少犯了一些错误（重复绘制，onDraw里new对象等等）。这里我并不想改正博文中的错误，因为些错误是大家经常会犯的，后来的博客都有指出这些错误，以及不再犯，这是一个学习的过程。所以我想把错误的经历记录下来。等成为高手回头看看当年的自己是多么菜。。也会有成就感。。

今天的效果图如下(左边是ui图右边是实现图)：

自我感觉总体效果还不错，至少大概画得一样了。上一个动态图：

其实这个效果实现起来也不是很难，就是计算坐标，弧度之类的可能会比较麻烦，这里分享写这个其中一张手稿，请无视掉很丑的字，其实做自定义view 还是要在纸上多画。所以希望大家也能这么画画，思路会很顺。

好的了，废话不多说，快开始。

首先自定义属性构造函数，测量什么的你肯定已经很熟练直接贴代码了，注释写的很清楚

public class PanelView extends View {
    private int mWidth;
    private int mHeight;

    private int mPercent;

    //刻度宽度
    private float mTikeWidth;

    //第二个弧的宽度
    private int mScendArcWidth;

    //最小圆的半径
    private int mMinCircleRadius;

    //文字矩形的宽
    private int mRectWidth;

    //文字矩形的高
    private int mRectHeight;


    //文字内容
    private String mText = "";

    //文字的大小
    private int mTextSize;

    //设置文字颜色
    private int mTextColor;
    private int mArcColor;

    //小圆和指针颜色
    private int mMinCircleColor;

    //刻度的个数
    private int mTikeCount;

    private Context mContext;

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

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

    public PanelView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.PanelView,defStyleAttr,0);
        mArcColor = a.getColor(R.stylea