Showing Revision 2 created 12/25/2015 by sp15.

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

   02-12 Fixing_Overdraw_with_Canvas_API

3. 486 0:00 - 0:03
   Хорошо, вот мы вернулись в Android Studio,
4. 3189 0:03 - 0:06
   на страницу исходного кода
   для нашего DroidCardsView.
5. 6006 0:06 - 0:08
   И снова вот оно —
   наше пользовательское представление.
6. 8162 0:08 - 0:10
   Напоминаю, именно в этом
   пользовательском представлении
7. 10382 0:10 - 0:12
   мы создаем нашу стопку игральных карт.
8. 12170 0:12 - 0:14
   Например, у каждой карты
   есть свой рисунок,
9. 14480 0:14 - 0:18
   и мы рисуем их на экране,
   переопределяя метод onDraw.
10. 19280 0:19 - 0:22
    Запомните, после
    переопределения метода onDraw
11. 22320 0:22 - 0:26
    Android не сможет оптимизировать
    построение этого представления,
12. 25580 0:26 - 0:29
    поэтому наша задача как разработчиков —
    правильно обрезать каждую карту
13. 28720 0:29 - 0:32
    при ее перетаскивании на экран,
    чтобы избежать ненужного перерисовывания.
14. 32470 0:32 - 0:36
    К счастью, API Canvas предоставляет нам
    правильные методы,
15. 36010 0:36 - 0:38
    нужные для более эффективного рисования
    наших карт.
16. 38010 0:38 - 0:39
    Заглянем в документацию.
17. 40520 0:41 - 0:45
    Воспользуемся методом canvas.clipRect
    для улучшения нашего кода.
18. 44710 0:45 - 0:46
    Мы собираемся применить здесь
    этот вариант,
19. 46441 0:46 - 0:49
    принимающий в качестве параметров четыре
    числа с плавающей запятой.
20. 49872 0:50 - 0:51
    Хорошо, мы снова в Android Studio.
21. 51325 0:51 - 0:54
    Поправим то, как рисуется
    каждая из каскада карт,
22. 53995 0:54 - 0:55
    чтобы уменьшить перерисовку.
23. 55874 0:56 - 0:58
    Я собираюсь использовать эту изящную
    возможность Android Studio,
24. 58463 0:58 - 1:01
    чтобы загрузить другое представление,
    позволяющее видеть состояние кода
25. 61338 1:01 - 1:02
    до и после изменения.
26. 62912 1:03 - 1:06
    Теперь, находясь в сравнительном
    представлении, подробно рассмотрим
27. 65910 1:06 - 1:09
    метод onDraw, который мы переопределили.
28. 68980 1:09 - 1:12
    Слева находится старое состояние
    цикла,
29. 71690 1:12 - 1:15
    но давайте сфокусируемся на улучшениях,
    которые мы собираемся выполнить справа.
30. 75010 1:15 - 1:18
    Теперь, по ходу перебора карт в цикле,
    пройдемся по каждому из шагов улучшения.
31. 79500 1:20 - 1:23
    В первую очередь мы собираемся
    рассчитать положение карты.
32. 83850 1:24 - 1:27
    Затем нам нужно вызвать
    функцию canvas.save,
33. 86736 1:27 - 1:29
    которая сохранит текущее
    состояние нашего холста.
34. 89491 1:29 - 1:31
    Другими словами,
35. 90549 1:31 - 1:36
    она сохраняет состояние экрана,
    существовавшее до применения API clipRect.
36. 95691 1:36 - 1:38
    Теперь при вызове метода clipRect
    мы по существу налагаем
37. 98185 1:38 - 1:41
    некоторые геометрические ограничения.
38. 100664 1:41 - 1:44
    Передавая эти параметры,
    мы фактически приказываем системе
39. 103580 1:44 - 1:47
    рисовать только часть карты,
    которая должна быть видимой.
40. 107000 1:47 - 1:49
    Очевидно, оставшаяся ее
    часть будет скрыта.
41. 109470 1:49 - 1:52
    Теперь будут перерисовываться
    только те части карты,
42. 112250 1:52 - 1:55
    которые находятся внутри заданных границ.
43. 114660 1:55 - 1:57
    Наконец, мы собираемся
    вызвать метод canvas.restore,
44. 117012 1:57 - 2:00
    который должен вернуть холст
    в состояние до обрезки.
45. 119890 2:00 - 2:01
    Другими словами,
46. 120950 2:01 - 2:04
    он должен отменить ограничение,
    наложенное при вызове метода clipRect.
47. 124244 2:04 - 2:09
    А затем мы повторяем этот цикл для
    всех карт, кроме самой верхней.
48. 128788 2:09 - 2:11
    Теперь специально обработаем верхнюю
49. 131000 2:11 - 2:14
    или последнюю карту иначе,
    чем находящиеся под ней.
50. 133780 2:14 - 2:16
    Обрезка этой карты не нужна,
51. 136440 2:16 - 2:19
    поэтому двинемся дальше и нарисуем
    ее во всей полноте.
52. 138950 2:19 - 2:21
    Для этого используется показанная
    здесь инструкция.
53. 141980 2:22 - 2:24
    Хорошо, скомпилируем
    наш улучшенный код и посмотрим,
54. 144100 2:24 - 2:26
    удалось ли нам сократить
    количество перерисовок.
55. 147660 2:28 - 2:29
    Шикарно.
56. 148820 2:29 - 2:31
    Как можно видеть, перерисовок
    стало намного меньше.
57. 151730 2:32 - 2:35
    Теперь, я надеюсь, ясно,
    что API Canvas предоставляет нам
58. 154850 2:35 - 2:37
    простой способ быстрого рисования
    при работе
59. 156729 2:37 - 2:38
    с пользовательскими представлениями.
60. 158450 2:38 - 2:41
    О, если захочется узнать
    что-нибудь еще об API Canvas,
61. 161120 2:41 - 2:44
    обратитесь к полной документации
    в примечаниях инструктора.
62. 165170 2:45 - 2:48
    Итак, представления, подобные этому,
    отлично помогут нам в создании уникального
63. 168460 2:48 - 2:52
    и конкурентоспособного UX, но помните,
    мы должны соответствующим образом
64. 172480 2:52 - 2:56
    инструктировать Android, чтобы эффективно
    отобразить подобные представления.
65. 176110 2:56 - 3:00
    Поэтому при создании каждого представления
    обязательно проверяйте перерисовку
66. 179800 3:00 - 3:02
    и будьте готовы оживить старого
    друга, метод clipRect.
67. 182772 3:03 - 3:05
    Замечательно, отличная работа.
68. 184590 3:05 - 3:07
    Снова обратимся к Колту
    за дополнительной мудростью.