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方式
好了 做的太棒了
我們接下來讓柯特
分享更多效能的智慧