web-dev-qa-db-fra.com

Mise en œuvre du défilement horizontal/vertical dans Android en nid d'abeille webview/webkit?

Je prévois de mettre en œuvre une application pour tablette Honeycomb basée sur WebView (donc, ce sera essentiellement une application Web HTML5 uniquement conçue pour tablette ).

Je cherche à mettre en œuvre le défilement horizontal et vertical en faisant glisser le doigt. Pour une meilleure compréhension, j'ai créé un exemple de plan.

Horizontal Scrolling by Swiping

Cette image montre quelque chose de similaire à l'activité de définition native de Honeycomb avec les pages gauche et droite pouvant être défilées verticalement Vertical Scrolling by Swiping

Tout type de guides ou de ressources sont les bienvenus. Merci

androidhtml5webkitwebviewandroid-3.0-honeycomb
20
Hossain Khan

Regardez iScroll :

iScroll 4 est une réécriture complète du code iScroll d'origine. Le développement du script a commencé car le Webkit mobile (sur iPhone, iPad, Android) ne fournit pas de méthode native pour faire défiler le contenu dans un élément width/height fixe. Cette situation malheureuse empêche toute application Web d'avoir un en-tête et/ou un pied de page position:absolute et une zone centrale de défilement pour le contenu.

Bien que les dernières versions d'Android prennent en charge cette fonctionnalité (bien que l'assistance ne soit pas optimale), Apple semble réticent à ajouter le défilement d'un doigt aux divs ...

12
shaunix

Voici ce que j'ai trouvé jusqu'à présent:

Cela dépend de la manière dont vous souhaitez implémenter le défilement. Si vous souhaitez associer un événement de balayage, c’est le moyen le plus simple d’implémenter des bibliothèques bien connues:

  • jqTouch - Il y a un événement glisser à gauche et à droite qui peut être accroché pour faire défiler vers la gauche ou vers la droite (il semble que tout le Webkit repose les animations ne fonctionnent que sur les appareils iOS). Veuillez noter que le projet est toujours en version bêta et n'est pas très actif. EDIT: cela fait également partie de Sencha Labs - qui maintient activement Sencha Touch.
  • Sencha Touch - Ils prennent mieux en charge presque tout le contenu sur mobile et tablette. (Remarque: il est gratuit pour les applications opensource mais pas pour les applications commerciales - EDIT: elles disposent d'une licence commerciale. Consultez leur site pour plus d'informations sur les licences)
  • jQueryMobile - Ils sont très stables (dans RC1 à partir de maintenant), et ont balayé les événements gauche et droite, mais je pourrais pas trouvé glisser vers le haut ou vers le bas. Si vous avez juste besoin de glisser gauche à droite, appuyez sur, maintenez enfoncées, puis utilisez jQM. Ils ont le meilleur soutien de la communauté.
  • RAW JS - Enfin, si vous voulez quelque chose de javascript brut, visitez article HTML5Rocks pour avoir une meilleure idée en profondeur de la événement fonctionne.

J'espère que ça aide. J'ai encore du mal à mettre en œuvre le défilement vers le haut, car je ne veux pas attendre la fin du balayage, mais j'essaie plutôt de mettre en place un retour instantané avec défilement, en me rapprochant des coordonnées RAW JS, mais pas satisfaisant.

5
Hossain Khan

Hammer JS m'a été utile:

http://eightmedia.github.io/hammer.js/

5
Ian Jamieson

D'après les créateurs d'iScroll, SwipeView semble une alternative dédiée à Nice. Regardez demo 1 et demo 2 .

Je n'ai pas encore testé, mais je le ferai sûrement. Depuis les démos se comportent bien sur mon iPad.

2
kleliboux

Vous pourriez trouver cette bibliothèque très utile: https://github.com/cubiq/2-way-iScroll

Il gère le cas de défilement vertical et balayage horizontal.

0
Felix