So there should have been four unnecessary backgrounds in
the remaining files.
Let's go ahead and review.
In our base activities XML, remember, we wanted to keep this white background.
Now, in the XML file for
our chat fragment, we've declared an unnecessary white background right here.
We don't need this because we can use the white one from our main activity.
That's it for this file.
Now, in the XML for our individual chat items,
we have three unnecessary backgrounds.
We have one right here that we don't need, one right here that we don't need,
and lastly, down here, we don't this white background in our text view.
So we can go ahead and remove these.
All right. Cool.
Let's see what kind of progress we made as far as overdraw is concerned.
Now this is what your screen should look like
with these backgrounds removed properly.
Much cleaner, right?
Okay, good work.
Now, we're just about done,
but there's actually one last optimization you can make.
Notice there's overdraw here by the avatars,
because we are drawing a rectangle and then the avatar image on top of it.
Let's try and be a bit smarter here,
let's only set a background when an avatar can't be found.
Now, we can do this with some conditional code.
All right,.
So let's jump into our chat adapter code, which is responsible for
filling in our individual chat items as they get loaded.
Let's go to our get view method.
Now, down here at the bottom we actually have some logic that's displaying both
the avatar and setting a background color at the same time.
Let's see if we can get a bit more intelligent here.
Let's write some code that only sets the background color
when an avatar isn't present.
And when it is, we'll set the background color to be transparent and
just load the avatar.
We can do it like this.
All right, so here's our updated code.
Notice that when an avatar isn't present, what we're going to do is load
a transparent color into where the avatar would normally be, and
then set a true background color for the avatar.
Now, in the else case, which represents when the avatar is present,
we'll go ahead and load the avatar properly,
and then we're going to set the background color to transparent.
This way we're minimizing overdraw.
All right, so let's go ahead and see how this improvement helps us out.
Nice.
As you can see here now by our avatars,
much less overdraw with our updated code.
All right, so that was our last optimization, which means we're done.
Let's go ahead and recap.
When we started, our overdraw was much more prominent.
The first thing we did was set the background drawable to null.
The second thing we did was remove unnecessary background declarations from
our XML markup.
Now, the third and last thing we did was display a background color
only if there is no avatar present.
Now, with these changes, we ended up with this.
Much, much cleaner in terms of overdraw performance.
So, awesome job.
And remember, perf matters.
إذن يجب أن يكون هناك أربع خلفيات غير ضرورية
في الملفات المتبقية.
فلنبدأ إذن ونراجع.
في ملف XML الخاص بالنشاط الأساسي تذكر أننا سنحتفظ بالخلفية البيضاء.
الآن، في ملف XML الخاص بجزء الدردشة،
قمنا بتوضيح الخلفية البيضاء غير الضرورية هنا.
لسنا بحاجة إليها لأننا نستطيع استخدام واحدة بيضاء من على النشاط الرئيسي.
كان هذا كل شيء بالنسبة لهذا الملف.
الآن في ملف XML الخاص بعناصر الدردشة الفردية،
لدينا ثلاث خلفيات غير ضرورية.
لدينا واحدة هنا لا نحتاجها،
وواحدة هنا لا نحتاجها،
وأخيرًا هنا بالأسفل، لا نحتاج تلك الخلفية البيضاء في المشهد النصي.
لذا فلنبدأ بإزالتهم.
حسنًا. رائع.
لنرَ إذن قدر التقدم الذي أحرزناه فيما يتعلق بتراكب الرسوم.
هذا هو ما ينبغي أن تبدو عليه شاشتك بعد إزالة تلك الخلفيات بطريقة صحيحة.
أكثر نظافة، أليس كذلك؟
حسنًا، عمل رائع. لقد أوشكنا على الانتهاء تقريبًا.
لكن هناك تحسين واحد أخير يمكنك القيام به.
لاحظ أن هناك تراكبًا رسوميًا هنا عند الصور الرمزية،
لأننا رسمنا مستطيلًا ثم وضعنا الصورة الرمزية أعلاه.
فلنحاول ونكن أكثر ذكاءً هنا،
فلنضع خلفية فقط عندما لا يكون هناك صورة رمزية.
والآن، يمكننا فعل ذلك مع بعض الأكواد الشرطية.
حسنًا.
لننتقل إلى كود تهيئة الدردشة، وهو المسؤول
عن ملء عناصر الدردشة الفردية عندما يتم تحميلها.
فلنذهب إلى أسلوب getView
وسنجد هنا بالأسفل بعض الجمل المنطقية التي تعرض
الصورة الرمزية وتضبط لون الخلفية في الوقت ذاته.
فلنرَ إن كان يمكننا فعل شيء ما هنا.
فلنكتب بعض الأكواد التي تضبط لون الخلفية
فقط عندما تكون الصورة الرمزية غير موجودة.
أما عندما تكون موجودة، فسوف نضبط لون الخلفية لتصبح شفافة
وتقوم بتحميل الصورة الرمزية فحسب. يمكننا فعل ذلك هكذا.
حسنًا، هنا نجد الكود بعد تحديثه.
لاحظ أنه في حالة عد وجود الصورة الرمزية، فسوف نقوم بتحميل لون شفاف
في المكان الذي يفترض أن تكون فيه الصورة الرمزية،
ومن ثم نضبط لون الخلفية الحقيقي للصورة الرمزية.
أما في حالة else والتي تمثل الحالة عند وجود الصورة الرمزية
فسوف نقوم بتحميل الصورة الرمزية كما ينبغي.
ومن ثم نضبط لون الخلفية ليصبح شفافًا.
وبهذه الطريقة نقلل من تراكب الرسوم.
حسنًا، فلنذهب لنرى كيف ساعدتنا تلك التحسينات.
رائع. وكما ترى هنا عند الصور الرمزية،
فهناك القليل من تراكب الرسوم بعد تحديث الكود.
حسنًا، كان هذا آخر تحسين لدينا، مما يعني أننا انتهينا.
فلنقم بتلخيص ما سبق.
عندما بدأنا، كان تراكب الرسوم واضحًا جدًا.
وكان أول ما قمنا به أن ضبطنا الكائن الرسومي للخلفية ليصبح لاغيًا null.
والأمر الثاني أننا أزلنا الخلفيات غير الضرورية
من ملف الترميز XML.
والأمر الثالث والأخير الذي قمنا به أننا ضبطنا لون الخلفية
ليظهر فقط في حالة عدم وجود الصورة الرمزية.
الآن، وبفضل هذه التغييرات، انتهى بنا المطاف لهذا الشكل؛
تطبيق أكثر نظافة فيما يتعلق بأداء تراكب الرسوم.
إذن، عمل رائع.
وتذكر أن الأداء مهم.
Tendría que haber 4 fondos innecesarios
en los archivos restantes.
Sigamos y lo revisamos.
Queríamos mantener un fondo blanco en las actividades base de XML,
En el archivo XML del fragmento de chat
dijimos que había un fondo blanco innecesario, aquí exactamente.
No lo necesitamos, porque podemos usar el blanco de la actividad principal.
Eso, en cuanto a este archivo.
En el archivo XML de temas de chat individuales
hay 3 fondos innecesarias.
Hay uno aquí sin necesidad,
Otra aquí que no necesitamos,
y tampoco necesitamos este fondo en nuestra vista de texto.
Continuamos y los eliminamos.
Vale, genial.
Vamos a ver cómo progresa la sobrecarga.
Tu pantalla debería aparecer así
después de quitar todas esos fondos debidamente.
Mucho más clara, ¿no?
Vale, ¡bien hecho!
Casi hemos terminado,
pero nos queda una mejora por hacer.
¿Ves que hay aquí una sobrecarga de avatares?
Porque hay un rectángulo dibujado y, encima, la imagen de un avatar.
Intentemos mejorarlo,
poniendo solo un fondo cuando no se vea un avatar.
Lo podemos hacer con algún código condicional.
Vale.
Nos metemos en el código de adaptador del chat,
encargado de completar los motivos de chat individuales según se cargan.
Vamos al método getView.
Abajo encontramos que hay cierta lógica pues despliega los dos a la vez:
el avatar mientras configura el color de fondo.
Vamos a ver si podemos hacer algo más inteligente aquí.
Escribimos un código para configurar solo el color de fondo
cuando no haya un avatar.
Y configuramos que el color sea transparente cuando lo haya
y que solo cargue el avatar.
Lo podemos hacer así.
Vale, aquí está el código actualizado.
Fíjate que cuando no aparece el avatar se carga un color transparente
en el lugar del que aparecería con el avatar normalmente,
y luego se configura un color de fondo real para el avatar.
En el otro caso, cuando está el avatar,
lo cargaremos sin problema,
y configuraremos el color de fondo para que sea transparente.
Así minimizaremos la sobrecarga.
Vale, pues continuamos y vemos cómo nos ayuda esta mejora.
Genial.
Como ves ahora en los avatares
hay mucha menos sobrecarga con el código actualizado.
Esta era la última mejora, así que ya está hecho.
Continuamos y resumimos.
Al empezar, la sobrecarga se notaba mucho más.
Lo primero que hicimos fue anular el dibujable de la imagen de fondo.
Lo segundo, quitar las imágenes de fondo innecesarias de las etiquetas de XML,
Y lo tercero y último, desplegar un color de fondo
cuando no hay un avatar.
Con estos cambios hemos terminado con esto.
Está mucho más limpio en relación al rendimiento de la sobrecarga.
¡Guay!
Recuerda: el rendimiento importa.
Il fallait donc trouver quatre fonds inutiles
dans les autres fichiers.
Allons voir ce qu'il en est.
Dans le XML de l'activité de base, rappelons qu'on veut garder ce fond blanc.
Mais dans le fichier XML des éléments du salon,
on a affiché un fond blanc inutile juste ici.
Il est inutile puisqu'on utilisera le fond blanc de notre activité principale.
C'est tout pour ce fichier.
Ensuite dans le XML des divers éléments du chat,
on a trois fonds inutiles.
On en a un ici, qui ne sert à rien ; un autre ici, pas plus utile ;
et enfin ici, en bas, ce fond blanc dans la vue textuelle est inutile.
On peut donc les retirer.
Bien, cool.
Voyons nos progrès pour ce qui est de la superposition…
Voilà l'aspect théorique de votre écran
une fois ces fonds retirés correctement.
C'est déjà mieux. N'est-ce pas ?
Ok, bon travail.
On a presque fini,
mais en fait, il reste une optimisation possible.
Il y a de la superposition ici, au niveau des avatars.
C'est parce qu'on dessine un rectangle puis l'avatar par-dessus.
Essayons d'être un poil plus malin.
On ne mettra un fond ici que faute d'avatar.
On y arrivera avec du code conditionnel.
Bien,
passons dans notre code d'adaptation du salon, le code chargé de créer
chacun des éléments du chat lors du chargement.
Allons voir notre méthode getView.
Juste en bas on a en fait un bout de code
qui affiche à la fois l'avatar et précise en même temps une couleur de fond.
Voyons si on ne peut pas être plus malins ici.
Écrivons un code qui ne précise la couleur de fond
qu'en l'absence d'avatar.
Et quand il y en aura, on rendra juste le fond transparent
et on chargera l'avatar.
On peut le faire ainsi.
Bien, voici donc notre code révisé.
Notez que quand il n'y a pas d'avatar, ce qu'on va faire,
c'est charger une couleur transparente là où serait normalement l'avatar,
puis définir une vraie couleur de fond pour l'avatar.
Dans le cas du else, c'est-à-dire quand l'avatar existe,
on va poursuivre en chargeant l'avatar correctement,
et passer la couleur de fond à : « transparent ».
Ce qui réduit la superposition.
Bon, voyons donc si cette amélioration nous a aidés.
Joli.
Comme on peut le voir à nos avatars,
notre code révisé a bien moins de superposition.
C'était notre dernière optimisation, on en a donc fini.
Faisons un récapitulatif.
Au début, la superposition était beaucoup plus évidente.
On a d'abord passé le drawable en arrière-plan à null.
Deuxième opération, on a éliminé les déclarations des fonds inutiles
de nos balises XML.
Puis la troisième et dernière opération a été de n'afficher une couleur de fond
que faute d'avatar.
Grâce à ces changements, on a obtenu ceci.
C'est beaucoup plus net en termes de performance des superpositions.
C'est donc du beau travail.
N'oubliez pas : les performances, ça compte.
Seharusnya ada empat latar belakang tidak perlu di fail yang tersisa.
Mari kita lihat dan tinjau.
Di XML aktivitas dasar kita, ingat, kita ingin latar belakangnya tetap putih.
Dalam fail XML untuk fragmen obrolan,
kita menemukan latar belakang putih yang tidak perlu di sini.
Ini tidak diperlukan karena bisa memakai yang putih dari aktivitas utama.
Sudah cukup untuk fail ini.
Dalam XML untuk butir obrolan individual kita,
kita punya tiga latar belakang yang tidak perlu.
Ada satu yang tidak diperlukan di sini, satu lagi ada di sini,
dan terakhir, di bawah ini, kita tak perlu latar belakang putih ini di tampilan teks.
Mari lanjut dan hapus semua.
Oke, sudah. Mari kita lihat kemajuan, sehubungan dengan overdraw.
Seperti ini harusnya tampilan layar Anda
dengan latar belakang dihilangkan secara tuntas.
Lebih bersih, kan?
Oke, kerja bagus.
Hampir selesai.
Tapi, sebenarnya ada satu pengoptimalan akhir yang dapat dilakukan.
Perhatikan ada overdraw di sini di sebelah avatar,
sebab kita menggambar persegi lalu ada gambar avatar di atasnya.
Mari mencoba lebih cerdik di sini.
Coba atur latar belakang hanya bila avatar tidak dapat ditemukan.
Ini bisa dilakukan dengan kode bersyarat.
Baik, kita beralih ke kode adaptor obrolan,
yang bertanggung jawab mengisi butir obrolan individual kita saat dimuat.
Lanjut ke metode 'dapatkan tampilan'.
Di bawah sini kita memiliki beberapa logika
yang menampilkan avatar dan pengaturan warna latar belakang secara bersamaan.
Mari periksa apakah kita bisa sedikit lebih cerdik.
Mari tulis kode yang hanya mengatur warna latar belakang, jika tak ada avatar.
Jika ada, atur warna latar menjadi transparan dan cukup memuat avatar.
Kita dapat melakukannya seperti ini. Baiklah, ini kode yang telah diperbarui.
Perhatikan ketika tidak ada avatar, yang kita lakukan adalah
memuat warna transparan ke tempat avatar yang biasanya,
lalu mengatur warna latar belakang yang sebenarnya untuk avatar.
Di kasus lain, yang menyajikan adanya avatar,
kita langsung memuat avatar seperti seharusnya,
lalu buat warna latar belakang menjadi transparan.
Ini meminimalkan overdraw.
Mari lanjut dan melihat cara perbaikan ini membantu.
Bagus.
Seperti yang Anda lihat di avatar kita,
lebih sedikit overdraw dengan kode kita yang diperbarui ini.
Itulah pengoptimalan terakhir kita, artinya selesai.
Mari kita ulangi.
Saat mulai, overdraw kita jauh lebih menonjol.
Pertama-tama kita atur latar belakang yang bisa digambar ke nol.
Kedua, kita menghapus dekorasi latar belakang yang tidak perlu dari markah XML.
Terakhir, yang ketiga, kita tunjukkan warna latar belakang
hanya jika avatar tidak ada.
Dengan perubahan ini, kita dapat hasil seperti ini.
Jauh lebih bersih terkait kinerja overdraw.
Jadi, kerja yang bagus.
Ingatlah, kinerja itu penting.
さあ 残るファイルの中に 4つの不要な背景があるはずです
再検討しましょう
基本アクティビティ XML で 白い背景を残すことを思い出してください
さてチャットフラグメント用 XML ファイル内で
ここで不要な白い背景を宣言しています
メインアクティビティの白い背景を使えるので これは不要です
このファイルでは以上です
個々のチャットアイテム用 XML ファイル内には
３つの不要な背景があります
ここに不要な1つがあり ここにも不要な1つがあり
最後に下のここにもテキスト表示で 不要な白い背景があります
これらを削除できます
いいですね
オーバードローについて どんな進展があったか見てみましょう
これが画面に表示される はずです
適切に背景が削除されています
すっきりしました
よくできました
ほぼ完成ですが
実際には最適化できることが まだ1つ残っています
ここにアバターによる オーバードローがありますね
長方形を描いてから その上にアバター画像を描いたからです
ここをもっとすっきりさせましょう
アバターが表示されないところにだけ 背景を設定しましょう
条件コードで それができます
いいですね
では ChatAdaptor コードに 飛びましょう
これは読み込むと 個々のチャットアイテムを満たす役割をします
getView メソッドに進みましょう
下のここにアバターと 背景の色の設定の両方を
同時に表示する ロジックがあります
もっとインテリジェントに できるでしょうか
アバターが存在しない場合のみ
背景の色を設定するコードを 書いてみましょう
その場合背景の色が透明になり
アバターだけを読み込む設定にします
このように設定できます
いいですね これが更新したコードです
アバターが存在しない時には
通常アバターがある場所に 透明な色を読み込み
アバターに対して実際の背景色を 設定します
そうでない場合 つまり アバターが存在するときには
アバターを適切に読み込み
次いで背景の色を透明に設定します
オーバードロー最小化です
いいですね では改善の効果を見てみましょう
素晴らしい
更新したコードによって
オーバードローがかなり少なくなった アバターがここで確認できます
いいですね 最後の最適化でした これで完成です
ではまとめです
開始時には オーバードローが もっと目立っていました
まず 描画可能な背景を 無効化する設定をしました
２番目 XML マークアップから 不要な背景の宣言を削除しました
３番目 最後に アバターが存在しない場合のみ
背景の色を表示しました
これらの変更によって この様に最適化できました
オーバードローのパフォーマンスは かなりすっきりしました
大変よくできました
パフォーマンス／完璧は 大事ですね
불필요한 배경의 개수는 4개였어요
나머지 2개의 XML 파일에서 말이예요
같이 한번 살펴보아요
기본 액티비티 XML에서는
흰 배경을 유지한다는 것을 기억하시죠?
그런데 fragment_chats.xml에서는
불필요한 흰색 배경 속성을 선언했네요
이미 기본 액티비티에서 선언했기 때문에 이 부분은 필요하지 않아요
이 파일엔 그게 전부네요
개별적인 채팅 항목을 지정한 chat_item.xml 파일을 보면
불필요한 배경이 3개 있어요
바로 여기에 하나 있고
이 녀석도 필요하지 않고
마지막으로 TextView에 불필요한 배경 속성이 하나 더 있네요
그럼 이 부분들을 삭제할게요
좋아요
그럼 overdraw가 얼마나 줄었나 볼까요?
불필요한 배경을 지운 후 보이는 화면의 모습입니다
훨씬 깔끔해졌죠?
좋아요 잘 해주셨어요
이제 거의 끝났습니다
하지만 아직 한가지 최적화할 수 있는 부분이 남았어요
아바타들 주변 overdraw를 보세요
저희가 사각형을 우선적으로 그리고 그 위에 아바타를 그려서 일어나는 현상이에요
그럼 조금만 더 똑똑하게 접근해보아요
아바타를 찾지 못 할 경우에만 배경을 지정해볼게요
조건문 코드로 할 수 있어요
한번 ChatAdapter 코드로 가 볼게요
이 코드는 각 채팅 아이템의 내용을 채우는 역할을 하고 있어요
getView() 메소드를 볼게요
아래를 보시면 여기에 정의된 로직은
아바타와 배경색을 모두 설정하고 있어요
여기를 조금만 더 똑똑하게 작성해보아요
우선 아바타가 나타나지 않을 때만
배경을 설정하도록 합시다
그리고 아바타가 있으면 그땐 배경을 투명으로 설정하고
아바타만 로드할게요
이렇게 하시면 됩니다
업데이트된 코드에요
아바타가 없을 때는
아바타가 있어야 할 공간에 투명한 배경을 로드합니다
그다음 아바타 대신 배경색을 입힐 거예요
아바타가 있을 경우엔
아바타를 로드하고
배경색을 투명하게 설정합니다
이렇게 수정하면 overdraw를 최소화하죠
그럼 얼마나 개선됐는지 볼게요
좋은데요
여기 아바타 주변을 보시면
업데이트 된 코드는 overdraw가 많이 줄었어요
그게 마지막 수정사항이었습니다 이제 다 됐어요
다시 한번 정리해 볼까요?
처음 시작했을 땐 overdraw가 이렇게 많았죠
처음으로 한 것은 배경 drawable을 null값으로 설정하고
그 다음엔 불필요한 배경 속성을
XML에서 삭제했어요
그리고 마지막으로
아바타가 없을 경우에만 배경색을 설정하도록 수정했어요
모든 수정사항을 적용한 결과물입니다
Overdraw 측면에서 훨씬 깔끔해졌습니다
정말 잘 하셨어요
그리고 꼭 기억하세요 성능은 중요합니다
Então deveria haver quatro fundos desnecessários
nos arquivos restantes, vamos em frente e rever isso.
Em nossas atividades base XML,
lembra que queríamos este fundo branco?
Agora, no arquivo XML de nosso fragmento de bate-papo,
nós declaramos um fundo branco desnecessário aqui.
Não precisamos desse, podemos usar o branco
de nossa atividade principal, é tudo para este arquivo.
No XML para nossos itens individuais de bate-papo,
Temos três fundos desnecessários.
Temos um aqui que nós não precisamos
um aqui mesmo que não precisamos,
e, aqui em baixo, não precisamos deste fundo branco em nossa text view
Então podemos removê-los.
Perfeito, legal! Vamos ver que progresso
fiizemos com relação ao overdraw.
Agora, sua tela estar algo assim
com estes fundos devidamente removidos.
Bem mais limpo, certo? Legal, bom trabalho.
Estamos quase terminando,
mas há uma última otimização que você pode fazer.
Observe que há overdraw aqui junto dos avatares,
porque estamos desenhando um retângulo e a imagem de avatar em cima dele.
Vamos ser um pouco mais inteligentes
vamos apenas definir um fundo quando um avatar não pode ser encontrado.
Podemos fazer isto com código condicional.
Vamos pular para o código de adaptador de bate-papo,
responsável pelo preenchimento
de nossos itens de bate-papo individuais carregados.
Vamos para o nosso método getView.
Aqui em baixo realmente temos alguma lógica
que está exibindo o avatar
e definindo uma cor de fundo ao mesmo tempo.
Vamos tentar ser mais inteligentes aqui.
Vamos escrever um código que apenas defina a cor de fundo
quando um avatar não está presente.
E quando está, vai definir a cor de fundo como transparente
e apenas carregar o avatar.
Podemos fazer isso assim.
Então aqui está o nosso código atualizado.
Observe que quando um avatar não está presente,
o que vamos fazer é carregar uma cor transparente
para onde o avatar estaria normalmente,
e então definir uma verdadeira cor de fundo para o avatar.
Agora, no outro caso, quando o avatar está presente,
Vamos avançar e carregar devidamente o avatar,
e depois vamos definir a cor de fundo para transparente.
Assim minimizamos o overdraw.
Vamos então avançar e ver como esta melhoria nos ajuda.
Como pode ver aqui junto dos avatares,
muito menos overdraw com nosso código atualizado.
Então essa foi nossa última otimização,
ou seja, terminamos, vamos seguir e rever.
Quando começamos, nosso overdraw era mais proeminente.
Primeiro definimos o desenhável do fundo para null.
A segunda coisa que fizemos
foi excluir declarações de fundo desnecessárias da nossa marcação XML.
A terceira e última coisa que fizemos
foi exibir uma cor de fundo, somente se não houver nenhum avatar.
Com essas mudanças, acabamos com isto.
Bem mais limpo em termos de desempenho de overdraw.
Bom trabalho!
E lembre-se, desempenho importa.
У нас должно быть четыре ненужных элемента background
в оставшихся файлах.
Давайте разберемся с ними.
Первый — в XML-файле с основными процессами. Здесь мы оставляем белый фон намеренно.
Но в XML-файле
с кодом чата мы лишний раз объявили белый фон вот здесь.
Это действие излишне, поскольку белый фон уже задан в MainActivity.
В этом файле все.
В XML-файле с кодом для индивидуальных элементов чата
у нас три ненужных элемента background.
Вот этот нам не нужен. Вот этот тоже.
И последний внизу: этот белый фон в разметке не нужен.
Так что мы можем их удалить.
Отлично.
Посмотрим, что нам удалось сделать с наложениями.
Вот так должен выглядеть ваш экран,
если вы удалили все ненужные элементы background.
Аккуратнее, правда?
Хорошая работа.
Мы почти закончили.
Но нам нужно внести еще одну поправку.
Обратите внимание на наложение в области аватаров.
Здесь сначала отрисовывается прямоугольник, а уже поверх него — аватар.
Давайте поступим хитрее.
Пусть фон задаётся только тогда, когда аватар не удалось обнаружить.
Это можно сделать путем добавления условия.
Хорошо.
Откроем код ChatAdapter, который отвечает
за наполнение элементов чата при их загрузке.
Перейдем к методу getView.
В самом низу есть логическое выражение, которое одновременно
выводит на экран аватар и фоновую заливку.
Попробуем сделать его чуть более рациональным.
Напишем код, который будет задавать цвет фона
только при отсутствии аватара,
а при его наличии делать фон прозрачным
и просто загружать аватар.
Это можно реализовать следующим образом.
Вот так выглядит новый код.
Когда аватар отсутствует, мы просто загружаем
фон прозрачного цвета туда, где должен был находиться аватар,
а затем задаем настоящий цвет фона.
При выполнении условия else, когда аватар есть в наличии,
происходит обычная загрузка этого аватара.
а затем устанавливается прозрачный цвет фона.
Так мы минимизируем наложение.
Посмотрим, как эти изменения исправили ситуацию.
Отлично.
Как можно заметить,
с обновленным кодом наложений стало значительно меньше.
Это была последняя оптимизация. На этом здесь всё.
Повторим последовательность шагов.
В самом начале наложение было намного заметнее.
Мы установили для атрибута drawable значение null.
Затем мы удалили ненужные объявления фона
из XML-разметки.
И, наконец, мы ввели условие, по которому цвет фона отображается
только при отсутствии аватара.
После этих поправок получился вот такой результат.
Здесь значительно меньше наложений при отрисовке.
Отличная работа.
И помните: perf помогает!
Geri kana dosyalarda dört tane gereksiz arka plan
olmalıydı.
Devam edelim ve gözden geçirelim.
Hatırlayın, temel XML aktivitelemerizmide, bu beyaz arka planı korumak istiyorduk.
Sohbet bölümü XML dosyası için,
buraya gereksiz bir beyaz arka plan bildirdik.
Buna ihtiyacımız yok çünkü ana aktiviteden bir beyaz arka plan kullanabiliriz.
İşte burada.
Sohbet öğleleri XML dosyasında,
üç tane gereksiz arka plan var.
Bir tane burada, bir tane şurada, ve bir tane de burada,
metin görünümünde ihtiyacımız olmayan beyaz arka planlar var.
Devam edelim ve bunları kaldıralım.
Pekala. İşte oldu.
Abartılı çizimle ilgili ne kadar ilerleme sağladığımıza bir bakalım.
Arka planları kaldırdığınızda
ekranınız bu şekilde görünmeli.
Daha net, değil mi?
Tamam, iyi iş çıkardık.
Neredeyse bitirmek üzereyiz,
fakat yapabilieceğiniz bir optimizasyon daha var.
Avartarların yanında bir abartılı çizim var.
Bir dikdörtgen çizdik ve avatar resmini de üzerine çizdik.
Şimdi şunu deneyelim,
avatarın olmadığı bir arka plan kuralım.
bunu, koşullu kod ile yapabiliriz.
Pekala.
Sohbet bağdaştırıcı kodumuza gidelim. Bu bağdaştırıcı,
sohbet öğelerini, yüklenmelerinden sonra, doldurmakla görevlidir.
Görünüm metodumuza gidelim.
Aşağıda, avatarı gösteren ve arka plan rengini kuran
bir mantığımız var.
Biraz zekice hamleler yapıp yapmayacağımızı görelim.
Sadece arka plan regini kuran kodlar yazalım.
Avaratı bir kenara bırakalım.
Arka plan rengini şeffaf olarak kuracağız ve
avatarı yükleyeceğiz.
Bu şekilde yapabiliriz.
İşte güncellenmiş kodumuz.
Dikkat edin, avatar şu anda mevcut değil. Yapacağımız şey, avatarın olduğu yere
şeffaf bir arka plan rengi yükleyeceğiz, daha sonra da avatar için
gerçek bir arka plan rengi kuracağız.
Avatarın mevcut olduğu başka bir örnekte ise,
avatarı yükleyeceğiz ve
arka plan rengini, şeffaf olarak kuracağız.
Böylece, abartılı çizimi minimize ediyoruz.
Pekala, şimdi bu ilerlemenin bize nasıl yardımcı olduğuna bakalım.
Çok güzel.
Güncellenmiş kodumuz sayesinde,
avatarlarımızın yanında daha az abartılı çizim var.
Pekala, bu son potimizasyonumuzdu, yani işimizi bitirdik.
Tekrar edelim.
Başladığımızda, abartılı çizimler daha belirgindi.
İlk olarak, arka planı boş olarak ayarladık.
İkinci olarak, XML biçimlendirmemizden gereksiz arka plan bildirimlerini
kaldırdık.
Yaptığımız üçüncü ve son şey de, avatarım mevcut olmadığında,
bir arka plan rengi göstermek oldu.
Bu değişiklikler sonucunda, ekranımız bu hale geldi.
Üstüste çizim anlamında çok ama çok daha net.
İyi iş çıkardık.
Unutmayın, performans önemlidir.
Do đó cần bốn nền không cần thiết
trong các tập tin còn lại.
Hãy tiếp tục và xem xét.
Trong hoạt động cơ sở XML, nhớ rằng, chúng ta muốn giữ nền trắng này.
trong tập XML
cho đoạn trò chuyện, ta đã chỉ ra nền trắng không cần thiết tại đây.
Ta không cần vì ta sử dụng nền trắng từ hoạt động chính.
Nó dành cho tập này.
Giờ trong tập XML mục trò chuyện cá nhân,
Ta có ba nền không cần thiết
Ta có một quyền ở đây do đó ta không cần
nền trắng này cho giao diện văn bản.
Ta tiếp tục và bỏ qua
Tốt. Tuyệt
Hãy xem ta đạt được tiến bộ nào liên quan đến vẽ chồng điểm ảnh
Màn hình của bạn sẽ giống như vầy
với việc loại bỏ nền thích đáng
Sạch hơn không?
Okay, tốt.
Xong rồi
nhưng thật sự còn một tối ưu hóa bạn cần làm.
Thông báo có vẽ chồng điểm ảnh ở hình đại diện,
vì ta đang vẽ hình chữ nhật và hình đại diện bên trên.
Cố gắng thông minh một chút ở đây,
Hãy thiết lập một nền khi không tìm được ảnh đại diện.
Làm điều này với một số mã có điều kiện.
Tốt.
Giờ nhảy vào mã chuyển đổi trò chuyện, chịu trách nhiệm
điền vào mục trò chuyện cá nhân khi chúng được tải.
Hãy xem phương pháp giao diện của ta.
Bên dưới này chúng ta thật sự có logic khi hiển thị
cả hai ảnh đại diên và nền cài đặt cùng một lúc.
Hãy xem ta có thêm ít thông minh ở đây không.
Hãy viết ra vài mã chỉ thiết lập màu nền
Khi ảnh đại diện không có.
Khi có ảnh đại diện, màu nền cần được lập trong suốt
và tải đến ảnh đại diện.
Ta có thể làm như vầy.
Ổn rồi, đây là mã cập nhật của chúng ta.
Chú ý khi không có ảnh đại diện,
ta sẽ tải màu trong suốt vào vị trí thường gặp của ảnh đại diện
và lập màu nền thật cho ảnh đại diện.
trong trường hợp khác khi có ảnh đại diện
chúng ta sẽ tiếp tục và tải ảnh đại diện thích hợp
và ta sẽ thiết lập màu nền thành trong suốt.
Cách này giảm chồng điểm ảnh
tiếp tục và xem cải tiến này sẽ giúp ta thế nào
Tuyệt.
bây giờ bạn có thể thấy ảnh đại diện,
ít vẽ chồng điểm ảnh hơn khi cập nhật mã.
Đó là tối ưu hóa cuối cùng nghĩa là chúng ta đã xong.
Hãy tiếp tục và tóm tắt lại.
Khi bắt đầu, vẽ chồng điểm ảnh nổi bật hơn.
Việc đầu tiên là lập đường vẽ nền bằng không.
Thứ hai là xóa các khai báo không cần thiết từ
XML.
Điều thứ 3 và cuối cùng là chỉ hiển thị màu nền
nếu không có ảnh đại diện.
với những thay đổi này, chúng ta kết thúc ở đây.
Giờ thì sạch hơn dưới dạng hiệu năng vẽ chồng ảnh điểm.
Tuyệt vời.
Hãy nhớ vấn đề hiệu năng này nhé
在剩下的文件中应该可以找到4个
不必要的背景
我们来查看一下
在BaseActivity中 记住我们希望保留白色背景
现在，我们来看聊天片段XML文件
我们在这里声明了一个不必要的白色背景
我们并不需要这个声明 因为可以使用MainActivity的白色背景
这就是要找的不必要的背景
现在，来看聊天记录单个XML文件
这里有三个不必要的背景
这里有一个 这里还有一个
最后一个在这里 我们在文本视图中不需要这个白色背景
我们来删除它们
好了，现在我们来看看 过度绘制的情况有没有改善
你的屏幕就应该像现在这样
恰当地删除这些背景
干净多了，不是吗?
好了，干得不错
我们就快大功告成了
但是你还可以再做一个优化
注意头像区域仍存在过度绘制
因为我们绘制了一个方框然后再绘制头像图片
我们来试试看，动下脑筋
在没有获取到头像时我们才设置一个背景
我们可以使用一些条件码来实现
好了
我们找到聊天适配器代码
这部分代码负责在个人聊天记录上传后进行填写
我们找到getview方法
在底部这里我们找到一个逻辑操作
用来显示头像的同时设置背景颜色
我们来看看能否变得更智能一些
我们来写一段代码
在未获取到头像时仅用来设置背景颜色
然后我们将把背景颜色设置为透明
然后上传头像
像这样做
好了，这就是我们更新后的代码
注意，当未获取到头像时我们要做的是
在头像通常的位置加载透明色
然后，为头像设置真正的背景色
剩下的就是获取到头像时的操作
我们恰当地加载头像
然后，我们将背景色设置为透明
这样我们就能将过度绘制最小化
好了，我们来看看情况有没有改善
很好
你可以看到头像区域
在更新代码后过度绘制减少了
好了，这就是我们最后的优化 大功告成
我们总结一下
优化前过度绘制非常严重
首先要做的，就是将背景图片设置为null
其次，就是清除XML标记中
不必要的背景声明
最后，我们只在未获取到头像时
显示背景颜色
经过这些优化，我们再来看看
过度绘制的情况相比开始有了很大改善
干得漂亮
记住，性能决定一切
在另外兩個檔案中你應該可以找到
四個不必要的背景編碼
我們一起來回顧一下
記住 我們希望在基礎介面 XML裡保留白色背景
在聊天分段的XML檔案中
我們在這邊找到一個不必要的白色背景設定
因為在主要介面中已經做過設定了 這個檔案就完成了
現在到聊天項目的XML檔案中
我們找到三個不必要的背景設定
這個不需要 這個不需要
最下面在TextView這裡也不需要
我們直接把它們通通移除 好了
現在來看看過度繪製問題我們改善的如何
在這些不必要的背景被移除後
你的螢幕應該看起來像這樣 是不是更乾淨了？
好了 做的好 現在我們差不多完成了
只剩最後一個優化動作
注意看頭像這邊的過度繪製問題
因為這邊我們先畫了個四方型 再把頭像圖繪製上去
我們來使點小聰明
讓背景只繪製在沒有頭像的區塊
我們可以設一些編碼條件來做到這點
好了
我們進入Chat Adapter編碼來看看
哪個部分是負責填入個別的聊天項目
我們先進入getView模式
下面這裡有個邏輯設定
同時顯示頭像與背景色
我們看看可不可以寫的聰明點
我們來寫個編碼讓背景色
只在頭像不存在時出現
當頭像出現時 我們將背景色設為透明
讓它只需要繪製頭像
就像這樣做
好了 這是我們更新的編碼
你會發現當頭像不存在時
我們在頭像應該出現的地方 設定一個透明的顏色
這邊的控制就完成
接下來到了Else的條件控制
當頭像存在時我們就讓它正常顯示
然後將頭像的背景色設為透明
這樣我們就成功減少過度繪製
好那我們來看看這個調整改善了多少 漂亮
你現在可以看到我們頭像這邊
在更新編碼後降低了重複繪製的問題
好了 那是我們最後一個優化動作 代表我們已經完成所有調整
我們再來複習一遍
在一開始 我們的過度繪製情況非常明顯
我們第一件事情 是把背景繪圖設為無效值
第二件事 將不必要的背景編碼
從XML標記中移除
最後一件事 是在沒有頭像存在時
再顯示背景色
做了這些修改後 我們得到這個結果
從過度繪製的角度來看 它變得更乾淨了
做的太棒了
要記住 性能表現真的很重要