59 lines
2.7 KiB
Markdown
59 lines
2.7 KiB
Markdown
## Optimiser le chargement paresseux d'un écran complexe comportant des listes imbriquées
|
|
|
|
### Identifiants
|
|
|
|
// TODO
|
|
|
|
### Catégories
|
|
|
|
| Cycle de vie | Tiers | Responsable |
|
|
|:---------:|:----:|:----:|
|
|
| 3. Réalisation (fabrication / développement) | Réseau | UX/UI Designer |
|
|
|
|
### Indications
|
|
|
|
| Degré de priorité | Mise en oeuvre | Impact écologique |
|
|
|:-------------------:|:-------------------------:|:---------------------:|
|
|
| 4 | 4 | 5 |
|
|
|
|
| Ressources Economisées |
|
|
|:----------------------:|
|
|
| Mémoire |
|
|
|
|
### Description
|
|
|
|
Il existe beaucoup d'applications qui affichent une liste verticale contenant plusieurs listes horizontales. Par exemple l'application du Play Store, ou encore des applications de streaming de vidéo comme Netflix. Ce type de design fonctionne très bien d'un point de vue UX, mais cela represente beaucoup de vues dans tous les sens.
|
|
Avec le UI Toolkit original, par défaut, chaque liste horizontale a sa propre `RecycledViewPool`. Une optimisation pouvant réduire l'usage de la mémoire consiste à partager le `RecycledViewPool` entre ces listes horizontal si elles affichent des vues similaires.
|
|
|
|
Un autre bonne pratique consiste à limiter le nombre d'éléments qui sont préchargées pour chaque liste horizontale appartenant à la liste verticale. Par exemple si visuellement pour une liste horizontale, nous avons toujours 3,5 éléments visible à l'écran, nous pouvons appliquer sur le `LinearLayoutManager` de la liste horizontale `setInitialItemPrefetchCount(4)`. Cela permet ainsi d'indiquer à la liste verticale que dès qu'une nouvelle liste horizontale apparait à l'écran, il faut charger les 4 premiers éléments de la liste, permettant de soulager la mémoire utilisée à ce stade.
|
|
|
|
|
|
### Exemple
|
|
|
|
```kotlin
|
|
class OuterAdapter : RecyclerView.Adapter<OuterAdapter.ViewHolder>() {
|
|
|
|
...
|
|
|
|
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
|
|
// Inflate inner item, find innerRecyclerView by ID.
|
|
val innerLLM = LinearLayoutManager(parent.context, LinearLayoutManager.HORIZONTAL, false)
|
|
innerRv.apply {
|
|
layoutManager = innerLLM
|
|
recycledViewPool = sharedPool
|
|
}
|
|
return OuterAdapter.ViewHolder(innerRv)
|
|
}
|
|
...
|
|
```
|
|
|
|
Source : [Developer Android - Nested Recyclerviews](https://developer.android.com/topic/performance/vitals/render#recyclerview_nested_recyclerviews)
|
|
|
|
####
|
|
|
|
### Principe de validation
|
|
|
|
| Le nombre ... | est inférieur ou égal à |
|
|
|-----------------------------------------------------------|:-------------------------:|
|
|
| d'écran défilable n'utilisant pas le chargement paresseux | 0% |
|