ScrollableView et ScrollView

Aujourd'hui, on passe franchement dans le bricolage un peu foireux, mais qui marche (en tout cas sur l'iPhone, je n'ai pas de téléphone sous Android pour tester)

Pour faire simple, je vais de nouveau me baser sur un exemple de KitchenSink un peu modifié, à savoir scroll_views_scrollable.js

Pour faire simple, voici le code un peu nettoyé...

var win = Titanium.UI.currentWindow;

var view1 = Ti.UI.createView({
  backgroundColor:'green'
});
var l1 = Ti.UI.createLabel({
  text:'Click Me (View 1)',
  color:'#fff',
  width:'auto',
  height:'auto'
});
view1.add(l1);

var view2 = Ti.UI.createView({
  backgroundColor:'blue'
});
var l2 = Ti.UI.createLabel({
  text:'Click Me (View 2)',
  color:'#fff',
  width:'auto',
  height:'auto'
});
view2.add(l2);


var scrollView = Titanium.UI.createScrollableView({
  views:[view1,view2],
  showPagingControl:true,
  pagingControlHeight:30,
  currentPage:0
});

win.add(scrollView);

Le résultat est simple : 2 vues côté à côte, et on peut passer de l'une à l'autre en glissant avec le doigt.
Mais, on complique un peu les choses, j'ai finalement besoin d'un grand texte sur ma première vue (je vous laisse le soin de générer le Lorem Ipsum de votre choix...). Pour que le texte s'affiche complètement, vous savez déjà qu'il faut une ScrollView, sinon un petit tour par les exemples de base s'impose.
Du coup, votre code ressemble à peu près à ça :

var view1 = Ti.UI.createScrollView({
 backgroundColor:'green',
 contentHeight:'auto',
 showHorizontalScrollIndicator: false, // le scroll que je veux est uniquement vertical
 horizontalBounce: false, // idem
 showVerticalScrollIndicator:true
});

var l1 = Ti.UI.createLabel({
 text:"Lorem ipsum [...] ligula venenatis.", // long texte, en fait...
 color:'#fff',
 width:'auto',
 height:'auto'
});
view1.add(l1);

...

On essaie, et... ça marche, où est le problème ? D'accord, ça marche. Donc, pour votre application, pas de souci, vous mettez une ScrollView dans une ScrollableView.
Oui, mais finalement, votre contenu est dynamique, il vient de votre base de données. Et parfois, le long texte est finalement très court.
Ré-essayez le même code qu'avant avec un texte très court à la place du long "Lorem Ipsum"...
Impossible de passer à la vue de droite. Ne me demandez pas pourquoi exactement, mais en gros l'événement scroll doit être intercepté par la ScrollView qui n'a rien à faire (son contenu est entièrement visible), et elle ne le transmet pas au dessus d'elle.
Voilà qui est beaucoup plus gênant.
Rassurez vous, si j'écris ce billet, c'est pour vous éviter de passer des heures à tâtonner comme je l'ai fait.

Récapitulons. On sait qu'une ScrollView est acceptable dans une ScrollableView uniquement quand son contenu est plus grand que ce qu'on peut voir. Bien. Il nous reste donc à rendre cette ScrollView toujours  trop grande. Et là, on rentre dans le bricolage un peu foireux, mais visiblement efficace.

Pour que notre contenu soit plus grand, rien de tel que de lui ajouter... un long texte. Oui, vous avez bien lu. Bon, je vous rassure, on n'a pas besoin de le rendre visible.

En gros, on obtient ça :

var view1 = Ti.UI.createScrollView({
 backgroundColor:'green',
 contentHeight:'auto',
 showHorizontalScrollIndicator: false,
 horizontalBounce: false,
 showVerticalScrollIndicator:true
});

var spacer = Ti.UI.createLabel({
 text:" ",
 width: 1,
 height:400,
 visible: false,
 top: 0,
 left: 0
});
view1.add(spacer);

var l1 = Ti.UI.createLabel({
 text:"Lorem ipsum rat...",
 color:'#fff',
 width:'auto',
 height:'auto'
});
view1.add(l1);

...

Et ça marche ! Bon, je vous laisse le soin d'adapter la hauteur de votre spacer à la taille de votre vue. D'après mes tests totalement empiriques, il suffit d'un pixel en plus pour que cela fonctionne.

Dans un prochain billet, on adaptera cette technique avec un layout vertical, car cela rajoute un peu de complexité...