android實(shí)現(xiàn)簡(jiǎn)單儀表盤效果
本文實(shí)例為大家分享了android實(shí)現(xiàn)簡(jiǎn)單儀表盤效果的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)這個(gè)效果:
中間的文字很好寫,外層的進(jì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;//當(dāng)前進(jìn)度 private float maxProgress;//最大進(jìn)度 private float section;//分段 private float currentAngle;//當(dāng)前角度 private float lastAngle; private ValueAnimator progressAnimator;//圓弧動(dòng)畫 private int duration = 1000;//動(dòng)畫時(shí)長(zhǎng) private boolean isDefaultText;//是否設(shè)置文字顯示的值 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坐標(biāo)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,自定義設(shè)置字體顯示 * @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表示進(jìn)度條底層的顏色,app:circle_color表示進(jìn)度條上層的顏色,app:circle_bg_width表示進(jìn)度條底層的寬度,app:circle_width表示進(jìn)度條上層的寬度,app:max_progress='100'表示進(jìn)度條最大進(jìn)度是100,app:start_angle表示開始的角度,就是進(jìn)度條從哪個(gè)角度開始畫,如下圖所示
app:total_angle表示整個(gè)進(jìn)度條所需的角度.在代碼中設(shè)置旋轉(zhuǎn)的角度,圖中進(jìn)度為30%,由于在布局文件中設(shè)置的最大進(jìn)度是100`app:max_progress='100',所以進(jìn)行如下設(shè)置peocess.setCurrentProgress(30f)默認(rèn)情況下,進(jìn)度條中間顯示進(jìn)度條的值,如果需要自己寫值的畫,調(diào)用這個(gè)方法:process.setText(true, '中間的字');
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. JSP之表單提交get和post的區(qū)別詳解及實(shí)例2. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作?!钡脑幃悊栴}……3. ASP常用日期格式化函數(shù) FormatDate()4. HTML5 Canvas繪制圖形從入門到精通5. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. 概述IE和SQL2k開發(fā)一個(gè)XML聊天程序8. html加css樣式實(shí)現(xiàn)js美食項(xiàng)目首頁(yè)示例代碼9. CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效10. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera
