android 仿汽车仪表盘

这个就是使用Paint和Canvas一个个画上去的,再加上动画,总体来说不难,就是变量多,所以看起来的时候要慢慢看,现在在这贴下代码

布局文件：

<?xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    >            android:id="@+id/seekbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingLeft="10px"        android:paddingRight="10px"        android:layout_marginTop="20px"        />            android:layout_width="300px"        android:layout_height="300px"        android:layout_marginTop="90px"        android:layout_marginLeft="60px"        >            android:id="@+id/carview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#8B5F65"         />

自定义veiw

package com.example.speeddemo;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.DashPathEffect;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;/** * Created by admin on 2016/8/28. */public class CarRecorderView extends View {    private static final String TAG = "CarRecorderView" ;    private LinearGradient linearGradient = null;    private Paint blackCirclePaint;    private int blackCirClePaintWidth = 8;    private Paint arcAnimPaint;    private Paint outerAnimPaint;    private Paint whiteCirclePaint ;    private Paint unitTextPaint;    private int whiteCirclePaintWidth = 24;    private Paint outerPaint;    private Paint linePaint;    private Paint textValuePaint;    private Paint interprogressPaint;    private int lineWidth = 5;    private Paint outerSmallPaint;    private RectF outerRectF;    private RectF outerAnimRectF ;    private Bitmap carBitmap;    private int width;    private int height;    private int min = 0;    private float value;    private long duration = 1000;    private long progressDelay = 350;    private int startAngle = 140;//开始的角度    private float plusAngle = 0;//经过的角度    private float maxAngle = 260f;//最大的角度    private float outerProgressValue = min;    private float lineInitValue = min;    private int max = 100;//最大进度值    private ValueAnimator lineAnim;    private ValueAnimator outerProgressAnim;    public CarRecorderView(Context context) {        super(context);    }    public CarRecorderView(Context context, AttributeSet attrs) {        super(context, attrs);        initPaint();        initAnim();    }    private void updateOuterProgressValue(float value) {        setOuterAnimAngle(value);    }    public void setOuterAnimAngle(float value){        this.plusAngle = (maxAngle * value) / max;        invalidate();    }    private void updateProgressText(float value) {        updateValue(value);    }    /**     * 初始化画笔     */    private void initPaint() {        arcAnimPaint = new Paint();        arcAnimPaint.setStrokeWidth(12);        arcAnimPaint.setColor(Color.parseColor("#1C86EE"));        arcAnimPaint.setAntiAlias(true);        arcAnimPaint.setStyle(Paint.Style.STROKE);        interprogressPaint = new Paint();        interprogressPaint.setStrokeWidth(12);        interprogressPaint.setColor(Color.RED);        interprogressPaint.setAntiAlias(true);        interprogressPaint.setStyle(Paint.Style.STROKE);        unitTextPaint = new Paint();        unitTextPaint.setColor(Color.parseColor("#DBDBDB"));        unitTextPaint.setTextSize(20);        unitTextPaint.setAntiAlias(true);        textValuePaint = new Paint();        textValuePaint.setColor(Color.parseColor("#DBDBDB"));        textValuePaint.setTextSize(40);        textValuePaint.setAntiAlias(true);        blackCirclePaint = new Paint();        blackCirclePaint.setColor(Color.parseColor("#1A1A1A"));        blackCirclePaint.setStrokeWidth(blackCirClePaintWidth);        blackCirclePaint.setStyle(Paint.Style.STROKE);        blackCirclePaint.setAntiAlias(true);        whiteCirclePaint = new Paint();        whiteCirclePaint.setColor(Color.parseColor("#1A1A1A"));        whiteCirclePaint.setStrokeWidth(whiteCirclePaintWidth);        whiteCirclePaint.setStyle(Paint.Style.STROKE);        whiteCirclePaint.setAntiAlias(true);        outerPaint = new Paint();        outerPaint.setColor(Color.parseColor("#080808"));        outerPaint.setStrokeWidth(whiteCirclePaintWidth);        outerPaint.setStyle(Paint.Style.STROKE);        outerPaint.setAntiAlias(true);        outerSmallPaint = new Paint();        outerSmallPaint.setColor(Color.RED);        outerSmallPaint.setStrokeWidth(whiteCirclePaintWidth-8);        outerSmallPaint.setStyle(Paint.Style.STROKE);        outerSmallPaint.setAntiAlias(true);        linePaint = new Paint();        linePaint.setColor(Color.parseColor("#20B2AA"));        linePaint.setStrokeWidth(lineWidth);        linePaint.setStyle(Paint.Style.FILL);        linePaint.setAntiAlias(true);        float[] intervals =new float[]{8,12};        DashPathEffect dashPathEffect = new DashPathEffect(intervals,0);        outerPaint.setPathEffect(dashPathEffect);        outerAnimPaint = new Paint();        outerAnimPaint.setColor(Color.RED);        outerAnimPaint.setPathEffect(dashPathEffect);        outerAnimPaint.setStyle(Paint.Style.STROKE);        outerAnimPaint.setAntiAlias(true);        outerAnimPaint.setStrokeWidth(whiteCirclePaintWidth);        carBitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.car1);        linearGradient = new LinearGradient(0, 0, 50, 50, new int[] {                Color.parseColor("#A4D3EE"),  Color.parseColor("#9400D3"), Color.parseColor("#43CD80"), Color.parseColor("#528B8B") }, null,                Shader.TileMode.REPEAT);        outerPaint.setShader(linearGradient);    }    public CarRecorderView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        widthSize = heightSize > widthSize ?widthSize:heightSize;        heightSize = heightSize > widthSize ?widthSize:heightSize;        setMeasuredDimension(widthSize,heightSize);        height = width = widthSize;   }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);            canvas.drawCircle(width/2,height/2,width/2,blackCirclePaint);            canvas.drawCircle(width/2,height/2,width/2-blackCirClePaintWidth,whiteCirclePaint);            canvas.drawBitmap(carBitmap,(width-carBitmap.getWidth())/2,(height-carBitmap.getHeight())/2,blackCirclePaint);           float toX = width / 2 + (float) Math.cos(Math.toRadians(plusAngle + startAngle)) * (width/2-whiteCirclePaintWidth-2);           float toY = width / 2 + (float) Math.sin(Math.toRadians(plusAngle + startAngle)) * (width/2-whiteCirclePaintWidth-2);           canvas.drawLine(width/2, width/2, toX, toY, linePaint);           canvas.drawText("kmh",width/2-50+textValuePaint.measureText("100"),height-45,unitTextPaint);           canvas.drawText(String.format("%.0f", lineInitValue),width/2-55,height-45,textValuePaint);            outerRectF = new RectF();            outerAnimRectF = new RectF();            outerAnimRectF.set(blackCirClePaintWidth-1-1,blackCirClePaintWidth-1-1,width-blackCirClePaintWidth+1+1,height-blackCirClePaintWidth+1+1);            outerRectF.set(blackCirClePaintWidth-1-1,blackCirClePaintWidth-1-1,width-blackCirClePaintWidth+1+1,height-blackCirClePaintWidth+1+1);            canvas.drawArc(outerRectF,startAngle,maxAngle,false,outerPaint);            canvas.drawArc(outerAnimRectF,startAngle,plusAngle,false,outerAnimPaint);           RectF rectF = new RectF(60,60,height-60,height-60);           canvas.drawArc(rectF,startAngle,maxAngle,false,interprogressPaint);          canvas.drawArc(rectF,startAngle,plusAngle,false,arcAnimPaint);    }    public void updateValue(float value) {        this.plusAngle = (maxAngle * value) / max;        invalidate();    }    public void startAnim(float value) {        this.value = value;        if (value <= max && value >= min) {            updateAnimValue();        }    }    private void updateAnimValue() {        if (lineAnim != null) {            outerProgressAnim.setFloatValues(outerProgressValue, value);            outerProgressAnim.setDuration(duration + progressDelay);            outerProgressAnim.start();            lineAnim.setFloatValues(lineInitValue, value);            lineAnim.setDuration(duration);            lineAnim.start();        }    }    /**     * 初始化属性动画     */    private void initAnim() {        outerProgressAnim = new ValueAnimator();        outerProgressAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                Float value = (Float) animation.getAnimatedValue();                updateOuterProgressValue(value);                outerProgressValue =  value;            }        });        lineAnim = new ValueAnimator();        lineAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener(){            @Override            public void onAnimationUpdate(ValueAnimator animation) {                Float value = (Float) animation.getAnimatedValue();                updateProgressText(value);                lineInitValue = value;            }        });    }}

使用入口：

package com.example.speeddemo;import android.app.Activity;import android.os.Bundle;import android.widget.SeekBar;public class MainActivity extends Activity {    private CarRecorderView carview;    private SeekBar seekbar;    private int speedValue = 0;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        seekbar = (SeekBar) findViewById(R.id.seekbar);        carview = (CarRecorderView) findViewById(R.id.carview);        seekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){            @Override            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {                carview.startAnim(progress);            }            @Override            public void onStartTrackingTouch(SeekBar seekBar) {            }            @Override            public void onStopTrackingTouch(SeekBar seekBar) {            }        });    }}

效果图：

发现这还有点bug,明天改下

更多相关文章

随机推荐