1
00:00:00,486 --> 00:00:03,189
好了 我們現在回到了
Android Studio

2
00:00:03,189 --> 00:00:05,606
我們來檢視DroidCardsView的編碼

3
00:00:05,606 --> 00:00:07,962
再次強調 這是我們的自訂視圖

4
00:00:07,962 --> 00:00:11,870
我們回顧一下 這是在自訂視圖裡
建立的一疊牌

5
00:00:11,870 --> 00:00:14,480
舉例來說 每張牌會有自己的點陣圖

6
00:00:14,480 --> 00:00:17,910
而我們是透過覆蓋onDraw方法
來將它們繪製到螢幕上

7
00:00:19,280 --> 00:00:22,320
記住 我們覆蓋了onDraw方法以後

8
00:00:22,320 --> 00:00:25,580
安卓就無法在彩現這視覺時進行優化

9
00:00:25,580 --> 00:00:28,720
這會是我們身為開發人員的工作

10
00:00:28,720 --> 00:00:31,200
來正確裁剪每張繪製到畫面上的牌
並避免不必要的重複繪製

11
00:00:32,470 --> 00:00:36,010
還好Canvas API給了我們最好的方法

12
00:00:36,010 --> 00:00:38,010
來更有效率的繪製我們的牌

13
00:00:38,010 --> 00:00:39,130
我們來看一下編碼檔案

14
00:00:40,520 --> 00:00:45,010
我們可以用canvas.clipRect方式
來改善編碼

15
00:00:45,010 --> 00:00:49,272
我們會選擇這個變種
它會拿四個浮點作為參數

16
00:00:49,272 --> 00:00:51,325
好了 現在再回到Android Studio

17
00:00:51,325 --> 00:00:56,074
我們來針對這疊牌做些微調
好改善重複繪製的情況

18
00:00:56,074 --> 00:00:59,063
我會用Android Studio裡
這個好玩的功能

19
00:00:59,063 --> 00:01:02,212
現在你就能比對修改前後的編碼

20
00:01:02,212 --> 00:01:05,510
我們現在進入對照模式

21
00:01:05,510 --> 00:01:09,180
特別來看一下onDraw方式
這就是我們要覆蓋的地方

22
00:01:09,180 --> 00:01:11,590
左邊是原本的for迴圈

23
00:01:11,590 --> 00:01:15,110
我們來看看右邊能如何做改善

24
00:01:15,110 --> 00:01:19,100
我們針對每張牌一步步做改善吧

25
00:01:19,100 --> 00:01:22,789
首先 我們來計算牌的位置

26
00:01:23,850 --> 00:01:26,736
然後我們叫出canvas.save這個功能

27
00:01:26,736 --> 00:01:29,491
它會儲存我們現有的畫布狀態

28
00:01:29,491 --> 00:01:30,549
換句話說

29
00:01:30,549 --> 00:01:35,691
它會保持我們套用clipRect API
之前的畫面狀態

30
00:01:35,691 --> 00:01:37,485
當我們叫出clipRect方式

31
00:01:37,485 --> 00:01:40,664
我們基本上是在下一些幾何限制

32
00:01:40,664 --> 00:01:43,580
當我們輸入這些參數
我們基本上是在叫系統

33
00:01:43,580 --> 00:01:47,000
只要繪製出我們想看的牌
它的局部畫面

34
00:01:47,000 --> 00:01:48,420
明顯的 剩下的部分會被隱藏

35
00:01:49,470 --> 00:01:52,250
只有在設定界線裡出現的牌

36
00:01:52,250 --> 00:01:54,660
會被繪製

37
00:01:54,660 --> 00:01:57,012
最後我們會叫出canvas.restore

38
00:01:57,012 --> 00:01:59,890
它會將畫布返回到沒有裁剪的狀態

39
00:01:59,890 --> 00:02:04,244
換言之 它會解除
我們剛剛叫出clipRect所設下的限制

40
00:02:04,244 --> 00:02:08,788
我們在每張牌的編碼裡重複這個迴圈
除了最上面那張牌

41
00:02:08,788 --> 00:02:11,000
我們特別把最上面也是最後那張牌

42
00:02:11,000 --> 00:02:13,780
做出不同於下面其他牌的處理

43
00:02:13,780 --> 00:02:16,440
這張牌不需要任何裁剪

44
00:02:16,440 --> 00:02:18,650
所以我們會將它完整繪製

45
00:02:18,650 --> 00:02:20,780
透過這邊這個語句完成

46
00:02:21,980 --> 00:02:23,800
好了 我們來在編碼裡完成改善

47
00:02:23,800 --> 00:02:25,315
看看我們降低了多少重複繪製

48
00:02:27,660 --> 00:02:28,820
好了 太棒了

49
00:02:28,820 --> 00:02:30,970
你可以看到過度繪製情況少很多了

50
00:02:32,130 --> 00:02:35,250
我希望這課程有讓你清楚了解
Canvas API有個直接的方式

51
00:02:35,250 --> 00:02:38,350
讓你在自訂視圖中更有效率的繪製

52
00:02:38,350 --> 00:02:41,720
如果你希望多了解Canvas API

53
00:02:41,720 --> 00:02:45,170
記得到導師註記裡去看完整的文獻

54
00:02:45,170 --> 00:02:48,460
這樣的視圖可以幫助我們
創造獨特且引人注目的UX

55
00:02:48,460 --> 00:02:52,480
但記住我們要給系統一些提示

56
00:02:52,480 --> 00:02:56,110
來幫助安卓更有效率完成彩現

57
00:02:56,110 --> 00:02:59,800
當你在創造自訂視圖時
記住要檢查過度繪製

58
00:02:59,800 --> 00:03:01,972
並適時叫出clipRect方式

59
00:03:01,972 --> 00:03:04,290
好了 做的太棒了

60
00:03:04,290 --> 00:03:06,280
我們接下來讓柯特
分享更多效能的智慧