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 ファイル内には
3つの不要な背景があります
ここに不要な1つがあり
ここにも不要な1つがあり
最後に下のここにもテキスト表示で
不要な白い背景があります
これらを削除できます
いいですね
オーバードローについて
どんな進展があったか見てみましょう
これが画面に表示される
はずです
適切に背景が削除されています
すっきりしました
よくできました
ほぼ完成ですが
実際には最適化できることが
まだ1つ残っています
ここにアバターによる
オーバードローがありますね
長方形を描いてから
その上にアバター画像を描いたからです
ここをもっとすっきりさせましょう
アバターが表示されないところにだけ
背景を設定しましょう
条件コードで
それができます
いいですね
では ChatAdaptor コードに
飛びましょう
これは読み込むと
個々のチャットアイテムを満たす役割をします
getView メソッドに進みましょう
下のここにアバターと
背景の色の設定の両方を
同時に表示する
ロジックがあります
もっとインテリジェントに
できるでしょうか
アバターが存在しない場合のみ
背景の色を設定するコードを
書いてみましょう
その場合背景の色が透明になり
アバターだけを読み込む設定にします
このように設定できます
いいですね
これが更新したコードです
アバターが存在しない時には
通常アバターがある場所に
透明な色を読み込み
アバターに対して実際の背景色を
設定します
そうでない場合 つまり
アバターが存在するときには
アバターを適切に読み込み
次いで背景の色を透明に設定します
オーバードロー最小化です
いいですね
では改善の効果を見てみましょう
素晴らしい
更新したコードによって
オーバードローがかなり少なくなった
アバターがここで確認できます
いいですね 最後の最適化でした
これで完成です
ではまとめです
開始時には オーバードローが
もっと目立っていました
まず 描画可能な背景を
無効化する設定をしました
2番目 XML マークアップから
不要な背景の宣言を削除しました
3番目 最後に
アバターが存在しない場合のみ
背景の色を表示しました
これらの変更によって
この様に最適化できました
オーバードローのパフォーマンスは
かなりすっきりしました
大変よくできました
パフォーマンス/完璧は
大事ですね
불필요한 배경의 개수는 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標記中移除
最後一件事
是在沒有頭像存在時
再顯示背景色
做了這些修改後
我們得到這個結果
從過度繪製的角度來看
它變得更乾淨了
做的太棒了
要記住 性能表現真的很重要