带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变

 

带你体验Android自定义圆形刻度罗盘 仪表盘 实现指针动态改变

转 https://blog.csdn.net/qq_30993595/article/details/78915115

 

近期有一个自定义View的功能，类似于仪表盘的模型，可以将指针动态指定到某一个刻度上，话不多说，先上图

 

先说下思路

1.先获取自定义的一些属性，初始化一些资源

2.在onMeasure中测量控件的具体大小

3.然后就在onDraw中先绘制有渐变色的圆弧形色带

4.再绘制几个大的刻度和刻度值

5.再绘制两个大刻度之间的小刻度

6.再绘制处于正中间的圆和三角形指针

7.最后绘制实时值

 

其实这也从侧面体现了一个自定义view的流程

1.继承View，重写构造方法

2.加载自定义属性和其它资源

3.重写onMeasure方法去确定控件的大小

4.重写onDraw方法去绘制

5.如果有点击事件的话，还得重写onTouchEvent或者dispatchTouchEvent去处理点击事件

 

来上代码吧，具体注释已经写的很详细了

 

1.  
   public class NoiseboardView extends View {
2.  
    
3.  
   final String TAG = "NoiseboardView";
4.  
    
5.  
   private int mRadius; // 圆弧半径
6.  
   private int mBigSliceCount; // 大份数
7.  
   private int mScaleCountInOneBigScale; // 相邻两个大刻度之间的小刻度个数
8.  
   private int mScaleColor; // 刻度颜色
9.  
   private int mScaleTextSize; // 刻度字体大小
10.  
    private String mUnitText = ""; // 单位
11.  
    private int mUnitTextSize; // 单位字体大小
12.  
    private int mMinValue; // 最小值
13.  
    private int mMaxValue; // 最大值
14.  
    private int mRibbonWidth; // 色条宽
15.  
     
16.  
    private int mStartAngle; // 起始角度
17.  
    private int mSweepAngle; // 扫过角度
18.  
     
19.  
    private int mPointerRadius; // 三角形指针半径
20.  
    private int mCircleRadius; // 中心圆半径
21.  
     
22.  
    private float mRealTimeValue = 0.0f; // 实时值
23.  
     
24.  
    private int mBigScaleRadius; // 大刻度半径
25.  
    private int mSmallScaleRadius; // 小刻度半径
26.  
    private int mNumScaleRadius; // 数字刻度半径
27.  
     
28.  
    private int mViewColor_green; // 字体颜色
29.  
    private int mViewColor_yellow; // 字体颜色
30.  
    private int mViewColor_orange; // 字体颜色
31.  
    private int mViewColor_red; // 字体颜色
32.  
     
33.  
    private int mViewWidth; // 控件宽度
34.  
    private int mViewHeight; // 控件高度
35.  
    private float mCenterX;//中心点圆坐标x
36.  
    private float mCenterY;//中心点圆坐标y
37.  
     
38.  
    private Paint mPaintScale;//圆盘上大小刻度画笔
39.  
    private Paint mPaintScaleText;//圆盘上刻度值画笔
40.  
    private Paint mPaintCirclePointer;//绘制中心圆，指针
41.  
    private Paint mPaintValue;//绘制实时值
42.  
    private Paint mPaintRibbon;//绘制色带
43.  
     
44.  
    private RectF mRectRibbon;//存储色带的矩形数据
45.  
    private Rect mRectScaleText;//存储刻度值的矩形数据
46.  
    private Path path;//绘制指针的路径
47.  
     
48.  
    private int mSmallScaleCount; // 小刻度总数
49.  
    private float mBigScaleAngle; // 相邻两个大刻度之间的角度
50.  
    private float mSmallScaleAngle; // 相邻两个小刻度之间的角度
51.  
     
52.  
    private String[] mGraduations; // 每个大刻度的刻度值
53.  
    private float initAngle;//指针实时角度
54.  
     
55.  
    private SweepGradient mSweepGradient ;//设置渐变
56.  
    private int[] color = new int[7];//渐变颜色组
57.  
     
58.  
    public NoiseboardView(Context context) {
59.  
    this(context, null);
60.  
    }
61.  
     
62.  
    public NoiseboardView(Context context, AttributeSet attrs) {
63.  
    this(context, attrs, 0);
64.  
    }
65.  
     
66.  
    public NoiseboardView(Context context, AttributeSet attrs, int defStyleAttr) {
67.  
    super(context, attrs, defStyleAttr);
68.  
    //自定义属性
69.  
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NoiseboardView, defStyleAttr, 0);
70.  
     
71.  
    mRadius = a.getDimensionPixelSize(R.styleable.NoiseboardView_radius, dpToPx(80));
72.  
    mBigSliceCount = a.getInteger(R.styleable.NoiseboardView_bigSliceCount, 5);
73.  
    mScaleCountInOneBigScale = a.getInteger(R.styleable.NoiseboardView_sliceCountInOneBigSlice, 5);
74.  
    mScaleColor = a.getColor(R.styleable.NoiseboardView_scaleColor, Color.WHITE);
75.  
    mScaleTextSize = a.getDimensionPixelSize(R.styleable.NoiseboardView_scaleTextSize, spToPx(12));
76.  
    mUnitText = a.getString(R.styleable.NoiseboardView_unitText);
77.  
    mUnitTextSize = a.getDimensionPixelSize(R.styleable.NoiseboardView_unitTextSize, spToPx(14));
78.  
    mMinValue = a.getInteger(R.styleable.NoiseboardView_minValue, 0);
79.  
    mMaxValue = a.getInteger(R.styleable.NoiseboardView_maxValue, 150);
80.  
    mRibbonWidth = a.getDimensionPixelSize(R.styleable.NoiseboardView_ribbonWidth, 0);
81.  
     
82.  
    a.recycle();
83.  
    init();
84.  
    }
85.  
     
86.  
    private void init() {
87.  
     
88.  
    //起始角度是从水平正方向即（钟表3点钟方向）开始从0算的，扫过的角度是按顺时针方向算
89.  
    mStartAngle = 175;
90.  
    mSweepAngle = 190;
91.  
     
92.  
    mPointerRadius = mRadius / 3 * 2;
93.  
    mCircleRadius = mRadius / 17;
94.  
     
95.  
    mSmallScaleRadius = mRadius - dpToPx(10);
96.  
    mBigScaleRadius = mRadius - dpToPx(18);
97.