WEBVTT

00:00:00.486 --> 00:00:03.189
好了 我們現在回到了
Android Studio

00:00:03.189 --> 00:00:05.606
我們來檢視DroidCardsView的編碼

00:00:05.606 --> 00:00:07.962
再次強調 這是我們的自訂視圖

00:00:07.962 --> 00:00:11.870
我們回顧一下 這是在自訂視圖裡
建立的一疊牌

00:00:11.870 --> 00:00:14.480
舉例來說 每張牌會有自己的點陣圖

00:00:14.480 --> 00:00:17.910
而我們是透過覆蓋onDraw方法
來將它們繪製到螢幕上

00:00:19.280 --> 00:00:22.320
記住 我們覆蓋了onDraw方法以後

00:00:22.320 --> 00:00:25.580
安卓就無法在彩現這視覺時進行優化

00:00:25.580 --> 00:00:28.720
這會是我們身為開發人員的工作

00:00:28.720 --> 00:00:31.200
來正確裁剪每張繪製到畫面上的牌
並避免不必要的重複繪製

00:00:32.470 --> 00:00:36.010
還好Canvas API給了我們最好的方法

00:00:36.010 --> 00:00:38.010
來更有效率的繪製我們的牌

00:00:38.010 --> 00:00:39.130
我們來看一下編碼檔案

00:00:40.520 --> 00:00:45.010
我們可以用canvas.clipRect方式
來改善編碼

00:00:45.010 --> 00:00:49.272
我們會選擇這個變種
它會拿四個浮點作為參數

00:00:49.272 --> 00:00:51.325
好了 現在再回到Android Studio

00:00:51.325 --> 00:00:56.074
我們來針對這疊牌做些微調
好改善重複繪製的情況

00:00:56.074 --> 00:00:59.063
我會用Android Studio裡
這個好玩的功能

00:00:59.063 --> 00:01:02.212
現在你就能比對修改前後的編碼

00:01:02.212 --> 00:01:05.510
我們現在進入對照模式

00:01:05.510 --> 00:01:09.180
特別來看一下onDraw方式
這就是我們要覆蓋的地方

00:01:09.180 --> 00:01:11.590
左邊是原本的for迴圈

00:01:11.590 --> 00:01:15.110
我們來看看右邊能如何做改善

00:01:15.110 --> 00:01:19.100
我們針對每張牌一步步做改善吧

00:01:19.100 --> 00:01:22.789
首先 我們來計算牌的位置

00:01:23.850 --> 00:01:26.736
然後我們叫出canvas.save這個功能

00:01:26.736 --> 00:01:29.491
它會儲存我們現有的畫布狀態

00:01:29.491 --> 00:01:30.549
換句話說

00:01:30.549 --> 00:01:35.691
它會保持我們套用clipRect API
之前的畫面狀態

00:01:35.691 --> 00:01:37.485
當我們叫出clipRect方式

00:01:37.485 --> 00:01:40.664
我們基本上是在下一些幾何限制

00:01:40.664 --> 00:01:43.580
當我們輸入這些參數
我們基本上是在叫系統

00:01:43.580 --> 00:01:47.000
只要繪製出我們想看的牌
它的局部畫面

00:01:47.000 --> 00:01:48.420
明顯的 剩下的部分會被隱藏

00:01:49.470 --> 00:01:52.250
只有在設定界線裡出現的牌

00:01:52.250 --> 00:01:54.660
會被繪製

00:01:54.660 --> 00:01:57.012
最後我們會叫出canvas.restore

00:01:57.012 --> 00:01:59.890
它會將畫布返回到沒有裁剪的狀態

00:01:59.890 --> 00:02:04.244
換言之 它會解除
我們剛剛叫出clipRect所設下的限制

00:02:04.244 --> 00:02:08.788
我們在每張牌的編碼裡重複這個迴圈
除了最上面那張牌

00:02:08.788 --> 00:02:11.000
我們特別把最上面也是最後那張牌

00:02:11.000 --> 00:02:13.780
做出不同於下面其他牌的處理

00:02:13.780 --> 00:02:16.440
這張牌不需要任何裁剪

00:02:16.440 --> 00:02:18.650
所以我們會將它完整繪製

00:02:18.650 --> 00:02:20.780
透過這邊這個語句完成

00:02:21.980 --> 00:02:23.800
好了 我們來在編碼裡完成改善

00:02:23.800 --> 00:02:25.315
看看我們降低了多少重複繪製

00:02:27.660 --> 00:02:28.820
好了 太棒了

00:02:28.820 --> 00:02:30.970
你可以看到過度繪製情況少很多了

00:02:32.130 --> 00:02:35.250
我希望這課程有讓你清楚了解
Canvas API有個直接的方式

00:02:35.250 --> 00:02:38.350
讓你在自訂視圖中更有效率的繪製

00:02:38.350 --> 00:02:41.720
如果你希望多了解Canvas API

00:02:41.720 --> 00:02:45.170
記得到導師註記裡去看完整的文獻

00:02:45.170 --> 00:02:48.460
這樣的視圖可以幫助我們
創造獨特且引人注目的UX

00:02:48.460 --> 00:02:52.480
但記住我們要給系統一些提示

00:02:52.480 --> 00:02:56.110
來幫助安卓更有效率完成彩現

00:02:56.110 --> 00:02:59.800
當你在創造自訂視圖時
記住要檢查過度繪製

00:02:59.800 --> 00:03:01.972
並適時叫出clipRect方式

00:03:01.972 --> 00:03:04.290
好了 做的太棒了

00:03:04.290 --> 00:03:06.280
我們接下來讓柯特
分享更多效能的智慧