Showing Revision 7 created 02/23/2016 by sp8.

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

   02-12 Fixing_Overdraw_with_Canvas_API

3. 486 0:00 - 0:03
   Bây giờ chúng ta cùng
   trở lại với Android Studio.
4. 3189 0:03 - 0:06
   Xem lại tài nguyên
   cho DroidCardsView.
5. 5606 0:06 - 0:08
   Xin nhắc lại, đây là
   giao diện tùy chỉnh.
6. 7962 0:08 - 0:12
   Nhớ là nó nằm trong giao diện tùy chỉnh,
   ta dựng các thẻ chơi xếp chồng.
7. 11870 0:12 - 0:14
   Ví dụ, mỗi thẻ có ảnh
   bitmap của chính nó
8. 14480 0:14 - 0:18
   và ta vẽ chúng lên màn hình bằng cách
   ghi đè phương thức onDraw.
9. 19280 0:19 - 0:22
   Bây giờ xin nhớ rằng, việc ghi đè
   phương thức onDraw
10. 22320 0:22 - 0:26
    thì Android không thể tối ưu hóa
    quá trình kết xuất giao diện này
11. 25580 0:26 - 0:29
    nên công việc của nhà phát triển
    là phải cắt từng thẻ
12. 28720 0:29 - 0:31
    như nó hiển trên màn hình
    để tránh việc vẽ thừa thãi.
13. 32470 0:32 - 0:36
    May mắn thay, bộ lớp cơ sở API cho đúng
    những phương thức chúng ta cần để vẽ thẻ
14. 36010 0:36 - 0:38
    một cách hiệu quả hơn.
15. 38010 0:38 - 0:39
    Cùng xem tài liệu này.
16. 40520 0:41 - 0:45
    Chúng ta cùng dùng phương thức
    canvas.clipRect để cải tiến mã.
17. 45010 0:45 - 0:49
    Chúng ta sẽ sử dụng biến kiểu Variant
    tạo 4 tham số dạng Float.
18. 49272 0:49 - 0:51
    Chúng ta cùng trở lại
    Android Studio.
19. 51325 0:51 - 0:56
    Chúng ta cùng tinh chỉnh thẻ xếp chồng
    vậy nên giảm việc phải vẽ quá nhiều.
20. 56074 0:56 - 0:59
    Tôi sẽ sử dụng tính năng rất hữu ích
    trong Android Studio này để gọi
21. 59063 0:59 - 1:02
    một hiển thị khác, nên bạn có thể
    xem trạng trái trước và sau của mã.
22. 62212 1:02 - 1:06
    Chúng ta ở bảng so sánh
    các hiển thị, và hãy quan sát,
23. 65510 1:06 - 1:09
    chú ý kĩ vào phương thức onDraw,
    phương thức mà chúng ta đang ghi đè
24. 69180 1:09 - 1:12
    Chúng ta có trạng thái cũ
    của vòng lặp For ở bên trái
25. 71590 1:12 - 1:15
    nhưng hãy tập trung vào những cải tiến
    mà chúng ta sẽ tạo ở bên phải.
26. 75110 1:15 - 1:19
    Giờ, chúng ta lặp qua các thẻ
    và xem từng bước cải tiến.
27. 79100 1:19 - 1:23
    Số 1, đầu tiên, chúng ta sẽ
    tính toán vị trí của thẻ.
28. 83850 1:24 - 1:27
    Sau đó chúng ta cần gọi
    hàm canvas.save
29. 86736 1:27 - 1:29
    Hàm này sẽ lưu trạng thái
    của canvas đã tồn tại
30. 89491 1:29 - 1:31
    Nói cách khác,
31. 90549 1:31 - 1:36
    nó duy trì trạng thái hiện tại của
    màn hình trước khi ta làm clipRect.
32. 95691 1:36 - 1:37
    Khi chúng ta gọi
    phương thức clipRect
33. 97485 1:37 - 1:41
    đơn giản là chúng ta thực hiện
    một số phép hình học nhất định
34. 100664 1:41 - 1:44
    Khi ta truyền các tham số này,
    ta đơn giản yêu cầu hệ thống
35. 103580 1:44 - 1:47
    vẽ một phần của thẻ mà
    chúng ta muốn nhìn thấy
36. 107000 1:47 - 1:48
    Chắc rồi, phần còn
    lại lẽ bị ẩn đi
37. 109470 1:49 - 1:52
    Giờ thì, chỉ những phần của thẻ
    nằm trong khoảng giới hạn
38. 112250 1:52 - 1:55
    mà chúng ta vừa
    đặt ra mới được vẽ.
39. 114660 1:55 - 1:57
    Cuối cùng, chúng ta sẽ gọi
    phương thức canvas.restore,
40. 117012 1:57 - 2:00
    phương thức này sẽ chuyển Canvas
    lại trạng thái không bị cắt
41. 119890 2:00 - 2:01
    Nói cách khác,
42. 120650 2:01 - 2:04
    chúng ta sẽ khôi phục khoảng bị ẩn
    mà ta đã đặt lúc gọi phương thức clipRect
43. 124244 2:04 - 2:09
    Và chúng ta sẽ lặp vòng này
    cho tất cả bộ bài trừ lá trên cùng.
44. 128788 2:09 - 2:11
    Cụ thể, chúng ta sẽ xử lí
45. 131000 2:11 - 2:14
    thẻ cuối cùng khác với
    các lá còn lại ở dưới.
46. 133780 2:14 - 2:16
    Với cái này thì không
    cần phải xén hình
47. 136440 2:16 - 2:19
    nên chúng ta sẽ vẽ cả lá.
48. 138650 2:19 - 2:21
    Bạn có thể thấy điều đó
    qua câu lệnh này.
49. 141980 2:22 - 2:24
    Hãy tạo mã đã được cải tiến
50. 143800 2:24 - 2:25
    nếu giảm chồng điểm ảnh
51. 144560 2:25 - 2:25
    ta giảm rất nhiều hình vẽ thừa
52. 147660 2:28 - 2:29
    Được rồi, tuyệt vời
53. 148820 2:29 - 2:31
    Như bạn thấy đây, giảm được
    việc vẽ thừa rất nhiều.
54. 152130 2:32 - 2:35
    Tôi vọng đã làm rõ với bộ API Canvas,
    chúng ta có một cách
55. 155250 2:35 - 2:38
    để vẽ rất hiệu quả khi làm việc
    với các hiển thị tùy chọn.
56. 158350 2:38 - 2:42
    Nếu bạn muốn khám phá
    thêm về bộ API Canvas,
57. 161720 2:42 - 2:45
    hãy xem tài liệu hướng đầy đủ
    trong phần ghi chú của giáo viên.
58. 165170 2:45 - 2:48
    Các hiển thị như thế này rất tuyệt,
    nó có thể giúp chúng ta tạo ra
59. 168460 2:48 - 2:52
    trải nghiệm người dùng (UX) độc đáo
    và hấp dẫn, nhưng nhớ khai báo
60. 172480 2:52 - 2:56
    để giúp Android kết xuất các hiển thị
    một cách đẹp mắt hiệu quả
61. 176110 2:56 - 3:00
    Mỗi khi bạn tạo một hiển thị tùy chọn,
    hãy nhớ kiểm tra tình trạng vẽ thừa
62. 179800 3:00 - 3:02
    hãy sẵn sàng khôi phục nó,
    phương thức clipRect.
63. 181972 3:02 - 3:04
    Được rồi, rất tốt.
64. 184290 3:04 - 3:06
    Quay lại với Colt để
    biết về hơn về hiệu suất