Canvas al ajillo

My expierence with canvas and drawing in Android

Transcript

1. @glomadrian Adrián García Lomas Canvas al ajillo
2. Lo que me gustaría que me hubieran contado sobre Canvas y Custom Views
3. Los detalles importan Adapta las vistas a las necesidades no las necesidades a las vistas Un mundo diferente y divertido
4. Ciclo de vida de una vista
5. Constructor onAttachedToWindow() onMeassure() onLayout()
6. dispatchDraw() draw() onDraw() invalidate()
7. Animación de carga
8. public Loading(Context context) { super(context); initialize(); } public Loading(Context context, AttributeSet attrs) { super(context, attrs); initialize(); } public Loading(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initialize(); } private void initialize() { circlePaint = new Paint(); circlePaint.setColor(circleColor); circlePaint.setAntiAlias(true); circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setStrokeWidth(circleStroke); }
9. ¿Qué pasa con el tamaño de la vista?
10. @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; createCircle(); } private void createCircleArea() { int circleAreawidth = width - strokeWidth; int circleAreaHeight = heihgt - strokeWidth; circleArea = new RectF(strokeWidth, strokeWidth, circleAreawidth, circleAreaHeight); }
11. onDraw(Canvas canvas) 16ms (60 fps) Evitar nuevas instancias No usar invalidate()
12. X Y • width / 2 , height / 2 • 0 , 0
13. private float circleStartDegree = 0; private float circleEndDegree = 360; private float actualCircleEndDegree = circleEndDegree; @Override protected void onDraw(Canvas canvas) { drawCircle(canvas); } private void drawCircle(Canvas canvas) { canvas.drawArc(circleArea, circleStartDegree, actualCircleEndDegree, false, circlePaint); }
14. circlePaint.setPathEffect(new DashPathEffect(new float[]{dashWidth, dashSpace}, 0));
15. Animación
16. private void initializeAnimator() { valueAnimator = ValueAnimator.ofInt(circleStartDegree, circleEndDegree); valueAnimator.setDuration(1000); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { int degreeValue = (int) valueAnimator.getAnimatedValue(); actualCircleEndDegree = degreeValue; invalidate(); } }); } private void initialize() { initializePainter(); initializeAnimator(); }
17. public void start(){ valueAnimator.start(); } ValueAnimator onUpdate degree = value invalidate onDraw()
18. Interpolators Acelerate Acelerate Decelerate BounceInterpolator OvershootInterpolator ...
19. valueAnimator.setInterpolator(new BounceInterpolator());
20. valueAnimator.setInterpolator(new DecelateInterpolator());
21. blurPainter = new Paint(circlePaint); blurPainter.setColor(Color.RED); blurPainter.setStrokeWidth(circleStroke * 1.20F); blurPainter.setMaskFilter(new BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.NORMAL)); private void drawCircle(Canvas canvas) { canvas.drawArc(internalCircle, circleStartDegree, circleEndDegree, false, blurPainter); canvas.drawArc(internalCircle, circleStartDegree, circleEndDegree, false, circlePaint); }
23. setLayerType(LAYER_TYPE_SOFTWARE, null);
24. Muerte a las vistas cuadradas
25. @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; createPath(); } private void createPath() { curvedPath = new Path(); curvedPath.moveTo(0, 0); curvedPath.lineTo(width, 0); } @Override protected void onDraw(Canvas canvas) { canvas.drawPath(curvedPath, pathPaint); }
26. curvedPath.quadTo(x1, y1, x2, y2); x1, y1 x2, y2
27. private void createPath() { float pathCurvatureY = height / 2; float middleX = width / 2; curvedPath = new Path(); curvedPath.moveTo(0, 0); curvedPath.quadTo(middleX, pathCurvatureY, width, 0); } 0,0 middleX, pathCurvatureY width, 0
28. private void createPath() { float pathCurvatureY = height / 2; float middleX = width / 2; curvedPath = new Path(); curvedPath.moveTo(0, 0); curvedPath.quadTo(middleX, pathCurvatureY, width, 0); curvedPath.lineTo(width, height); } width, height
29. private void createPath() { float pathCurvatureY = height / 2; float middleX = width / 2; curvedPath = new Path(); curvedPath.moveTo(0, 0); curvedPath.quadTo(middleX, pathCurvatureY, width, 0); curvedPath.lineTo(width, height); curvedPath.lineTo(0, height); } 0, height
30. private void createPath() { float pathCurvatureY = height / 2; float middleX = width / 2; curvedPath = new Path(); curvedPath.moveTo(0, 0); curvedPath.quadTo(middleX, pathCurvatureY, width, 0); curvedPath.lineTo(width, height); curvedPath.lineTo(0, height); curvedPath.close(); }
31. pathPaint.setStyle(Paint.Style.FILL);
34. Interceptando touch events dentro de un área
35. @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); width = w; height = h; createPath(); createTouchRegion(); } private void createTouchRegion() { RectF pathBoundsRect = new RectF(); curvedPath.computeBounds(rectF, true); regionToCheck = new Region(pathBoundsRect.left, pathBoundsRect.top, pathBoundsRect.right, pathBoundsRect.bottom); regionToCheck.setPath(curvedPath, regionToCheck); }
36. @Override public boolean onTouchEvent(MotionEvent event) { boolean result = false; int pointX = (int) event.getX(); int pointY = (int) event.getY(); if (isPointInsidePathArea(pointX, pointY)) { result = super.onTouchEvent(event); } return result; } private boolean isPointInsidePathArea(int x, int y) { return regionToCheck.contains(x, y); }
38. Usando path para animar
39. private float[] getPathCoordinates(Path path, float fraction) { float aCoordinates[] = { 0f, 0f }; PathMeasure pm = new PathMeasure(path, false); pm.getPosTan(pm.getLength() * fraction, aCoordinates, null); return aCoordinates; }
40. @Override public void onAnimationUpdate(ValueAnimator animation) { float value = animation.getAnimatedFraction(); float[] coordinates = getPathCoordinates(infinitePath, value); this.ballX = coordinates[0]; this.ballY = coordinates[1]; invalidate() }
42. Midiendo el rendimiento
47. onDraw() Recursos OpenGL Espera CPU 16 ms
48. private void onDraw(Canvas canvas) { heavyWork(); canvas.drawArc(internalCircle, circleStartDegree, circleEndDegree, false, circlePaint); }
49. Clean code también en vistas
50. @Override protected void onDraw(Canvas canvas) { if (mRunning) { if (mShowLeftEye) { canvas.drawCircle(mLeftEyePos[0], mLeftEyePos[1], mEyeCircleRadius, mCirclePaint); } if (mShowRightEye) { canvas.drawCircle(mRightEyePos[0], mRightEyePos[1], mEyeCircleRadius, mCirclePaint); } if (mFirstStep) { mArcPath.reset(); mArcPath.addArc(mRectF, mStartAngle, mSweepAngle); canvas.drawPath(mArcPath, mArcPaint); } else { mArcPath.reset(); mArcPath.addArc(mRectF, mStartAngle, mSweepAngle); canvas.drawPath(mArcPath, mArcPaint); } } else { canvas.drawCircle(mLeftEyePos[0], mLeftEyePos[1], mEyeCircleRadius, mCirclePaint); canvas.drawCircle(mRightEyePos[0], mRightEyePos[1], mEyeCircleRadius,mCirclePaint); canvas.drawPath(mArcPath, mArcPaint); } }
51. @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); externalCirclePainter.draw(canvas); internalCirclePainter.draw(canvas); progressPainter.draw(canvas); iconPainter.draw(canvas); }
52. ¿Preguntas?