English subtitles

← Optimizing with Canvas API

Get Embed Code
13 Languages

Showing Revision 4 created 05/25/2016 by Udacity Robot.

  1. All right, so
    here we are back in the Android Studio,
  2. reviewing the source for
    our DroidCardsView.
  3. Again, this is our custom view.
  4. Just to recall, it's in this custom view
    that we build our stacked playing cards.
  5. For example,
    each card has its own bitmap, and
  6. we draw them to the screen by
    overriding the onDraw method.
  7. Now remember,
    by overriding the onDraw method,
  8. Android won't be able to optimize
    the rendering of this view, so
  9. it's our job as developers
    to properly clip each card
  10. as it's drawn to the screen to
    avoid the unnecessary overdraw.
  11. Fortunately, the Canvas API gives us
    just the right methods we need to draw
  12. our cards more efficiently.
  13. Let's take a look at the documentation.
  14. Let's use the canvas.clipRect
    method to improve our code.
  15. We're going to use this variant here
    that takes four floats as parameters.
  16. All right,
    now we're back in Android Studio.
  17. Let's tweak how we draw each cascaded
    card so that we reduce this overdraw.
  18. I'm going to use this nifty feature
    within Android Studio to bring up a diff
  19. view, so you can see the before and
    after state of the code.
  20. 'Kay, all right, here we are in our
    comparison view, and let's look
  21. particularly at the onDraw method,
    which is the one we're overriding.
  22. We've got the old state of the for
    loop here on the left,
  23. but let's focus here on the improvements
    that we're going to make on the right.
  24. Now, as we iterate over the cards,
    let's go over each step of improvement.
  25. Number one, first, we're going to
    calculate the position for the card.
  26. Then we need to call this
    function canvas.save,
  27. which is going to save our
    existing canvas state.
  28. In other words,
  29. it maintains the existing state of your
    screen before we apply the clipRect API.
  30. Now, when we call this clipRect method,
  31. we're basically doing some
    geometric restrictions.
  32. When we pass in these parameters,
    we're basically telling the system
  33. to only draw a portion of the card
    that we want to see visible.
  34. Obviously, the rest of
    it would be hidden.
  35. Now, only the parts of the card that lie
    within the bounds of the restriction
  36. that we just put will get drawn.
  37. Finally, we're going to
    call canvas.restore,
  38. which is going to revert the canvas
    to a non-clipping state.
  39. In other words,
  40. it's going to undo the restriction that
    we put in place when we called clipRect.
  41. And then we repeat this loop for
    all the cards except the top one.
  42. Now specifically, we process the top or
  43. last card differently than
    its underlying siblings.
  44. For this one, no clipping is needed, so
  45. we're going to go ahead and
    draw it in its entirety.
  46. You can see that via
    the statement right here.
  47. All right,
    let's build our improved code and
  48. see if we've reduced
    a bunch of overdraw.
  49. All right, awesome.
  50. As you can see here, much less overdraw.
  51. Now I hope it's clear that with the
    Canvas API, we have a straightforward
  52. way to draw efficiently when
    working with custom views.
  53. Oh, and in case you want to
    explore the Canvas API some more,
  54. be sure to check out the full
    documentation in the instructor notes.
  55. Now, views like these are great for
    helping us create a unique and
  56. compelling UX, but
    remember that we must clue in the system
  57. to help Android render such
    views in a performant fashion.
  58. So whenever you're creating a custom
    view, be sure to check for overdraw, and
  59. be ready to revive your friend,
    the clipRect method.
  60. All right, awesome work.
  61. Let's head back to Colt for
    more perf wisdom.