Natif, hybride, web app : comparaison des méthodes de scrolling sur application Android
Un pattern récurrent dans les applications mobiles consiste à afficher une liste d’items, avec éventuellement un header et/ou un footer fixe, la liste étant scrollable entre ce header et ce footer. En code Android natif cela est très facile à mettre en place avec deux TextView et une simple ListView, mais en HTML pour un site mobile ou une webapp cela peut se compliquer.
En effet, cela devrait se faire facilement en HTML5 en positionnant le header et le footer en position:fixed, et en faisant scroller la liste avec une propriété CSS overflow:scroll. Problème : bien que les navigateurs Android et iOS soient basés sur le moteur WebKit, ils ne supportaient pas ces propriétés jusque récemment. Leur support est apparu avec iOS en version 5.0 et Android en version 2.2
Plusieurs librairies javascript ont donc été développées pour apporter ce positionnement fixe et ce scrolling des listes, en imitant le scrolling inertiel natif des systèmes Android et iOS. Nous allons donc tester les plus matures :
- la plus connue, la librairie iScroll de Matteo Spinelli
- Scrollability, la librairie développé par Joey Hewitt, ancien employé chez Facebook et développeur à la fois de l’application pour Iphone et de l’application web mobile
- la librairie TouchSCroll de David Aurelio
Pour tester cela j’ai fait une petite appli Android présentant 6 écrans :
- ListView native Android
- LinearLayout comprenant un header et un footer natif, et une liste d’items HTML dans une WebView entre les deux ( solution hybride, c’est le système Android qui gère le scroll)
- WebView appelant une page HTML5, le scrolling est géré en CSS3
- WebView appelant une page HTML5, le scrolling est géré par la librairie Javascript iScroll4
- WebView appelant une page HTML5, le scrolling est géré par la librairie Javascript Scrollability
- WebView appelant une page HTML5, le scrolling est géré par la librairie Javascript TouchSCroll
La démo est disponible sur Android Market.
Les tests iPhone ont été fait en appelant directement les pages de tests suivantes :
Voici le résultat des tests sur cette appli :
Android 2.3.4 (ZTE Blade) | iOS 5.0.1 (iPhone3GS) | iOS 4.2.1 (iPhone3G) | |
---|---|---|---|
Natif | très rapide bonne inertie du scrolling pas de rebond en fin de scroll |
||
ScrollView | très rapide bonne inertie du scrolling pas de rebond en fin de scroll |
||
HTML5 | scrolling et inertie OK les scrollbars apparaissent sur tout l’écran la liste ne s’arrête pas en haut du footer mais passe sous celui-ci pas de rebond en fin de scroll |
scrolling OK les scrollbars apparaissent sur tout l’écran la liste ne s’arrête pas en haut du footer mais passe sous celui-ci peu d’inertie pas de rebond en fin de scroll |
footer non fixe ! |
iScroll4 | scrolling et inertie OK rebond en fin de scroll OK |
scrolling et inertie OK rebond en fin de scroll OK |
scrolling et inertie OK rebond en fin de scroll OK |
Scrollability | aucune inertie scrolling saccadé |
scrolling et inertie OK rebond en fin de scroll OK |
scrolling et inertie légèrement saccadés rebond en fin de scroll OK |
TouchScroll | scrolling et inertie OK pas de rebond en fin de scroll |
scrolling et inertie OK pas de rebond en fin de scroll |
scrolling et inertie légèrement saccadés pas de rebond en fin de scroll |
La bonne surprise est la librairie iScroll4 qui est la seule à fonctionner sur toutes les plateformes de test si on souhaite une compatibilité maximale. De plus elle permet d’autres fonctionnalités qu’un simple scrolling, notamment le “pull to refresh”.
On pourra éventuellement détecter les versions des navigateurs, et utiliser iScroll uniquement si iOS<=4.0 ou Android<=2.2.
Enfin à l’avenir on peut espérer que le couple HTML5/CSS3 fonctionnera correctement sur toutes les plateformes, et que l’on pourra se passer de ces librairies javascript.
Codes sources disponibles sur GitHub: