CiTinet | Architecture&développement logiciel 07.87.01.81.95

ANDROÏD | view flipper

Un des composants les plus utilisées en matière d’ergonomie pour l’utilisateur est le ViewFlipper.


Le ViewFlipper est un composant androîd, placé dans le layout xml qui permet d’animer le passage d’un point de vue à un autre selon l’action de l’utilisateur (click, long click, touche, long touche, etc..)

Le rendu attendu avec un composant comme celui est généralement le passage d’une page à la suivante par la pression des doigts sur l’écran et son basculement.

Il y  a deux parties distinctes dans l’arborescence d’un projet android développé via eclipse :

-         La partie src ou l’on retrouve l’activity ou l’on définira les éléments d’animation

Et l’ensemble des actions de la page.

-         La partie res ou l’on retrouve le layout qui incorpore le view flipper, celui-ci contiendra donc plusieurs vues où l’on pourra  selon l’animation passer d’une vue à l’autre à l’intérieure du composant.

Voila donc un exemple de code simple qui permet de passer d’une page à une autre en cliquant sur l’un des deux boutons crées next ou previous :

Android ViewFlipper Example:
Code XML

< ?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/LinearLayout01"
android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<LinearLayout android:id="@+id/LinearLayout03"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<Button android:id="@+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Next"></Button>
<Button android:id="@+id/Button02" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Previous"></Button>
</LinearLayout>
<LinearLayout android:id="@+id/LinearLayout02"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<ViewFlipper android:id="@+id/ViewFlipper01"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<!--adding views to ViewFlipper-->
<TextView android:id="@+id/TextView01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 1"></TextView>
<TextView android:id="@+id/TextView02" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 2"></TextView>
<TextView android:id="@+id/TextView03" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Flipper Content 3"></TextView>
</ViewFlipper>
</LinearLayout>
</LinearLayout>

Code Java

public class ViewFlipperExample extends Activity implements OnClickListener {
Button next;
Button previous;
ViewFlipper vf;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
vf = (ViewFlipper) findViewById(R.id.ViewFlipper01);
next = (Button) findViewById(R.id.Button01);
previous = (Button) findViewById(R.id.Button02);
next.setOnClickListener(this);
previous.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (v == next) {
vf.showNext();
}
if (v == previous) {
vf.showPrevious();
}
}
}

Vous constaterez que cette exemple est trés simple et que le passage s’effectue via un click sur un bouton, cependant si l’on rentre dans le contexte de l’ergonomie et si l’on veut que l’utilisateur s’y retrouve rapidement, l’exemple suivant sera un plus.

Code XML : flipper.xml

<ViewFlipper android:layout_height="match_parent" android:layout_width="match_parent" android:id="@+id/flipper" >
<LinearLayout android:orientation="vertical" android:id="@+id/premiervue" android:layout_height="match_parent" android:layout_width="fill_parent">
<LinearLayout android:background="#fff" android:id="@+id/souslayout" android:layout_height="wrap_content" android:layout_width="match_parent">
<TextView android:text="ON EST SUR LA PREMIERE PAGE" android:textColor="#000000" android:background="#ffffff" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center"></TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:id="@+id/deuxiemvue" android:layout_height="match_parent">
<LinearLayout android:background="#000000" android:layout_width="match_parent" android:id="@+id/souslayout" android:layout_height="wrap_content">
<TextView android:textColor="#000000" android:background="#ffffff" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="ON EST SUR LA DEUXIEME PAGE" android:gravity="center"></TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:id="@+id/troisiemvue" android:layout_height="match_parent">
<LinearLayout android:background="#fff" android:layout_width="match_parent" android:id="@+id/souslayout" android:layout_height="wrap_content">
<TextView android:textColor="#000000" android:background="#ffffff" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="ON EST SUR LA TROISIEME PAGE"></TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/quatriemvue">
<LinearLayout android:background="#4B5150" android:layout_width="match_parent" android:id="@+id/souslayout" android:layout_height="wrap_content">
<TextView android:textColor="#000000" android:background="#ffffff" android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="ON EST SUR LA QUATRIEME PAGES"></TextView>
</LinearLayout>
</LinearLayout>
</ViewFlipper>

Creer un Dossier anim dans res et y incorporer les fichiers xml suivants :

Slide_leftIn.xml

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="150" />
</set>

Slide_leftOut.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="150" />
</set>

Slide_rightIn.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="150" />
</set>

Slide_rightOut.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:fromXDelta="0"
android:toXDelta="100"
android:duration="150" />
</set>

Code Java :

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;
public class viewflippertest extends Activity implements OnGestureListener {
/*
* Constante permettant de calculer si l'on doit tourner page
*  vers gauche ou droite selon la position du doigt
*/
private static final int SWIPE_MIN_DISTANCE = 120;
private static final int SWIPE_MAX_OFF_PATH = 250;
private static final int SWIPE_THRESHOLD_VELOCITY = 200;
/*
* Déclaration de variable
* Animation (création de dossier de gestion d'une animation dans le répertoire anim)
* GestureDetector composant qui permet de détecter un événement
* ViewFlipper composant qui permet de gérer une transition via animation
*/
private Animation slideLeftIn;
private Animation slideLeftout;
private Animation slideRightIn;
private Animation slideRightout;
private GestureDetector detector;
private ViewFlipper view;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.flipper);// cette élément renvoie au fichier xml créer précédemment
/*
* les différentes animations disponibles dans le repertoire anim
*/
slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_leftin);
slideLeftout = AnimationUtils.loadAnimation(this, R.anim.slide_leftout);
slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_rightin);
slideRightout = AnimationUtils.loadAnimation(this, R.anim.slide_rightout);
view = (ViewFlipper)findViewById(R.id.flipper);
detector = new GestureDetector(this, this);
}
/*
* onTouchEvent permet de renvoyer au composant GestureDetector creer
* @see android.app.Activity#onTouchEvent(android.view.MotionEvent)
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
return detector.onTouchEvent(event);
}
/*
* onFling permet d'implémenter la gestion du tactile selon la position du doigt
* @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
*/
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
view.setInAnimation(slideLeftIn);
view.setOutAnimation(slideLeftout);
view.showNext();
}
else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
view.setInAnimation(slideRightIn);
view.setOutAnimation(slideRightout);
view.showPrevious();
}
}
catch (Exception e) {
Log.e("Log_tag", "Erreur switch"+e.getMessage());
}
return false;
}
@Override
public boolean onDown(MotionEvent arg0) {
// TODO Auto-generated method stub
return false;
}

Les Commentaires sont clos