Changement de vues android ~ Android For Arab

Ce tutoriel va pousser un peu plus loin la création et la gestion des vues sous Android. Dans ce dernier, vous allez apprendre à gérer le passage d’une vue à une autre dans votre application.

Un passage d’une vue à une autre signifie un changement d’activité avec passage de données si nécessaire entre les deux activités

pré-requis

Pour ceux n’ayant pas fait ce tutoriel, voici le code source ici
Et voici ce que vous devez obtenir juste en compilant le code

Nous allons faire en sorte que lorsqu’un utilisateur clique sur le bouton “Se connecter”, il soit redirigé vers une autre vue.

Création de la deuxième activité

Nous allons commencer par créer une deuxième activité, cette dernière va afficher l’adresse mail et mot de passe saisie dans la vue de login.

Une création de vue débute toujours par la création du fichier XML. Que l’on appellera “login_display.xml”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent" android:orientation="vertical"
 android:layout_height="fill_parent"
 android:background="@drawable/bg">
 
<LinearLayout
 android:layout_width="fill_parent" android:orientation="vertical"
 android:layout_height="fill_parent" android:paddingTop="80px" android:gravity="center">
 
 <TextView android:layout_height="wrap_content" android:layout_width="wrap_content"
 android:text="@string/email" android:textSize="20px" android:textStyle="bold"
 android:textColor="#000000" />
 
 <TextView   android:layout_height="wrap_content" android:layout_width="wrap_content"
 android:id="@+id/email_display" android:textColor="#000000" android:textSize="20px"
 android:hint="Ici l'adresse mail des utilisateurs" android:gravity="center"/>
 
 <TextView android:layout_height="wrap_content" android:layout_width="wrap_content"
 android:text="@string/password" android:textSize="20px" android:paddingTop="20px"
 android:textColor="#000000"  android:textStyle="bold"/>
 
 <TextView   android:layout_height="wrap_content" android:layout_width="wrap_content"
 android:id="@+id/password_display" android:textColor="#000000"  android:textSize="20px"
 android:hint="Ici le mot de passe de l'utilisateur" android:gravity="center"/>
 </LinearLayout>
</LinearLayout>

Voici quelques explications de ce code :
- android:paddingTop : C’est pour l’espacement du haut du Layout (un peu comme en HTML).
- android:gravity : Spécifie où placer le conteneur.
- android:textSize : Spécifie la taille de texte.
- android:textStyle : Spécifie un style au texte (bold, italic, bolditalic).
- android:textColor : Spécifie la couleur du texte (ici on choisie du Blanc).
- android:id : Donne un “id” à l’objet, afin de pouvoir y accéder depuis vos classes java.
- android:hint : Met un texte par défaut sur la zone. Ce texte sera affiché quand aucun “android:text” n’est défini (sert surtout en texte d’indication pour des champs de formulaire par exemple).
- TextView : Représente un champs d’affichage de texte.
- Les autres champs sont expliqués dans le tutoriel Introduction aux vues sous Android

Ensuite on crée l’activité (classe Java) correspondante à la vue que l’on vient de créer. On l’appellera “DisplayLoginActivity.java”.

package com.tuto.android.view;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;
 
public class DisplayLoginActivity extends Activity
{
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.login_display);
 }
}

Une des erreurs les plus fréquentes est d’oublier de déclarer notre nouvelle activité dans le fichier “AndroidManifest.xml”.
Dans la balise “application”, on rajoute la ligne suivante (On met toujours un point devant le nom de la classe) :

1	`<activity` `android:name=".DisplayLoginActivity"` `/>`

Ce qui donnera comme fichier :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.tuto.android.view"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
 <activity android:name=".MainViewActivity"
 android:label="@string/app_name">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity android:name=".DisplayLoginActivity" />
 </application>
</manifest>

le fichier “strings.xml”, qui se trouve dans le dossier res/values a été mis à jour. Il ressemble maintenant à :

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="hello">Hello World, MainViewActivity!</string>
 <string name="app_name">ViewProject Exemple</string>
 <string name="password">Mot de passe </string>
 <string name="email">Adresse mail </string>
 <string name="create">Créer un compte</string>
 <string name="connect">Se connecter</string>
</resources>

Ces différentes données seront accessibles via “@string/nomDeVariable”

Voilà, notre deuxième activité est créée mais ne sert à rien pour l’instant car elle n’est pas reliée à notre première activité.

Passage d’une activité à une autre

Nous allons mettre en place le passage d’une activité à une autre, donc pour cela revenons dans la classe “MainViewActivity.java”.
Le passage d’une activité à une autre se fait en plusieurs parties :

On déclare un nouveau “OnClickListener” à qui on va assigner une action (Ici le passage vers l’autre activité).
- Pour le passage d’une activité à une autre c’est facile.
- On crée un nouveau Intent (Le premier argument est l’activité de départ et le deuxième est l’activité d’arrivée).
- On appelle la méthode “startActivity” avec ce nouveau Intent.
On récupère le bouton auquel on veux assigner ce Listener.
On affecte le Listener au Bouton.

