Parfois, on souhaite bénéficier de l’avantage des onglets (ne voir que certaines vues à la fois) sans pour autant utiliser leur présentation graphique (parce que, par exemple, les onglets prennent trop de place à l’écran). On peut ainsi préférer passer d’une vue à l’autre par un mouvement du doigt sur l’écran ou en secouant le terminal.
La bonne nouvelle est que le mécanisme interne des onglets pour basculer entre les vues est disponible dans le conteneur ViewFlipper, qui peut être utilisé différemment d’un onglet traditionnel.
Figure 10.8
La même application, après la création de trois onglets en cours d’exécution.
Chapitre 10 Utiliser de jolis widgets et de beaux conteneurs 121
ViewFlipper hérite de FrameLayout, que nous avons utilisé plus haut pour décrire le fonctionnement interne d’un TabWidget. Cependant, il ne montre que la première vue fille au départ : c’est à vous qu’il appartient de mettre en place le basculement entre les vues, soit manuellement par une action de l’utilisateur, soit automatiquement par un timer.
Voici, par exemple, le fichier de description du projet Fancy/Flipper1, qui utilise un Button et un ViewFlipper :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button android:id="@+id/flip_me"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Bascule–moi !"
/>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FF00FF00"
android:text="Premier panneau"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FFFF0000"
android:text="Second panneau"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textColor="#FFFFFF00"
android:text="Troisieme panneau"
/>
</ViewFlipper>
</LinearLayout>
Ce layout définit trois vues filles de ViewFlipper, chacune étant un TextView contenant un simple message. Vous pourriez évidemment choisir des vues plus complexes.
Pour basculer manuellement entre les vues, nous devons ajouter un écouteur au bouton pour que le basculement ait lieu lorsqu’on clique dessus :
public class FlipperDemo extends Activity { ViewFlipper flipper;
@Override
public void onCreate(Bundle icicle) { super.onCreate(icicle);
setContentView(R.layout.main);
flipper=(ViewFlipper)findViewById(R.id.details);
Button btn=(Button)findViewById(R.id.flip_me);
btn.setOnClickListener(new View.OnClickListener() { public void onClick(View view) {
flipper.showNext();
} });
} }
Il s’agit simplement d’appeler la méthode showNext() de ViewFlipper, comme pour n’importe quelle classe ViewAnimator.
Le résultat est une activité très simple : un clic sur le bouton fait apparaître le TextView suivant, en rebouclant sur le premier lorsqu’ils se sont tous affichés (voir Figures 10.9 et 10.10).
Figure 10.9
L’application Flipper1 montant le premier panneau.
Chapitre 10 Utiliser de jolis widgets et de beaux conteneurs 123
Nous pourrions bien sûr gérer tout cela plus simplement en utilisant un seul TextView et en modifiant son texte et sa couleur à chaque clic. Cependant, vous pouvez imaginer que le contenu du ViewFlipper pourrait être bien plus compliqué – inclure, par exemple, tout ce que l’on peut mettre dans un TabView.
Comme pour un TabWidget, le contenu d’un ViewFlipper peut ne pas être connu lors de la compilation et, comme pour un TabWidget, il est relativement simple d’ajouter du contenu à la volée.
Voici, par exemple, le layout d’une autre activité, celle du projet Fancy/Flipper2 :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</ViewFlipper>
</LinearLayout>
Vous remarquerez que l’élément ViewFlipper n’a aucun contenu au moment de la compi-lation. Notez également qu’il n’y a pas de bouton pour basculer entre les contenus – nous reviendrons sur ce point dans un instant.
Figure 10.10
La même application, après basculement vers le second panneau.
Pour le contenu du ViewFlipper, nous créerons de gros boutons contenant, chacun, un ensemble de mots quelconques. Nous configurerons également le ViewFlipper pour qu’il boucle automatiquement sur ces widgets, en utilisant une animation pour la transition :
public class FlipperDemo2 extends Activity {
static String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "consectetuer", "adipiscing", "elit",
ViewFlipper flipper;
@Override
public void onCreate(Bundle icicle) { super.onCreate(icicle);
setContentView(R.layout.main);
flipper=(ViewFlipper)findViewById(R.id.details);
flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
flipper.setFlipInterval(2000);
flipper.startFlipping();
} }
Après avoir obtenu le widget ViewFlipper à partir du fichier de disposition, nous commençons par configurer les animations d’entrée et de sortie. En termes Android, une animation est une description de la sortie d’un widget ("out") et de son entrée ("in") dans la zone visible de l’écran. Les animations sont, toutefois, un sujet complexe, méritent leur propre chapitre et ne seront donc pas décrites ici. Pour le moment, il suffit de savoir qu’il s’agit de ressources stockées dans le répertoire res/anim/ du projet. Dans cet exemple, nous utilisons deux exemples fournis par le SDK et publiés sous les termes de la licence
Chapitre 10 Utiliser de jolis widgets et de beaux conteneurs 125
Apache 2.0. Comme leur nom l’indique, les widgets sont "poussés" à gauche pour entrer ou sortir de la zone visible.
Après avoir parcouru tous les mots en les transformant en autant de boutons fils de l’objet ViewFlipper, nous configurons ce dernier pour qu’il bascule automatiquement entre ses fils (flipper.setFlipInterval(2000);) et nous lançons le basculement (flipper.start-Flipping();).
Le résultat est une suite sans fin de boutons apparaissant puis disparaissant vers la gauche au bout de 2 secondes, en étant remplacés à chaque fois par le bouton suivant de la séquence. L’ensemble revient au premier bouton après la disparition du dernier (voir Figure 10.11).
Ce basculement automatique est utile pour les panneaux d’information ou les autres situa-tions dans lesquelles vous voulez afficher beaucoup d’informasitua-tions dans un espace réduit.
Ces différentes vues basculant automatiquement de l’une à l’autre, il serait risqué de demander aux utilisateurs d’interagir avec elles – une vue pourrait disparaître au milieu d’une interaction.