YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Russian subtitles

← 02-12 Fixing_Overdraw_with_Canvas_API

02-12 Fixing_Overdraw_with_Canvas_API

Get Embed Code
13 Languages

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

  1. Хорошо, вот мы вернулись в Android Studio,
  2. на страницу исходного кода
    для нашего DroidCardsView.
  3. И снова вот оно —
    наше пользовательское представление.
  4. Напоминаю, именно в этом
    пользовательском представлении
  5. мы создаем нашу стопку игральных карт.
  6. Например, у каждой карты
    есть свой рисунок,
  7. и мы рисуем их на экране,
    переопределяя метод onDraw.
  8. Запомните, после
    переопределения метода onDraw
  9. Android не сможет оптимизировать
    построение этого представления,
  10. поэтому наша задача как разработчиков —
    правильно обрезать каждую карту
  11. при ее перетаскивании на экран,
    чтобы избежать ненужного перерисовывания.
  12. К счастью, API Canvas предоставляет нам
    правильные методы,
  13. нужные для более эффективного рисования
    наших карт.
  14. Заглянем в документацию.
  15. Воспользуемся методом canvas.clipRect
    для улучшения нашего кода.
  16. Мы собираемся применить здесь
    этот вариант,
  17. принимающий в качестве параметров четыре
    числа с плавающей запятой.
  18. Хорошо, мы снова в Android Studio.
  19. Поправим то, как рисуется
    каждая из каскада карт,
  20. чтобы уменьшить перерисовку.
  21. Я собираюсь использовать эту изящную
    возможность Android Studio,
  22. чтобы загрузить другое представление,
    позволяющее видеть состояние кода
  23. до и после изменения.
  24. Теперь, находясь в сравнительном
    представлении, подробно рассмотрим
  25. метод onDraw, который мы переопределили.
  26. Слева находится старое состояние
    цикла,
  27. но давайте сфокусируемся на улучшениях,
    которые мы собираемся выполнить справа.
  28. Теперь, по ходу перебора карт в цикле,
    пройдемся по каждому из шагов улучшения.
  29. В первую очередь мы собираемся
    рассчитать положение карты.
  30. Затем нам нужно вызвать
    функцию canvas.save,
  31. которая сохранит текущее
    состояние нашего холста.
  32. Другими словами,
  33. она сохраняет состояние экрана,
    существовавшее до применения API clipRect.
  34. Теперь при вызове метода clipRect
    мы по существу налагаем
  35. некоторые геометрические ограничения.
  36. Передавая эти параметры,
    мы фактически приказываем системе
  37. рисовать только часть карты,
    которая должна быть видимой.
  38. Очевидно, оставшаяся ее
    часть будет скрыта.
  39. Теперь будут перерисовываться
    только те части карты,
  40. которые находятся внутри заданных границ.
  41. Наконец, мы собираемся
    вызвать метод canvas.restore,
  42. который должен вернуть холст
    в состояние до обрезки.
  43. Другими словами,
  44. он должен отменить ограничение,
    наложенное при вызове метода clipRect.
  45. А затем мы повторяем этот цикл для
    всех карт, кроме самой верхней.
  46. Теперь специально обработаем верхнюю
  47. или последнюю карту иначе,
    чем находящиеся под ней.
  48. Обрезка этой карты не нужна,
  49. поэтому двинемся дальше и нарисуем
    ее во всей полноте.
  50. Для этого используется показанная
    здесь инструкция.
  51. Хорошо, скомпилируем
    наш улучшенный код и посмотрим,
  52. удалось ли нам сократить
    количество перерисовок.
  53. Шикарно.
  54. Как можно видеть, перерисовок
    стало намного меньше.
  55. Теперь, я надеюсь, ясно,
    что API Canvas предоставляет нам
  56. простой способ быстрого рисования
    при работе
  57. с пользовательскими представлениями.
  58. О, если захочется узнать
    что-нибудь еще об API Canvas,
  59. обратитесь к полной документации
    в примечаниях инструктора.
  60. Итак, представления, подобные этому,
    отлично помогут нам в создании уникального
  61. и конкурентоспособного UX, но помните,
    мы должны соответствующим образом
  62. инструктировать Android, чтобы эффективно
    отобразить подобные представления.
  63. Поэтому при создании каждого представления
    обязательно проверяйте перерисовку
  64. и будьте готовы оживить старого
    друга, метод clipRect.
  65. Замечательно, отличная работа.
  66. Снова обратимся к Колту
    за дополнительной мудростью.