-
Title:
02-12 Fixing_Overdraw_with_Canvas_API
-
Description:
02-12 Fixing_Overdraw_with_Canvas_API
-
Tudo bem, então
aqui estamos de volta no Android Studio,
-
revisando a origem para
nosso DroidCardsView.
-
De novo, esta é nossa vista customizada.
-
Apenas para relembrar, foi aqui
que construímos nossa pilha de cartas.
-
Por exemplo,
cada carta tem seu bitmap, e
-
nós as desenhamos na tela
alterando o método onDraw.
-
Agora, lembre,
alterar o método onDraw,
-
o Android não irá conseguir otimizar
a renderização desta vista, então
-
é nosso trabalho como desenvolvedores
recortar apropriadamente cada carta
-
como é desenhada na tela, para
evitar o overdraw desnecessário.
-
Felizmente, a API Canvas nos dá os
métodos corretos para desenhar
-
nossas cartas mais eficientemente.
-
Vamos dar uma olhada na documentação.
-
Vamos usar o método canvas.clipRect
para melhorar nosso código.
-
Vamo usar esta variante aqui
que recebe quatro floats como parâmetros.
-
Tudo bem,
agora estamos de volta no Android Studio.
-
Vamos ajustar como desenhamos cada cascata
de cartas para reduzir este overdraw.
-
Vou usar este recurso bacana
no Android Studio para trazer o diff view
-
para você ver o estado
antes e depois do código.
-
Beleza, aqui estamos em nosso
comparison view, e vamos olhar
-
particularmente para o método onDraw,
que é aquele que estamos alterando.
-
Temos o velho estado do ciclo for
aqui na esquerda,
-
mas vamos focar aqui nos melhoramentos
que vamos fazer na direita.
-
Conforme passamos pelas cartas,
vamos ver cada passo de melhoramento.
-
Número um, primeiro vamos
calcular a posição da carta.
-
De seguida, precisamos chamar esta
função canvas.save,
-
que vai salvar nosso
estado existente da tela.
-
Em outras palavras,
-
ela mantém o estado existente de sua
tela antes de aplicar o API clipRect.
-
Agora, quando chamamos
este método clipRect,
-
nós basicamente estamos fazendo algumas
restrições geométricas.
-
Quando passamos por estes parâmetros,
dizemos basicamente ao sistema
-
para apenas desenhar uma porção da carta
que nós queremos que seja visível.
-
Obviamente, o resto
estaria escondido.
-
Agora, apenas as partes da carta
que estão dentro dos limites
-
da restrição que definimos,
serão desenhadas.
-
Finalmente, vamos chamar a
canvas.restore,
-
que vai reverter a tela
para um estado de non-clipping.
-
Em outras palavras,
ele vai desfazer as restrições
-
que nós fizemos quando
chamamos o clipRect.
-
E em seguida, repetimos este loop para
todas as cartas exceto a de cima.
-
Especificamente, nós processamos
a carta de topo
-
ou a última carta de forma diferente
das suas semelhantes subjacentes.
-
Para esta, não é preciso recortar,
-
por isso vamos avançar e
desenhar ela completamente.
-
Você pode ver isso
por esta afirmação aqui.
-
Tudo bem,
vamos construir o código melhorado e
-
ver se reduzimos
um monte de overdraw.
-
Legal, impressionante.
-
Como você pode ver aqui,
muito menos overdraw.
-
Espero que seja claro que com o
API Canvas, nós temos uma simples
-
maneira de desenhar com eficiência
quando trabalhamos com custom views.
-
Ah, e caso você queira
explorar a API Canvas mais um pouco,
-
Certifique-se de revisar a documentação
completa nas notas do instrutor.
-
Agora, vistas como estas são ótimas
para nos ajudar a criar uma UX única
-
e atraente, mas
se lembre que devemos lembrar o sistema
-
e ajudar o Android a renderizar essas
views com bom desempenho.
-
Então, quando criar uma custom view
se certifique de verificar o overdraw, e
-
esteja pronto para reavivar seu amigo,
método clipRect.
-
Tudo bem, excelente trabalho.
-
Vamos voltar para o Colt para
mais sabedoria de desempenho.