Donc à la fin de la méthode OnCreate on va rajouter le code suivant :

//On crée le Listener sur le Bouton
OnClickListener ButtonConnexion = new OnClickListener()
{
 @Override
 public void onClick(View actuelView)
 {
 // On met en place le passage entre les deux activités sur ce Listener
 Intent intent = new Intent(MainViewActivity.this,
                                      DisplayLoginActivity.class);
 startActivity(intent);
 }
};
 
//On récupere le bouton souhaité et on lui affecte le Listener
Button bouton = (Button) findViewById(R.acountcreation.connect);
bouton.setOnClickListener(ButtonConnexion);

Donc maintenant quand on cliquera sur le bouton “Connect” la nouvelle vue s’affichera.

Donc le fichier « DisplayLoginActivity.java » ressemble à ça :

package com.tuto.android.view;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;
 
public class DisplayLoginActivity extends Activity
{
     public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.login_display);
     Intent thisIntent = getIntent();
     String login = thisIntent.getExtras().getString("login");
     String pass = thisIntent.getExtras().getString("password");
 
     TextView loginText = (TextView) findViewById(R.id.email_display);
     loginText.setText(login);
 
     TextView passText = (TextView) findViewById(R.id.password_display);
     passText.setText(pass);
   }
}

Passage de données d’une activité à une autre

Maintenant, on aimerait bien faire passer les données saisies de la première vue à la deuxième et les afficher.
Pour cela, reprenons le code qui se trouve au dessus dans la classe “MainViewActivity.java”.
La méthode OnClick ressemblera à cela maintenant (On rajoute la récupération de données avant la création du Intent) :

//On récupère les deux champs, puis le texte saisi
EditText login = (EditText) findViewById(R.id.email);
String loginStr = login.getText().toString();
EditText pass = (EditText) findViewById(R.id.pass);
String passStr = pass.getText().toString();
 
Intent intent = new Intent(MainViewActivity.this,
                                     DisplayLoginActivity.class);
//On rajoute les valeurs à l’Intent
// en tant qu’extra a ce dernier.
// Les extras sont différenciés par un “id” (string)
intent.putExtra("login", loginStr);
intent.putExtra("password", passStr);
startActivity(intent);

Maintenant on va récupérer les données dans la classe DisplayLoginActivity, dans la méthode OnCreate

public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.login_display);
 //On récupère l’Intent que l’on a reçu
 Intent thisIntent = getIntent();
 //On récupère les deux extra grâce à leurs id
 String login = thisIntent.getExtras().getString("login");
 String pass = thisIntent.getExtras().getString("password");
 
 //On récupère les champs et on leur affecte le texte
 TextView loginText = (TextView) findViewById(R.id.email_display);
 loginText.setText(login);
 
 TextView passText = (TextView) findViewById(R.id.password_display);
 passText.setText(pass);
}

Donc ici, en lançant l’application, vous devriez obtenir les deux écrans suivants :

Gestion des erreurs

On aimerait gérer quelques erreurs quand l’utilisateur clique sur le bouton “Se Connecter” :

Le cas des champs Vides.
Adresse mail ne correspondant pas au format d’une adresse mail.

Pour cela nous allons modifier le fichier “MainViewActivity’. Nous allons rajouter des tests dans la méthode “onClick” après la récupération du login et du mot de passe.

Pour tester si l’adresse mail ne correspond pas au format d’une adresse mail :

//On déclare le pattern que l’on doit suivre
Pattern p = Pattern.compile(".+@.+\\.[a-z]+");
//On déclare un matcher, qui comparera le pattern avec la string passée en argument
Matcher m = p.matcher(loginStr);
// Si l’adresse mail saisie ne correspond au format d’une adresse mail
if (m.matches() == false)
{
 //Toast est une classe fournie par le SDK Android
 //pour afficher les messages dans des minis pop up
 //Le premier argument est le Context, puis
 //le message et à la fin la durée de ce dernier
 Toast.makeText(getBaseContext(),
"Le champs email ne correspond pas au format d'une adresse mail",
Toast.LENGTH_SHORT).show();
 return;
}

Puis le cas des différents champs qui ne doivent pas être vides. On rajoute tout simplement le code suivant :

//Si un des deux champs est vide, alors on affiche les erreurs
if (passStr.equals("") || loginStr.equals(""))
{
 Toast.makeText(getBaseContext(),
"L'adresse email et mot de passe sont obligatoires",
Toast.LENGTH_SHORT).show();
 return;
}

Conclusion

Voila, ce tutoriel se termine ici. En espérant qu’il vous a aidé à mieux comprendre comment fonctionne les activités et les vues sous Android ainsi que comment gérer le passage de données entre deux vues. N’hésitez pas à commenter ou poser vos questions si vous avez des questions.

Android For Arab

samedi 8 octobre 2011