Customized View series in personal development (click to View the collection if necessary)

  1. Android custom view first bullet (mimicking xiaomi step counting)
  2. Android custom View second bullet (rotating weight)
  3. Android custom View third bullet (anti-human ruler)
  4. Android custom View fourth bullet (Kotlin streaming layout)

Without further ado, above:

Lower left weight (rotating animation)

Without further ado, the code:

A. Custom View code

/** * Created by DYJ on 2017/9/21. */ public class MyCustomerView extends View{/** pointPaint; /** arcPaint */ Paint arcPaint; /** Paint bitmapPaint; /** Paint shaderPaint; /** Private Bitmap mBitmap; /** Custom Canvas, for the purpose of drawing overlapping effects */ private Canvas mCanvas; /** mArrowBitmap; /** control width */ int width; /** control height */ int height; /** radius */ int radius; /** int paintWidth; Float spaceAngle = 15; float spaceAngle = 15; Float currentAgent = 90; Float currentPercent = 0; float currentPercent = 0; ValueAnimator valueAnimator ; private Matrix mMatrix; Private int defaultDuration = 2000; private int defaultDuration = 2000; public MyCustomerView(Context context) { super(context); initView(context) ; } public MyCustomerView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); initView(context); } public MyCustomerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initView(context); } private void initView(Context context) { pointPaint = new Paint(); pointPaint.setStrokeWidth(3); pointPaint.setColor(Color.WHITE); pointPaint.setAntiAlias(true); bitmapPaint = new Paint() ; bitmapPaint.setStyle(Paint.Style.FILL); bitmapPaint.setAntiAlias(true); shaderPaint = new Paint() ; mArrowBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.icon_zhizhen); mMatrix = new Matrix() ; If (percent<1){percent=1; if (percent<1){percent=1; if (percent<1){percent=1; }else if (percent > 200){ percent = 200; } currentPercent = percent ; ValueAnimator = valueAnimator. OfFloat (0, 1 f) setDuration (defaultDuration); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float value = (float) animation.getAnimatedValue(); CurrentAgent = value * currentPercent * 1.8f; invalidate(); }}); valueAnimator.start(); } @Override protected void onDraw(Canvas canvas) { width = getWidth() ; height = getHeight() ; paintWidth = width / 4 ; radius = width / 4 + paintWidth/2; mBitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888) ; mCanvas = new Canvas(mBitmap) ; drawPoint(mCanvas); arcPaint = new Paint() ; arcPaint.setStyle(Paint.Style.STROKE); // Set the hollow arcpaint.setstrokeWidth (paintWidth); arcPaint.setAntiAlias(true); arcPaint.setColor((Color.parseColor("#B9B9B9"))); RectF rectF = new RectF(paintWidth/2,paintWidth/2, width - paintWidth/2 , width - paintWidth/2); Canvas. DrawArc (rectF, 179182, false, arcPaint); // Draw a semicircle background color mmatrix.reset (); mMatrix.postTranslate(width / 2 - 90, radius + paintWidth/2 - 30 ); / / draw the picture center adjusted to coincide with the current mCanvas. Rotate (radius, currentAgent, width / 2, + paintWidth / 2); mCanvas.drawBitmap(mArrowBitmap,mMatrix,bitmapPaint); mCanvas.save(); drawPercentColor(canvas,rectF) ; canvas.drawBitmap(mBitmap, 0, 0, null); } /** ** private void drawPercentColor(canvas, canvas) RectF rectF) { shaderPaint.setAntiAlias(true); shaderPaint.setStyle(Paint.Style.STROKE); shaderPaint.setStrokeWidth(paintWidth); shaderPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP)); //shaderPaint.setColor(yellowColor); SweepGradient sweepGradient = new SweepGradient(width/2,radius + paintWidth/2 + 10,new int[]{ Color.parseColor("#ccffff"),Color.parseColor("#00ff99"), },new float[] { 0, 1F, }) ; shaderPaint.setShader(sweepGradient) ; canvas.drawArc(rectF,179, currentAgent + 2,false,shaderPaint); } private void drawPoint(Canvas canvas) { for (int i = 0 ; i <= 10 ; i ++){ canvas.save() ; Canvas. Rotate (I * spaceangle-89.5 f + spaceAngle, width/2, paintWidth/2 + radius); Canvas. Methods like drawCircle (width / 2, paintWidth / 2, 8, pointPaint); canvas.restore(); }}}Copy the code

Let me give you another picture of the pointer, just in case I’m not being generous

2. Custom View usage

MyCustomerView myCustomerView; / / remember the findViewById () myCustomerView. SetPercent (66.45); / The author's weight is exposed hereCopy the code

Three. Add it to the layout and I don’t need to say more about this. Everybody knows it

Ok, that’s the end of today’s spinning weights. Welcome to the next one

Android custom View third bullet (anti-human ruler)