All right, so here we are back in the Android Studio,
reviewing the source for our DroidCardsView.
Again, this is our custom view.
Just to recall, it's in this custom view that we build our stacked playing cards.
For example, each card has its own bitmap, and
we draw them to the screen by overriding the onDraw method.
Now remember, by overriding the onDraw method,
Android won't be able to optimize the rendering of this view, so
it's our job as developers to properly clip each card
as it's drawn to the screen to avoid the unnecessary overdraw.
Fortunately, the Canvas API gives us just the right methods we need to draw
our cards more efficiently.
Let's take a look at the documentation.
Let's use the canvas.clipRect method to improve our code.
We're going to use this variant here that takes four floats as parameters.
All right, now we're back in Android Studio.
Let's tweak how we draw each cascaded card so that we reduce this overdraw.
I'm going to use this nifty feature within Android Studio to bring up a diff
view, so you can see the before and after state of the code.
'Kay, all right, here we are in our comparison view, and let's look
particularly at the onDraw method, which is the one we're overriding.
We've got the old state of the for loop here on the left,
but let's focus here on the improvements that we're going to make on the right.
Now, as we iterate over the cards, let's go over each step of improvement.
Number one, first, we're going to calculate the position for the card.
Then we need to call this function canvas.save,
which is going to save our existing canvas state.
In other words,
it maintains the existing state of your screen before we apply the clipRect API.
Now, when we call this clipRect method,
we're basically doing some geometric restrictions.
When we pass in these parameters, we're basically telling the system
to only draw a portion of the card that we want to see visible.
Obviously, the rest of it would be hidden.
Now, only the parts of the card that lie within the bounds of the restriction
that we just put will get drawn.
Finally, we're going to call canvas.restore,
which is going to revert the canvas to a non-clipping state.
In other words,
it's going to undo the restriction that we put in place when we called clipRect.
And then we repeat this loop for all the cards except the top one.
Now specifically, we process the top or
last card differently than its underlying siblings.
For this one, no clipping is needed, so
we're going to go ahead and draw it in its entirety.
You can see that via the statement right here.
All right, let's build our improved code and
see if we've reduced a bunch of overdraw.
All right, awesome.
As you can see here, much less overdraw.
Now I hope it's clear that with the Canvas API, we have a straightforward
way to draw efficiently when working with custom views.
Oh, and in case you want to explore the Canvas API some more,
be sure to check out the full documentation in the instructor notes.
Now, views like these are great for helping us create a unique and
compelling UX, but remember that we must clue in the system
to help Android render such views in a performant fashion.
So whenever you're creating a custom view, be sure to check for overdraw, and
be ready to revive your friend, the clipRect method.
All right, awesome work.
Let's head back to Colt for more perf wisdom.
حسنًا، لقد عدنا مجددًا إلى برنامج Android Studio،
لمراجعة مصدر DroidCardsView.
مجددًا، هذا هو العرض المخصص.
فقط لنتذكر، أنه في هذا العرض المخصص قمنا بإنشاء أوراق اللعب المتراكبة.
على سبيل المثال، كل بطاقة لها صورتها النقطية الخاصة بها،
ونحن نرسمهم على الشاشة عن طريق التحكم في أسلوب onDraw.
وتذكر، أنه بالتحكم في أسلوب onDraw،
فلن يتمكن الأندرويد من تحسين معالجة المشهد،
إنها مهمتنا نحن المطورون لاقتصاص كل بطاقة بطريقة صحيحة
كما ستظهر على الشاشة وذلك لتجنب تراكب الرسوم غير الضروري.
ولحسن الحظ، فأداة Canvas API تعطينا الطرق الصحيحة التي نحتاجها
لرسم بطاقاتنا بطريقة أكثر فعالية.
فلنلقِ نظرة على التوثيق.
ولنستخدم طريقةcanvas.clipRect لتحسين الكود خاصتنا.
سوف نستخدم هذا المتغير هنا والذي يحتوي على أربعة متغيرات مثل البارامترات.
حسنًا، لقد عدنا الآن إلى Android Studio
فلنقم بتعديل كيفية رسم كل بطاقة مدرجة
وسوف أستخدم تلك الخاصية الرائعة الموجودة في Android Studio لإحضار مشهد مختلف
إلى المقدمة، حتى تتمكن من رؤية حالة الكود قبل وبعد التعديل.
حسنًا، نحن هنا في مشهد المقارنة،
ولنلق نظرة خاصة على أسلوب onDraw وهو الأسلوب الذي نتجاوزه.
لدينا الحالة القديمة لحلقة for التكرارية على اليسار،
لكن فلنركز على التحسينات التي سنقوم بها هنا على اليمين.
الآن، وبينما نكرر البطاقات، فلنراجع كل خطوة من التحسينات.
رقم واحد أولًا سنقوم بحساب موضع البطاقة.
ثم سنقوم بتشغيل تلك الخاصية canvas.save
التي ستحفظ حالة لوحة الرسم الحالية.
وبمعنى آخر،
فهي تحافظ على الوضع الحالي للشاشة قبل تطبيق أداة clipRect API.
الآن، عندما نقوم بتشغيل طريقة clipRect،
فإننا بذلك نقوم بعمل بعض الحدود الهندسية.
وعندما نمرر هذه المتغيرات، فنحن بذلك نخبر النظام
بأن يرسم فقط جزء البطاقة الذي نريد أن يكون مرئيًا.
وبالطبع، بقية الأجزاء ستكون مخفية.
الآن، أجزاء البطاقة الموجودة ضمن الحدود التي وضعناها فقط
هي الأجزاء التي سيتم رسمها فقط.
وأخيرًا، سنقوم بتشغيل canvas.restore،
والتي ستحول لوحة الرسم إلى وضعية عدم الاقتصاص.
وبمعنى آخر،
سوف تقوم بإلغاء الحدود التي وضعناها عندما قمنا بتشغيل clipRect.
ثم نقوم بإعادة تلك الحلقة التكرارية لجميع البطاقات ما عدا الموجودة بالأعلى.
الآن وبشكل خاص سنقوم بمعالجة
البطاقة الأخيرة بشكل مختلف عن نظيراتها الموجودة بالأسفل.
وبالنسبة لهذه البطاقة، فلن نحتاج إلى الاقتصاص،
لذا سنقوم برسمها كاملة.
ويمكنك أن ترى ذلك من خلال هذه الجملة الموجودة هنا.
حسنًا، فلنقم بإنشاء الكود المحسن،
لنرَ إن كنا قد قمنا بتقليل كمية من تراكب الرسوم.
حسنًا، رائع!
كما ترى هنا، يوجد القليل من تراكب الرسوم.
آمل أن يكون مفهومًا أنه باستخدام Canvas API يكون لدينا طريقة مباشرة
للرسم بطريقة فعالة عند العمل على عروض مخصصة.
وفي حالة ما إذا رغبت باستكشاف Canvas API أكثر،
فتأكد من مراجعة كامل التوثيق الموجود في ملاحظات المدرب.
الآن، مشاهد مثل هذه تعتبر رائعة لمساعدتنا على خلق
تجربة مستخدم فريدة وجذابة لكن تذكر أننا يجب أن نعتمد على النظام
لمساعدة الأندرويد في معالجة مثل هذه المشاهد بطريقة ذات فعالية.
إذن عندما تقوم بإنشاء عرض مخصص، تأكد من فحص تراكب الرسوم،
وأن تكن مستعدًا لإحياء صديقك وهو طريقةclipRect.
حسنًا، عمل رائع!
فلنعد إلى كولت ليخبرنا المزيد عن الأداء.
Estamos de vuelta en Android Studio,
revisando la fuente de nuestro DroidCardsView.
Esta es nuestra vista personalizada.
Recuerda, es en esta vista personalizada donde generamos las cartas apiladas.
Por ejemplo, cada carta tiene su mapa de bits,
y las dibujamos en pantalla ignorando el método onDraw.
Recuerda, al ignorar el método onDraw,
Android no podrá optimizar el renderizado de esta vista,
así que como desarrolladores deberemos recortar bien cada carta
mientras se dibuja en pantalla para evitar la superposición.
La API Canvas nos da los métodos que necesitamos para dibujar las cartas
con eficiencia.
Veamos la documentación.
Vamos a usar el método canvas.clipRect para mejorar nuestro código.
Usaremos esta variante de aquí, que toma cuatro floats como parámetros.
Volvemos a Android Studio.
Modifiquemos el dibujo de las cartas en cascada
para reducir esta superposición.
Usaré esta gran función de Android Studio para mostrar otra vista,
para que veas el antes y el después del código.
Aquí tenemos nuestra vista comparativa. Centrémonos en el método onDraw,
que estamos sobreescribiendo.
A la izquierda tenemos el antiguo estado del bucle for,
pero centrémonos en las mejoras que haremos a la derecha.
Mientras iteramos sobre las cartas, vayamos viendo cada paso de mejora.
En primer lugar,
vamos a calcular la posición de la carta.
Después necesitamos llamar a esta función canvas.save,
que guardará nuestro estado de canvas actual.
Dicho de otra forma, mantiene el estado actual de tu pantalla
antes de aplicar la API clipRect.
Cuando llamamos al método clipRect, hacemos restricciones geométricas.
Cuando entramos estos parámetros, le decimos al sistema
que dibuje solo una parte de la carta que queremos que sea visible.
Obviamente, el resto quedaría oculto.
Solo se dibujarán las partes de la carta de dentro del límite de esa restricción.
Por último, llamaremos al método canvas.restore,
que convertirá canvas a un estado no recortado.
Es decir, va a deshacer la restricción que implementamos al llamar a clipRect.
Y luego repetimos este bucle con todas las cartas excepto la de arriba.
Procesaremos esta última carta de distinta manera que las de debajo.
Para esta no se necesita recortar, lo que haremos es dibujarla por completo.
Puedes verlo mediante esta instrucción.
Creemos nuestro código mejorado y veamos si reducimos esa superposición.
Perfecto.
Como ves, hay mucha menos superposición.
Espero que quede claro que con Canvas tenemos una forma sencilla
y eficiente de dibujar con vistas personalizadas.
En caso de que quieras indagar más acerca de la API Canvas,
revisa la documentación completa en las notas del profesor.
Vistas como estas son fabulosas para crear una UX única y convincente,
pero tenemos que "jugar" con el sistema para ayudar a Android
a renderizar esas vistas de un modo eficiente.
Cuando crees una vista personalizada, mira que no haya superposición
y resucita a tu amigo, el método clipRect.
Excelente trabajo, vamos con Colt para adquirir más conocimientos de perf.
Bon, alors nous revoici dans Android Studio,
avec le code source de DroidCardsView.
Souvenez-vous, c'est une vue personnalisée.
Pour rappel, c'est dans cette vue qu'on a créé notre paquet de cartes à jouer.
Par exemple, chaque carte a son bitmap et
on la dessinera à l'écran en remplaçant la méthode onDraw.
Maintenant souvenez-vous, quand on remplace la méthode onDraw,
Android ne peut pas optimiser le rendu de cette vue,
donc c'est à nous, développeurs, de bien découper chaque carte
qui se dessinera à l'écran pour éviter trop de superpositions.
Heureusement, l'API Canvas nous donne pile les méthodes requises pour dessiner
nos cartes plus efficacement.
Lisons la documentation.
On utilisera la méthode canvas.clipRect pour améliorer notre code.
On prendra cette variante-ci, avec quatre nombres en paramètres.
Bon, nous revoici dans Android Studio.
Bricolons le dessin de chaque carte créée pour éviter les superpositions.
J'ai une fonction pratique d'Android Studio pour afficher les différences,
pour voir l'état du code avant et après changement.
Bon, nous voici dans l'affichage comparatif.
Regardez notamment ma méthode onDraw, celle qu'on remplace.
On a l'ancien état de la boucle for juste ici à gauche,
mais voyons surtout les améliorations qu'on va introduire ici à droite.
Dans l'itération des cartes, examinons chaque étape de l'amélioration.
D'une, on va déjà calculer la position de la carte.
On aura besoin d'appeler la fonction canvas.save,
pour enregistrer l'état du canvas existant.
Autrement dit,
elle sauvegarde l'état actuel de l'écran avant d'appliquer l'API clipRect.
Quand on fait appel à cette méthode clipRect,
on définit simplement des limites géométriques.
Quand on transmet ces paramètres, on dit simplement au système
de ne dessiner qu'une partie de la carte, celle qu'on veut voir.
Évidemment, le reste en sera caché.
Seules les portions de la carte qui se trouvent dans les limites
qu'on a définies seront donc dessinées.
Pour finir, on fera appel à canvas.restore,
pour repasser le canevas à un état sans découpe.
Autrement dit,
la fonction va annuler l'interdiction qu'on avait établie pour appeler clipRect.
Et on va répéter cette boucle pour toutes les cartes sauf celle du dessus.
Pour être plus précis, on traitera la carte supérieure,
la dernière, différemment de ses consœurs du paquet.
Pour cette carte, on n'a pas besoin de la découper,
donc on ne va pas hésiter et la dessiner intégralement.
C'est visible grâce à cette déclaration, ici.
Bon, assemblons ce code amélioré pour
voir si on a moins de superpositions.
Super, génial.
Comme on peut voir, il y en a beaucoup moins.
J'espère que vous aurez compris qu'avec l'API Canvas, on a une méthode
simple pour dessiner efficacement si on utilise des vues personnalisées.
Ah, et si vous voulez en savoir plus sur l'API Canvas,
n'hésitez pas à lire la doc, le lien est dans les consignes.
Ce type de vue est génial pour aider à créer une expérience utilisateur unique
et intuitive, mais n'oubliez pas qu'on doit « indiquer » au système
comment aider Android à rendre ce type de vues de façon performante.
Dès qu'on utilise une vue personnalisée, il faut prendre garde aux superpositions,
et être prêt à jouer avec la méthode clipRect.
Allez, beau travail.
Retournons voir Colt pour plus de conseils.
Baik, kita kembali ke Android Studio,
meninjau sumber untuk DroidCardsView kami.
Sekali lagi, inilah tampilan khusus kami.
Sebagai pengingat, di tampilan khusus ini kami membuat kartu permainan bertumpuk.
Contohnya, setiap kartu punya bitmap sendiri, dan
kita menariknya ke layar dengan mengesampingkan metode OnDraw.
Ingat, dengan mengesampingkan metode onDraw,
Android tidak akan dapat mengoptimalkan render tampilan ini, sehingga
itu tugas kami sebagai pengembang untuk menjepit setiap kartu dengan benar
seperti ketika ditarik ke layar untuk menghindari overdraw yang tidak perlu.
Untungnya, Canvas API memberi kita metode tepat yang diperlukan untuk
menarik kartu dengan lebih efisien.
Mari kita lihat dokumentasi.
Mari kita gunakan metode canvas.clipRect untuk meningkatkan kode kita.
Kita akan menggunakan varian di sini, mengambil empat apungan sebagai parameter.
Baiklah, kita kembali ke Android Studio.
Kita lihat cara menarik setiap tumpukan kartu sehingga mengurangi overdraw ini.
Saya akan menggunakan fitur bagus ini dalam Android Studio untuk membuka
tampilan diff, sehingga Anda dapat melihat kondisi sebelum dan sesudah kode.
Oke, sekarang kita ada di tampilan perbandingan, dan mari kita lihat
khususnya pada metode onDraw, yang kita kesampingkan.
Terdapat kondisi lama untuk loop di sini di sebelah kiri,
tapi mari kita fokus pada perbaikan yang akan kita buat di kanan.
Sekarang, karena kita membolak-balik kartu,
mari kita bahas setiap langkah peningkatan.
Pertama, kita akan menghitung bagian kartu.
Kita harus mengaktifkan fungsi canvas.save ini,
yang akan menyimpan keberadaan keadaan kanvas.
Dengan kata lain,
mempertahankan kondisi pada layar Anda sebelum kita menerapkan clipRect API.
Kini, saat kita munculkan metode clipRect ini,
pada dasarnya kita melakukan beberapa pembatasan geometris.
Saat kita melewati parameter ini, pada dasarnya kita membicarakan sistem
untuk menggambar pembagian kartu yang ingin kita tunjukkan.
Yang jelas, sisanya akan disembunyikan.
Kini, hanya bagian kartu yang terletak dalam ikatan pembatasan
yang kita buat yang akan ditarik.
Akhirnya, kita akan memunculkan canvas.restore,
yang akan mengembalikan kanvas ke kondisi tidak dijepit.
Dengan kata lain,
ini akan membatalkan pembatasan yang kita terapkan saat memunculkan clipRect.
Lalu, kita ulangi loop ini untuk semua kartu, keculi kartu yang paling atas.
Sekarang, kita akan memproses kartu teratas
dan terakhir secara terpisah, dari kartu yang mendasarinya.
Untuk yang satu ini, tidak perlu dijepit,
jadi kita akan melanjutkan dan menariknya secara keseluruhan.
Anda dapat melihatnya pada pernyataan di sini.
Kalau begitu, mari kita buat kode yang ditingkatkan dan
lihat jika kita telah mengurangi serangkaian overdraw.
Menakjubkan sekali.
Seperti yang terlihat, overdraw berkurang.
Kini, saya harap sudah jelas bahwa dengan Canvas API, kita punya cara sederhana
untuk menarik secara efisien ketika bekerja dengan tampilan khusus.
Oh iya, ketika Anda ingin mengeksplorasi Canvas API lagi,
pastikan Anda memeriksa dokumentasi di catatan instruktur.
Sekarang, tampilan seperti ini akan membantu kita untuk membuat UX yang unik
dan rumit, namun ingat bahwa kita harus mengerti sistem
untuk membantu Android merender tampilan tersebut dalam mode berkualitas tinggi.
Jadi, kapan pun Anda membuat tampilan khusus, periksa overdraw, dan
bersiaplah untuk memulihkan kembali teman Anda, metode clipRect.
Baiklah, kerja yang menakjubkan.
Mari kita kembali ke Colt untuk mengetahui kebijakan perf lebih lanjut.
ここでAndroid Studioに戻り
Androidカードビューの ソースを表示します
これはカスタム ビューです
積み重ねたプレイカードを構築したのは このカスタム ビューでした
例えば各カードには それ自体のビットマップがあり
onDraw 方式をオーバーライドさせて 画面にそれらを描きます
onDraw 方式をオーバーライド させることによって
Androidはこのビューのレンダリング を最適化できません
不要なオーバードロウを避けるために 画面に描かれた
各カードを適切にクリップするのは 開発者の仕事です
Canvas APIはカードをもっと 効率よく描くために
適切な方法を提供してくれます
文書を検討します コードを改善するために
canvas.clipRect方式を 使います
パラメータとして4つのフロートを得られる このバリアントを使用します
Android Studioに戻ります
オーバードロウを減らすために各カスケード されたカードの描き方を絞ります
Android Studioが差異表示 できる機能を使います
それによりコード改善の前後を表示できます
ここは比較表示で
特にオーバーライドする1つである onDraw 方式を検討します
左にループの従来の状態が表示され
右にこれから行う改善が表示されます
何枚ものカードの上で繰り返す 改善の各段階を調べましょう
第1にカードのポジションを計算します
次にこの機能canvas.saveを 呼び出す必要があります
これは既存のキャンバス状態を保存します
言い換えると
clipRect API を適用する前に 画面の既存の状態を維持します
clipRect 方式を呼び出すとき
基本的には幾何学的制約を行っています
これらのパラメータにパスすると 基本的にはシステムは
表示させたいカードの一部しか 描かないと言えます
明らかにその残りは非表示です
制約の範囲内にあるカードの一部だけが
描かれます
最後にcanvas.restoreを 呼び出します
それはキャンバスをクリッピング されていない状態に戻します
言い換えると
それはclipRectを呼び出したときに 設定された制約を元に戻します
次いで最上部のカードを除き すべてのカードにこのループを繰り返します
特別に 最上部または
最後のカードをその下の兄弟とは 異なった方法で処理します
これにはクリッピングは必要なく
その全容を描きます
ここの記述によってこの状況が分かります
コードを構築または改善し
オーバードロウ減少を確かめます
けっこうです すばらしい
お分かりのように オーバードローはわずかです
キャンバスAPIで カスタムビューで 作業する場合
効率よく描く簡単な方法が得られます
さらにキャンバスAPIを 詳しく研究したい場合
インストラクターメモの文書全部を 必ず確認してください
これらの表示は独自の
人を引き付けるUXを作成するのに 役立ちますが パフォーマンスで
Androidが表示するのに役立つ情報を システムに伝えなければなりません
カスタム ビューを作成するときは 常にオーバードローをチェックし
clipRect方式を アクティブにしてください
けっこうです よくできました
完璧な知識のために coltを見直しましょう
좋아요 Android Studio로 돌아왔어요
DroidCardsView의 소스 코드를 검토 중입니다
DroidCardsView는 커스텀 뷰라는 점 다시 말씀드립니다
전에 말씀드렸다시피 바로 이 커스텀 뷰에서 카드를 쌓고 있습니다
다시 말해 각 카드는 고유의 비트맵이 있어요
그리고 onDraw() 메소드를 오버라이딩해서 화면에 카드를 그립니다
기억해주세요 onDraw() 메소드를 오버라이딩하면
안드로이드는 이 뷰의 렌더링을 최적화하지 못해요
그래서 여러분께서 직접 카드들의 clipping을 해주어야 해요
카드의 최종 모습을 파악해 불필요한 overdraw를 방지하기 위해서 말이죠
다행히 Canvas API는
저희가 카드를 더 효율적으로 그리는데 필요한 메소드를 제공해줍니다
참조 문서를 봐주세요
Canvas.clipRect() 메소드로 코드를 개선해볼게요
4개의 부동 소수점 값을 매개 변수로 받는 유형을 사용할 거예요
Android Studio로 돌아왔습니다
각 카드가 그려지는 방법을 수정해서 overdraw를 줄여보겠습니다
Android Studio에 있는 비교 창 기능을 켜놓을게요
비교 창을 통해 코드의 수정 전과 후를 비교하실 수 있어요
지금 보이시는 게 비교 창입니다
그럼 저희가 오버라이딩하는 onDraw() 메소드를 집중적으로 볼게요
수정하기 전 for 루프는 왼쪽에 있습니다
하지만 수정할 코드는 오른쪽에 있으니 여기에 집중할게요
이제 카드 생성을 한 번씩 반복할 때마다 개선된 점을 볼 거예요
첫째로 카드의 위치를 파악합니다
다음 canvas.save() 함수를 호출해요
현재 canvas의 상태를 저장하는 함수죠
다시 말해
clipRect API를 적용하기 전의 화면의 상태를 보관하는 겁니다
그리고 여기 이 clipRect() 메소드를 부르면
단순하게 설명드리자면 테두리를 설정하는 거예요
이 매개 변수들을 시스템에게 전달해
카드에서 저희가 보고 싶은 부분만 그리라고 알려주는 거예요
선택하지 않은 부분은 당연히 보이지 않겠죠
그럼 카드에서 저희가 제한한 구역 안에 있는 부분만 출력됩니다
마지막으로 canvas.restore()을 호출합니다
Canvas.restore()는 canvas를 clipping하기 전 상태로 되돌립니다
쉽게 말해서
clipRect를 선언했을 때 설정한 제한 구역을 풀어주는 거예요
가장 위에 있는 카드를 제외한 나머지 카드에 대해서 루프를 돌려요
가장 위에 있는 마지막 카드는 다른 카드들과 다른 방식으로 처리됩니다
마지막 카드는 clipping이 필요하지 않으니
카드 전체를 그릴 겁니다
여기 문장을 보시면 아시겠죠
좋아요 수정한 코드를 빌드하고
overdraw가 줄었는지 한번 볼게요
멋지네요
보시다시피 overdraw가 많이 줄었어요
커스텀 뷰를 사용할 때 Canvas API를 사용하면
간단한 방법으로 렌더링 효율성을 향상시킬 수 있다는 점을 이해하셨길 바라요
그리고 혹시 Canvas API를 더 배우고 싶으시면
Instructor Notes에 제공된 참조 문서 원본을 꼭 확인하세요
이런 뷰는 특별하고 주목을 이끄는 UX를 만들 때 매우 좋아요
하지만 시스템에게 힌트를 줘야 한다는 점 잊지 마세요
그래야지 안드로이드가 여러분의 뷰를 효율적으로 렌더링 할 수 있으니까요
커스텀 뷰를 사용하실 땐 꼭 overdraw를 확인하시고
여러분의 친구인 clipRect() 메소드를 꼭 찾아주세요
좋아요 수고 많으셨어요
이제 콜트와 성능에 대해 더 배워볼게요
Tudo bem, então aqui estamos de volta no Android Studio,
revisando a origem para nosso DroidCardsView.
De novo, esta é nossa vista customizada.
Apenas para relembrar, foi aqui que construímos nossa pilha de cartas.
Por exemplo, cada carta tem seu bitmap, e
nós as desenhamos na tela alterando o método onDraw.
Agora, lembre, alterar o método onDraw,
o Android não irá conseguir otimizar a renderização desta vista, então
é nosso trabalho como desenvolvedores recortar apropriadamente cada carta
como é desenhada na tela, para evitar o overdraw desnecessário.
Felizmente, a API Canvas nos dá os métodos corretos para desenhar
nossas cartas mais eficientemente.
Vamos dar uma olhada na documentação.
Vamos usar o método canvas.clipRect para melhorar nosso código.
Vamo usar esta variante aqui que recebe quatro floats como parâmetros.
Tudo bem, agora estamos de volta no Android Studio.
Vamos ajustar como desenhamos cada cascata de cartas para reduzir este overdraw.
Vou usar este recurso bacana no Android Studio para trazer o diff view
para você ver o estado antes e depois do código.
Beleza, aqui estamos em nosso comparison view, e vamos olhar
particularmente para o método onDraw, que é aquele que estamos alterando.
Temos o velho estado do ciclo for aqui na esquerda,
mas vamos focar aqui nos melhoramentos que vamos fazer na direita.
Conforme passamos pelas cartas, vamos ver cada passo de melhoramento.
Número um, primeiro vamos calcular a posição da carta.
De seguida, precisamos chamar esta função canvas.save,
que vai salvar nosso estado existente da tela.
Em outras palavras,
ela mantém o estado existente de sua tela antes de aplicar o API clipRect.
Agora, quando chamamos este método clipRect,
nós basicamente estamos fazendo algumas restrições geométricas.
Quando passamos por estes parâmetros, dizemos basicamente ao sistema
para apenas desenhar uma porção da carta que nós queremos que seja visível.
Obviamente, o resto estaria escondido.
Agora, apenas as partes da carta que estão dentro dos limites
da restrição que definimos, serão desenhadas.
Finalmente, vamos chamar a canvas.restore,
que vai reverter a tela para um estado de non-clipping.
Em outras palavras, ele vai desfazer as restrições
que nós fizemos quando chamamos o clipRect.
E em seguida, repetimos este loop para todas as cartas exceto a de cima.
Especificamente, nós processamos a carta de topo
ou a última carta de forma diferente das suas semelhantes subjacentes.
Para esta, não é preciso recortar,
por isso vamos avançar e desenhar ela completamente.
Você pode ver isso por esta afirmação aqui.
Tudo bem, vamos construir o código melhorado e
ver se reduzimos um monte de overdraw.
Legal, impressionante.
Como você pode ver aqui, muito menos overdraw.
Espero que seja claro que com o API Canvas, nós temos uma simples
maneira de desenhar com eficiência quando trabalhamos com custom views.
Ah, e caso você queira explorar a API Canvas mais um pouco,
Certifique-se de revisar a documentação completa nas notas do instrutor.
Agora, vistas como estas são ótimas para nos ajudar a criar uma UX única
e atraente, mas se lembre que devemos lembrar o sistema
e ajudar o Android a renderizar essas views com bom desempenho.
Então, quando criar uma custom view se certifique de verificar o overdraw, e
esteja pronto para reavivar seu amigo, método clipRect.
Tudo bem, excelente trabalho.
Vamos voltar para o Colt para mais sabedoria de desempenho.
Хорошо, вот мы вернулись в Android Studio,
на страницу исходного кода для нашего DroidCardsView.
И снова вот оно — наше пользовательское представление.
Напоминаю, именно в этом пользовательском представлении
мы создаем нашу стопку игральных карт.
Например, у каждой карты есть свой рисунок,
и мы рисуем их на экране, переопределяя метод onDraw.
Запомните, после переопределения метода onDraw
Android не сможет оптимизировать построение этого представления,
поэтому наша задача как разработчиков — правильно обрезать каждую карту
при ее перетаскивании на экран, чтобы избежать ненужного перерисовывания.
К счастью, API Canvas предоставляет нам правильные методы,
нужные для более эффективного рисования наших карт.
Заглянем в документацию.
Воспользуемся методом canvas.clipRect для улучшения нашего кода.
Мы собираемся применить здесь этот вариант,
принимающий в качестве параметров четыре числа с плавающей запятой.
Хорошо, мы снова в Android Studio.
Поправим то, как рисуется каждая из каскада карт,
чтобы уменьшить перерисовку.
Я собираюсь использовать эту изящную возможность Android Studio,
чтобы загрузить другое представление, позволяющее видеть состояние кода
до и после изменения.
Теперь, находясь в сравнительном представлении, подробно рассмотрим
метод onDraw, который мы переопределили.
Слева находится старое состояние цикла,
но давайте сфокусируемся на улучшениях, которые мы собираемся выполнить справа.
Теперь, по ходу перебора карт в цикле, пройдемся по каждому из шагов улучшения.
В первую очередь мы собираемся рассчитать положение карты.
Затем нам нужно вызвать функцию canvas.save,
которая сохранит текущее состояние нашего холста.
Другими словами,
она сохраняет состояние экрана, существовавшее до применения API clipRect.
Теперь при вызове метода clipRect мы по существу налагаем
некоторые геометрические ограничения.
Передавая эти параметры, мы фактически приказываем системе
рисовать только часть карты, которая должна быть видимой.
Очевидно, оставшаяся ее часть будет скрыта.
Теперь будут перерисовываться только те части карты,
которые находятся внутри заданных границ.
Наконец, мы собираемся вызвать метод canvas.restore,
который должен вернуть холст в состояние до обрезки.
Другими словами,
он должен отменить ограничение, наложенное при вызове метода clipRect.
А затем мы повторяем этот цикл для всех карт, кроме самой верхней.
Теперь специально обработаем верхнюю
или последнюю карту иначе, чем находящиеся под ней.
Обрезка этой карты не нужна,
поэтому двинемся дальше и нарисуем ее во всей полноте.
Для этого используется показанная здесь инструкция.
Хорошо, скомпилируем наш улучшенный код и посмотрим,
удалось ли нам сократить количество перерисовок.
Шикарно.
Как можно видеть, перерисовок стало намного меньше.
Теперь, я надеюсь, ясно, что API Canvas предоставляет нам
простой способ быстрого рисования при работе
с пользовательскими представлениями.
О, если захочется узнать что-нибудь еще об API Canvas,
обратитесь к полной документации в примечаниях инструктора.
Итак, представления, подобные этому, отлично помогут нам в создании уникального
и конкурентоспособного UX, но помните, мы должны соответствующим образом
инструктировать Android, чтобы эффективно отобразить подобные представления.
Поэтому при создании каждого представления обязательно проверяйте перерисовку
и будьте готовы оживить старого друга, метод clipRect.
Замечательно, отличная работа.
Снова обратимся к Колту за дополнительной мудростью.
Pekâlâ, işte tekrar Android Studio'dayız,
DroidCardsView'un kaynağını inceleyeceğiz.
Bu bizim özel görünümümüz.
Hatırlayalım, oyun kartı destesini geliştirdiğimiz yer, bu özel görünümdür.
Örneğin, her kart kendi bit eşlemine sahip ve
onDraw metodunu kullanarak bunları ekrana çiziyoruz.
Hatırlayın, Android, onDraw metoduyla, bu görünümün oluşturulmasını
optimize edemeyecektir. Bu nedenle, geliştiriciler olarak
bizim görevimiz, gereksiz abartılı çizimlerden kaçınmak için
ekrana çizilirken her bir kartı uygun biçimde kırpmaktır.
Şanslıyız ki, Tuval API, kartlarımızı daha verimli çizmek için ihtiyacımız
olan doğru metotları sağlar.
Dokümantasyona bir bakalım.
Kodumuzu geliştirmek için, canvas.clipRect metodunu kullanalım.
Dört kaydırmayı, parametre olarak alan bu değişkeni kullanacağız.
Tamam, tekrar Android Studio'dayız.
Bu abartılı çizimi sadeleştirmek için, basamaklı düzendeki kartları keselim.
Android Studio'daki bu havalı özelliği, bir diff görünümü getirmek için
kullanacağım, böylece kodun önceki ve sonraki durumunu görebileceksiniz.
Şimdi karşılaştırma görünümündeyiz, özellikle kullanmakta olduğumuz
onDraw metoduna bakacağız.
Sol tarafta döngünün eski hâlini görüyoruz,
ama gelin, sağ tarafta yapacağımız ilerlemelere odaklanalım.
Kartlarımızın üzerinden geçerken, ilerlememizin her bir adımını inceleyelim.
İlk olarak, kart pozisyonunu hesaplayacağız.
Daha sonra, verili tuval durumunu kaydedecek olan
canvas.save işlevini çağıracağız.
Diğer bir deyişle,
ekranınızın, clipRect API'yı uygulanmadan önceki durumunu sürdürür.
Bu clipRect metodunu çağırdığımızda,
temel olarak bazı geometrik sınırlamalar uygularız.
Bu parametreleri geçirdiğimizde, sisteme, kartların sadece görmek
istediğimiz kısımlarını çizmesini söylemiş oluruz.
Geri kalan kısım ise saklı kalır.
Yalnızca belirlediğimiz sınırların içinde kalan kartların
kısımları çizilecektir.
Son olarak, canvas.restore metodunu çağıracağız,
bu metot, tuvali kırpılmamış hâline döndürecek.
Diğer bir deyişle,
clipRect metodunu çağırdığımızda uyguladığımız sınırlamaları kaldıracak.
Sonra bu döngüyü, en üstteki hariç, tüm kartlarda tekrar ediyoruz.
Özellikle en üstteki ve son kartı, altındaki kardeşlerden
farklı biçimde işleme tabi tutacağız.
Bunun için, kırpmaya gerek yok,
o yüzden, devam edip tamamını çizeceğiz.
Buradaki bildirim vasıtasıyla, bunu görebilirsiniz.
Pekâlâ, geliştirdiğimiz kodumuzu uygulayalım
ve abartılı çizimleri sadeleştirip sadeleştiremediğimize bakalım.
Pekâlâ, harika.
Gördüğünüz gibi, daha az abartılı çizim var.
Umarım, Tuval API'nın, özel görünümlerle çalışırken, çizim yapmanın
verimli bir yolu olduğu açık hâle gelmiştir.
Tuval API'yı daha fazla keşfetmek isterseniz,
eğitmen notlarındaki tam dokümantasyona başvurun.
Bunlar gibi görünümler, benzersiz ve ilgi uyandıran bir kullanıcı deneyimi
yaratmamıza yardım eder, fakat unutmayın ki, Android'in başarılı biçimde
böyle görünümler yaratmasını sağlamak için sisteme ipuçları sağlamalıyız.
Her ne zaman bir özel görünüm yaratırsanız, abartılı çizimleri
kontrol etmeyi ve dostumuz clipRect metodunu çağırmayı unutmayın.
Pekâlâ, iyi iş çıkardık.
Şimdi, daha çok perf bilgisi için sözü yine Colt'a bırakalım.
Bây giờ chúng ta cùng trở lại với Android Studio.
Xem lại tài nguyên cho DroidCardsView.
Xin nhắc lại, đây là giao diện tùy chỉnh.
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.
Ví dụ, mỗi thẻ có ảnh bitmap của chính nó
và ta vẽ chúng lên màn hình bằng cách ghi đè phương thức onDraw.
Bây giờ xin nhớ rằng, việc ghi đè phương thức onDraw
thì Android không thể tối ưu hóa quá trình kết xuất giao diện này
nên công việc của nhà phát triển là phải cắt từng thẻ
như nó hiển trên màn hình để tránh việc vẽ thừa thãi.
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ẻ
một cách hiệu quả hơn.
Cùng xem tài liệu này.
Chúng ta cùng dùng phương thức canvas.clipRect để cải tiến mã.
Chúng ta sẽ sử dụng biến kiểu Variant tạo 4 tham số dạng Float.
Chúng ta cùng trở lại Android Studio.
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.
Tôi sẽ sử dụng tính năng rất hữu ích trong Android Studio này để gọi
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ã.
Chúng ta ở bảng so sánh các hiển thị, và hãy quan sát,
chú ý kĩ vào phương thức onDraw, phương thức mà chúng ta đang ghi đè
Chúng ta có trạng thái cũ của vòng lặp For ở bên trái
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.
Giờ, chúng ta lặp qua các thẻ và xem từng bước cải tiến.
Số 1, đầu tiên, chúng ta sẽ tính toán vị trí của thẻ.
Sau đó chúng ta cần gọi hàm canvas.save
Hàm này sẽ lưu trạng thái của canvas đã tồn tại
Nói cách khác,
nó duy trì trạng thái hiện tại của màn hình trước khi ta làm clipRect.
Khi chúng ta gọi phương thức clipRect
đơn giản là chúng ta thực hiện một số phép hình học nhất định
Khi ta truyền các tham số này, ta đơn giản yêu cầu hệ thống
vẽ một phần của thẻ mà chúng ta muốn nhìn thấy
Chắc rồi, phần còn lại lẽ bị ẩn đi
Giờ thì, chỉ những phần của thẻ nằm trong khoảng giới hạn
mà chúng ta vừa đặt ra mới được vẽ.
Cuối cùng, chúng ta sẽ gọi phương thức canvas.restore,
phương thức này sẽ chuyển Canvas lại trạng thái không bị cắt
Nói cách khác,
chúng ta sẽ khôi phục khoảng bị ẩn mà ta đã đặt lúc gọi phương thức clipRect
Và chúng ta sẽ lặp vòng này cho tất cả bộ bài trừ lá trên cùng.
Cụ thể, chúng ta sẽ xử lí
thẻ cuối cùng khác với các lá còn lại ở dưới.
Với cái này thì không cần phải xén hình
nên chúng ta sẽ vẽ cả lá.
Bạn có thể thấy điều đó qua câu lệnh này.
Hãy tạo mã đã được cải tiến
nếu giảm chồng điểm ảnh
ta giảm rất nhiều hình vẽ thừa
Được rồi, tuyệt vời
Như bạn thấy đây, giảm được việc vẽ thừa rất nhiều.
Tôi vọng đã làm rõ với bộ API Canvas, chúng ta có một cách
để vẽ rất hiệu quả khi làm việc với các hiển thị tùy chọn.
Nếu bạn muốn khám phá thêm về bộ API Canvas,
hãy xem tài liệu hướng đầy đủ trong phần ghi chú của giáo viên.
Các hiển thị như thế này rất tuyệt, nó có thể giúp chúng ta tạo ra
trải nghiệm người dùng (UX) độc đáo và hấp dẫn, nhưng nhớ khai báo
để giúp Android kết xuất các hiển thị một cách đẹp mắt hiệu quả
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
hãy sẵn sàng khôi phục nó, phương thức clipRect.
Được rồi, rất tốt.
Quay lại với Colt để biết về hơn về hiệu suất
好的，我们回到Android Studio
查看DroidCardsView的源文件
这是我们的自定义View
回忆一下，这个自定义View 就是用来创建重叠纸牌的
举例说，每张牌都有自己的Bitmap
我们通过重写onDraw方法将它们绘制在屏幕上
记住，一旦重写了onDraw方法
Android系统将无法对View进行渲染优化
开发者的工作就是对所有纸牌进行适当的剪辑
避免那些不必要的过度绘制
幸运的是，Canvas API为我们提供了方法
使用此方法可以更有效地绘制纸牌
我们看一下文件
我们使用canvas.clipRect方法来改进代码
我们使用这个以四个浮点数为参数的变量
好的，现在我们回到Android Studio
我们对重叠纸牌的绘制方式 作一些调整以降低过度绘制
我将使用Android Studio 自带的这个功能展示这个视图
这样你就可以看到代码之前的和当前的状态
好的，现在我们进入对比视图
我们特别看一下onDraw方法 我们使用它来重新编写
左栏是循环之前的状态
我们在右栏做一些改进
当我们堆叠纸牌时 我们分步骤对它进行改进
第一步，我们计算纸牌的方位
我们需要调用这个函数canvas.save
用来保存现在的canvas状态
换句话说
在使用clipRect API之前保存屏幕的当前状态
现在我们调用clipRect方法
其实，就是计算一些几何限制条件
当我们传入这些参数时
就是告诉系统只绘制我们想看见的那部分纸牌
显然，剩下的部分都被挡住了
现在，只有在限制边界内的那部分纸牌
才会被绘制在屏幕上
最后我们调用canvas.restore
将Canvas转化为非剪辑状态
换句话说，就是解除执行clipRect的限制条件
除了最上面的纸牌，我们其他纸牌重复此循环
特别要说的是，我们对最上面 或者说最后一张纸牌的处理方式
与其他纸牌不同
这张牌不需要剪辑
我们按它的全貌进行绘制
看这儿的声明
好了，我们把改进过的代码组装起来
看看过度绘制有没有减少
好了，非常不错
你可以看到过度绘制减少了很多
现在大家都清楚了 我们处理自定义View的时候
Canvas API为我们提供了有效的绘制方法
如果你想进一步了解Canvas API
可以查看教程文件
这样的视图可以帮助我们 创造独特并有吸引力的用户体验
但是要记住我们必须在系统中作出提示
帮助Android漂亮地呈现这些View
当你创建自定义View时 一定要检查一下过度绘制
别忘了使用clipRect方法
好的，干得不错
我们把课程交给Colt 让他为我们讲解更多性能方面的知识
好了 我們現在回到了 Android Studio
我們來檢視DroidCardsView的編碼
再次強調 這是我們的自訂視圖
我們回顧一下 這是在自訂視圖裡 建立的一疊牌
舉例來說 每張牌會有自己的點陣圖
而我們是透過覆蓋onDraw方法 來將它們繪製到螢幕上
記住 我們覆蓋了onDraw方法以後
安卓就無法在彩現這視覺時進行優化
這會是我們身為開發人員的工作
來正確裁剪每張繪製到畫面上的牌 並避免不必要的重複繪製
還好Canvas API給了我們最好的方法
來更有效率的繪製我們的牌
我們來看一下編碼檔案
我們可以用canvas.clipRect方式 來改善編碼
我們會選擇這個變種 它會拿四個浮點作為參數
好了 現在再回到Android Studio
我們來針對這疊牌做些微調 好改善重複繪製的情況
我會用Android Studio裡 這個好玩的功能
現在你就能比對修改前後的編碼
我們現在進入對照模式
特別來看一下onDraw方式 這就是我們要覆蓋的地方
左邊是原本的for迴圈
我們來看看右邊能如何做改善
我們針對每張牌一步步做改善吧
首先 我們來計算牌的位置
然後我們叫出canvas.save這個功能
它會儲存我們現有的畫布狀態
換句話說
它會保持我們套用clipRect API 之前的畫面狀態
當我們叫出clipRect方式
我們基本上是在下一些幾何限制
當我們輸入這些參數 我們基本上是在叫系統
只要繪製出我們想看的牌 它的局部畫面
明顯的 剩下的部分會被隱藏
只有在設定界線裡出現的牌
會被繪製
最後我們會叫出canvas.restore
它會將畫布返回到沒有裁剪的狀態
換言之 它會解除 我們剛剛叫出clipRect所設下的限制
我們在每張牌的編碼裡重複這個迴圈 除了最上面那張牌
我們特別把最上面也是最後那張牌
做出不同於下面其他牌的處理
這張牌不需要任何裁剪
所以我們會將它完整繪製
透過這邊這個語句完成
好了 我們來在編碼裡完成改善
看看我們降低了多少重複繪製
好了 太棒了
你可以看到過度繪製情況少很多了
我希望這課程有讓你清楚了解 Canvas API有個直接的方式
讓你在自訂視圖中更有效率的繪製
如果你希望多了解Canvas API
記得到導師註記裡去看完整的文獻
這樣的視圖可以幫助我們 創造獨特且引人注目的UX
但記住我們要給系統一些提示
來幫助安卓更有效率完成彩現
當你在創造自訂視圖時 記住要檢查過度繪製
並適時叫出clipRect方式
好了 做的太棒了
我們接下來讓柯特 分享更多效能的智慧