The document discusses various techniques for customizing Canvas and View objects in Android, including: 1. The lifecycle of a View, including constructor, layout, measure, draw, and animation methods. 2. Creating circular progress indicators using Canvas, with techniques like animating drawing arcs and adding effects like blurring. 3. Avoiding square views by using paths with curves and drawing on non-rectangular canvases. 4. Improving performance by optimizing drawing operations and avoiding unnecessary invalidates.

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?