Showing Revision 6 created 02/13/2016 by QA_SP_6_PT_BR.

1. Title:
   02-12 Fixing_Overdraw_with_Canvas_API
2. Description:

   02-12 Fixing_Overdraw_with_Canvas_API

3. 486 0:00 - 0:03
   Tudo bem, então
   aqui estamos de volta no Android Studio,
4. 3189 0:03 - 0:06
   revisando a origem para
   nosso DroidCardsView.
5. 5606 0:06 - 0:08
   De novo, esta é nossa vista customizada.
6. 7962 0:08 - 0:12
   Apenas para relembrar, foi aqui
   que construímos nossa pilha de cartas.
7. 11870 0:12 - 0:14
   Por exemplo,
   cada carta tem seu bitmap, e
8. 14480 0:14 - 0:18
   nós as desenhamos na tela
   alterando o método onDraw.
9. 19280 0:19 - 0:22
   Agora, lembre,
   alterar o método onDraw,
10. 22320 0:22 - 0:26
    o Android não irá conseguir otimizar
    a renderização desta vista, então
11. 25580 0:26 - 0:29
    é nosso trabalho como desenvolvedores
    recortar apropriadamente cada carta
12. 28720 0:29 - 0:31
    como é desenhada na tela, para
    evitar o overdraw desnecessário.
13. 32470 0:32 - 0:36
    Felizmente, a API Canvas nos dá os
    métodos corretos para desenhar
14. 36010 0:36 - 0:38
    nossas cartas mais eficientemente.
15. 38010 0:38 - 0:40
    Vamos dar uma olhada na documentação.
16. 40520 0:41 - 0:45
    Vamos usar o método canvas.clipRect
    para melhorar nosso código.
17. 45010 0:45 - 0:49
    Vamo usar esta variante aqui
    que recebe quatro floats como parâmetros.
18. 49272 0:49 - 0:51
    Tudo bem,
    agora estamos de volta no Android Studio.
19. 51325 0:51 - 0:56
    Vamos ajustar como desenhamos cada cascata
    de cartas para reduzir este overdraw.
20. 56074 0:56 - 0:59
    Vou usar este recurso bacana
    no Android Studio para trazer o diff view
21. 59063 0:59 - 1:02
    para você ver o estado
    antes e depois do código.
22. 62212 1:02 - 1:06
    Beleza, aqui estamos em nosso
    comparison view, e vamos olhar
23. 65510 1:06 - 1:09
    particularmente para o método onDraw,
    que é aquele que estamos alterando.
24. 69180 1:09 - 1:12
    Temos o velho estado do ciclo for
    aqui na esquerda,
25. 71590 1:12 - 1:15
    mas vamos focar aqui nos melhoramentos
    que vamos fazer na direita.
26. 75110 1:15 - 1:19
    Conforme passamos pelas cartas,
    vamos ver cada passo de melhoramento.
27. 79100 1:19 - 1:23
    Número um, primeiro vamos
    calcular a posição da carta.
28. 83850 1:24 - 1:27
    De seguida, precisamos chamar esta
    função canvas.save,
29. 86736 1:27 - 1:29
    que vai salvar nosso
    estado existente da tela.
30. 89491 1:29 - 1:31
    Em outras palavras,
31. 90549 1:31 - 1:36
    ela mantém o estado existente de sua
    tela antes de aplicar o API clipRect.
32. 95691 1:36 - 1:37
    Agora, quando chamamos
    este método clipRect,
33. 97485 1:37 - 1:41
    nós basicamente estamos fazendo algumas
    restrições geométricas.
34. 100664 1:41 - 1:44
    Quando passamos por estes parâmetros,
    dizemos basicamente ao sistema
35. 103580 1:44 - 1:47
    para apenas desenhar uma porção da carta
    que nós queremos que seja visível.
36. 107000 1:47 - 1:49
    Obviamente, o resto
    estaria escondido.
37. 109470 1:49 - 1:52
    Agora, apenas as partes da carta
    que estão dentro dos limites
38. 112250 1:52 - 1:55
    da restrição que definimos,
    serão desenhadas.
39. 114660 1:55 - 1:57
    Finalmente, vamos chamar a
    canvas.restore,
40. 117012 1:57 - 2:00
    que vai reverter a tela
    para um estado de non-clipping.
41. 119890 2:00 - 2:02
    Em outras palavras,
    ele vai desfazer as restrições
42. 121870 2:02 - 2:04
    que nós fizemos quando
    chamamos o clipRect.
43. 124244 2:04 - 2:09
    E em seguida, repetimos este loop para
    todas as cartas exceto a de cima.
44. 128788 2:09 - 2:11
    Especificamente, nós processamos
    a carta de topo
45. 131000 2:11 - 2:14
    ou a última carta de forma diferente
    das suas semelhantes subjacentes.
46. 133780 2:14 - 2:16
    Para esta, não é preciso recortar,
47. 136440 2:16 - 2:19
    por isso vamos avançar e
    desenhar ela completamente.
48. 138650 2:19 - 2:21
    Você pode ver isso
    por esta afirmação aqui.
49. 141980 2:22 - 2:24
    Tudo bem,
    vamos construir o código melhorado e
50. 143800 2:24 - 2:25
    ver se reduzimos
    um monte de overdraw.
51. 147660 2:28 - 2:29
    Legal, impressionante.
52. 148820 2:29 - 2:31
    Como você pode ver aqui,
    muito menos overdraw.
53. 152130 2:32 - 2:35
    Espero que seja claro que com o
    API Canvas, nós temos uma simples
54. 155250 2:35 - 2:38
    maneira de desenhar com eficiência
    quando trabalhamos com custom views.
55. 158350 2:38 - 2:42
    Ah, e caso você queira
    explorar a API Canvas mais um pouco,
56. 161720 2:42 - 2:45
    Certifique-se de revisar a documentação
    completa nas notas do instrutor.
57. 165170 2:45 - 2:48
    Agora, vistas como estas são ótimas
    para nos ajudar a criar uma UX única
58. 168460 2:48 - 2:52
    e atraente, mas
    se lembre que devemos lembrar o sistema
59. 172480 2:52 - 2:56
    e ajudar o Android a renderizar essas
    views com bom desempenho.
60. 176110 2:56 - 3:00
    Então, quando criar uma custom view
    se certifique de verificar o overdraw, e
61. 179800 3:00 - 3:02
    esteja pronto para reavivar seu amigo,
    método clipRect.
62. 182072 3:02 - 3:04
    Tudo bem, excelente trabalho.
63. 184390 3:04 - 3:07
    Vamos voltar para o Colt para
    mais sabedoria de desempenho.