Galerie d'images fragmentée

Nous voulons tout d'abord créer une galerie d'images simple. Pour ce faire, nous allons utiliser un GridView affichant des images récupérées dans le répertoire assets embarqué par l'application.

1. Placez les images de cette archive dans un sous-répertoire d'assets
2. Chargez les images sous la forme de Bitmap
3. Créez un GridView disposant d'un adaptateur avec une méthode getView redéfinie retournant une ImageView pour afficher une vignette de l'image.
4. Créez une nouvelle activité affichant une image en plein écran (on pourra communiquer dans l'intent de lancement le chemin vers l'image à charger)
5. Lancez l'activité d'affichage en plein écran lorsque l'utilisateur clique sur une des images miniatures de la galerie.

Nous allons maintenant définir un nouveau layout qui ne sera affiché qu'en mode paysage. Ce layout affiche toujours la GridView mais ajoute en plus une zone de visualisation de l'image sélectionnée sur la GridView

1. Créez un nouveau layout intégrant la GridView de visualisation de la galerie ainsi qu'un LinearLayout vide pour accueillir la zone de visualisation de l'image sélectionnée. Ce layout ne sera utilisé qu'en mode paysage (le layout originel reste utilisé en mode portrait).
2. Créez un fragment retournant dans sa méthode onCreateView() une ImageView pour l'affichage d'une image. Celui-ci doit récupérer un argument spécifiant le chemin vers l'image à charger.
3. Lorsqu'un clic est réalisé sur un item de la galerie, vérifiez si vous êtes en mode paysage (cette information peut être récupérée à l'aide de getResources().getConfiguration() ou alors en examinant le layout) ; dans cette situation, placez un nouveau fragment dans le container destiné à l'accueillir (il faut utiliser une FragmentTransaction sur le FragmentManager. Bien sûr en mode portrait, il faut toujours continuer à lancer une nouvelle activité pour la visualisation plein écran de l'image.
   Note : On pourra aussi utiliser le design pattern State.

Nous voulons maintenant rajouter en mode paysage une ligne de séparation entre le GridView de la galerie et l'ImageView d'affichage de l'image sélectionnée. Nous devons être capable de déplacer cette ligne de séparation en cliquant dessus et en laissant le doigt appuyé tout en le translatant sur la gauche ou la droite. La galerie et l'ImageView doivent être redimensionnés en conséquence.

1. Rajoutez un composant graphique (un LinearLayout peut très bien faire l'affaire ou une vue quelconque) pour représenter le séparateur. Celui-ci devra disposer d'une largeur fixe.
2. Rajoutez un listener appelé lors d'une opération de touché sur le diviseur. On pourra récupérer l'abscisse absolue de l'événement avec le getter getRawX() : modifiez le layout en conséquence. Si le layout est un LinearLayout, modifiez la largeur de la galerie et du composant d'affichage de l'image sélectionnée. Si le layout est un RelativeLayout, modifiez la marge à droite du séparateur. Dans tous les cas, le layout s'occupera de réagencer les composants automatiquement.