本文實例為大家分享了android實現(xiàn)簡單儀表盤效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)這個效果：

中間的文字很好寫，外層的進度條就需要自定義控件了，代碼如下：

public class CirCleProgressBar extends View { private Paint circlePaint; private Paint textPaint; private int circleColor;//圓弧顏色 private int circleBgColor;//圓弧背景顏色 private float circleWidth;//圓弧寬度 private float circleBgWidth;//圓弧背景寬度 private int textColor;//字體顏色 private float textSize;//字體大小 private int totalAngle;//總角度 private int startAngle;//開始角度 private float currentProgress;//當前進度 private float maxProgress;//最大進度 private float section;//分段 private float currentAngle;//當前角度 private float lastAngle; private ValueAnimator progressAnimator;//圓弧動畫 private int duration = 1000;//動畫時長 private boolean isDefaultText;//是否設置文字顯示的值 private String mTextValue;//字體顯示的值 public CirCleProgressBar(Context context) {this(context, null); } public CirCleProgressBar(Context context, AttributeSet attrs) {this(context, attrs, 0); } public CirCleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);circlePaint = new Paint();textPaint = new Paint();TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CirCleProgressBar);circleColor = typedArray.getColor(R.styleable.CirCleProgressBar_circle_color, Color.RED);circleBgColor = typedArray.getColor(R.styleable.CirCleProgressBar_circle_bg_color, Color.YELLOW);circleWidth = typedArray.getDimension(R.styleable.CirCleProgressBar_circle_width, 2);circleBgWidth = typedArray.getDimension(R.styleable.CirCleProgressBar_circle_bg_width, 2);textColor = typedArray.getColor(R.styleable.CirCleProgressBar_text_color, Color.BLUE);textSize = typedArray.getDimension(R.styleable.CirCleProgressBar_text_size, 10);totalAngle = typedArray.getInteger(R.styleable.CirCleProgressBar_total_angle, 360);startAngle = typedArray.getInteger(R.styleable.CirCleProgressBar_start_angle, 0);currentProgress = typedArray.getFloat(R.styleable.CirCleProgressBar_current_progress, 0);maxProgress = typedArray.getFloat(R.styleable.CirCleProgressBar_max_progress, 100);setCurrentProgress(currentProgress);setMaxProgress(maxProgress);//typedArray.recycle(); } @SuppressLint('DrawAllocation') @Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);/** * 畫最外層的大圓環(huán) */int centre = getWidth() / 2; // 獲取圓心的x坐標int radius = (int) (centre - circleWidth / 2) - 2; // 圓環(huán)的半徑circlePaint.setColor(circleBgColor);circlePaint.setStyle(Paint.Style.STROKE);circlePaint.setAntiAlias(true);circlePaint.setStrokeCap(Paint.Cap.ROUND);// 圓頭circlePaint.setStrokeWidth(circleBgWidth);RectF oval = new RectF(centre - radius - 1, centre - radius - 1, centre + radius + 1, centre + radius + 1); // 用于定義的圓弧的形狀和大小的界限//背景圓canvas.drawArc(oval, startAngle, totalAngle, false, circlePaint);//數(shù)據(jù)圓circlePaint.setStrokeWidth(circleWidth);circlePaint.setColor(circleColor);canvas.drawArc(oval, startAngle, currentAngle, false, circlePaint);//textPaint.setAntiAlias(true);textPaint.setColor(textColor);textPaint.setTextSize(textSize);float textWidth = textPaint.measureText((int) currentProgress + '');if(!isDefaultText) { canvas.drawText(String.valueOf((int)currentProgress), centre - textWidth / 2, centre + textSize / 2, textPaint);}else { canvas.drawText(mTextValue, centre - textWidth / 2, centre + textSize / 2, textPaint);}//invalidate(); } public float getMaxProgress(){return maxProgress; } public void setMaxProgress(float maxProgress){if(maxProgress < 0){ throw new IllegalArgumentException('max not less than 0');}this.maxProgress = maxProgress;section = totalAngle / maxProgress; } public void setAnimationDuration(int duration){this.duration = duration; } public void setCurrentProgress(float progress){if(progress >= 0){ this.currentProgress = progress; if(progress > maxProgress){progress = maxProgress; } lastAngle = currentAngle; setAnimation(lastAngle, progress * section, duration);} } private void setAnimation(float last, float current, int duration){progressAnimator = ValueAnimator.ofFloat(last, current);progressAnimator.setDuration(duration);progressAnimator.setTarget(currentAngle);progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) {currentAngle = (float) valueAnimator.getAnimatedValue();currentProgress = currentAngle / section; }});progressAnimator.start(); } public int getCircleColor() {return circleColor; } public void setCircleColor(int circleColor) {this.circleColor = circleColor; } public int getCircleBgColor() {return circleBgColor; } public void setCircleBgColor(int circleBgColor) {this.circleBgColor = circleBgColor; } public float getCircleWidth() {return circleWidth; } public void setCircleWidth(float circleWidth) {this.circleWidth = circleWidth; } public float getCircleBgWidth() {return circleBgWidth; } public void setCircleBgWidth(float circleBgWidth) {this.circleBgWidth = circleBgWidth; } public int getTextColor() {return textColor; } public void setTextColor(int textColor) {this.textColor = textColor; } public float getTextSize() {return textSize; } public void setTextSize(float textSize) {this.textSize = textSize; } /** * @param isText 為true,自定義設置字體顯示 * @param text */ public void setText(boolean isText,String text){isDefaultText = isText;mTextValue = text; }}

需要在attrs中添加:

<declare-styleable name='CirCleProgressBar'><attr name='circle_color' format='color'/><attr name='circle_bg_color' format='color'/><attr name='circle_width' format='dimension'/><attr name='circle_bg_width' format='dimension'/><attr name='text_color' format='color'/><attr name='text_size' format='dimension'/><attr name='total_angle' format='integer'/><attr name='start_angle' format='integer'/><attr name='current_progress' format='float'/><attr name='max_progress' format='float'/></declare-styleable>

使用方法：

在布局文件中直接引用

<com.fm.newcinema.view.CirCleProgressBarandroid: android:layout_width='139dp'android:layout_height='99dp'android:layout_gravity='center_horizontal'android:layout_marginTop='8dp'app:circle_bg_color='@color/gray_line_ff'app:circle_bg_width='10dp'app:circle_color='@color/main_blue'app:circle_width='10dp'app:max_progress='100'app:start_angle='160'app:text_color='@color/white_ff'app:text_size='@dimen/size_30px'app:total_angle='221'/>

其中app:circle_bg_color表示進度條底層的顏色,app:circle_color表示進度條上層的顏色,app:circle_bg_width表示進度條底層的寬度,app:circle_width表示進度條上層的寬度,app:max_progress='100'表示進度條最大進度是100,app:start_angle表示開始的角度,就是進度條從哪個角度開始畫,如下圖所示

app:total_angle表示整個進度條所需的角度.在代碼中設置旋轉的角度,圖中進度為30%,由于在布局文件中設置的最大進度是100`app:max_progress='100',所以進行如下設置peocess.setCurrentProgress(30f)默認情況下,進度條中間顯示進度條的值,如果需要自己寫值的畫,調用這個方法:process.setText(true, '中間的字');

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。