Les widgets sont les contrôles utilisés pour interagir avec l’utilisateur ou lui afficher des
informations. Dans cette palette nous avons des widgets pour l’affichage de texte, des images, pour créer des boutons, des champs de saisie de texte ou les autres éléments communs des formulaires. Les boutons sont des éléments graphiques sur lesquels l’utilisateur peut appuyer ou cliquer pour obtenir une réaction. Voila une derscription brièvre des principaux composants graphiques proposés par Android :
• Button (http://developer.android.com/reference/android/widget/Button.html) : Un bouton cliquable.
• CheckBox (http://developer.android.com/reference/android/widget/CheckBox.
html) : Une checkbox.
• EditText (http://developer.android.com/reference/android/widget/EditText.html) : Un champ de texte éditable.
• DatePicker (http://developer.android.com/reference/android/widget/DatePicker.
html) : Sélection de dates.
• RadioButton (http://developer.android.com/reference/android/widget/
RadioButton.html) : Représente les boutons radios.
• Toast (http://developer.android.com/reference/android/widget/Toast.html) : Un pop up message qui s’affiche sur l’écran.
• ImageButton (http://developer.android.com/reference/android/widget/
ImageButton.html): Une image qui se comporte comme un bouton.
• SlidingDrawer : Un élément qui se présente sous forme d’un tiroir qu’on ouvre et ferme.
Figure 21 Les types de boutons standards sous Android La Figure 21 est un exemple des boutons les plus courants sous Android.
Les contrôles de type texte
Les contrôles de type texte sont certainement les plus utilisés car ils permettent de recueillir ou de présenter des informations à l’utilisateur. Les principaux contrôleurs sont : TextView, EditText, AutoCOmpleteTextView, MultiCompleteTextView.
Figure 22 Exemple de textview
Le TextView est un widget pour l’affichage de texte en lecture seule. Pour créer un exemple de texte, considérons le code suivant :
<TextView
Ce code défini un TextView simple qui affiche le texte « Large Text ». Pour manipuler un TextView il faut récupérer la référence de l’objet avec la méthode findViewByID de la classe
Activity. La méthode setText de TextView permet de modifier le texte présenté tandis que la méthode getText() permet de récupérer le contenu actuel du texte. Considérons l’application suivante qui donne un exemple d’utilisation du textView.
activity_main.xml
android:id=”@+id/textView”
android:onClick=”changeMsg”
/>
</RelativeLayout>
Les attributs de cette déclaration du TextView peuvent être catégorisés en trois blocs : Les attributs de paramétrage des dimensions et de positionnement du texteview (android:layout_width,android:layout_height, android:gravity, android:layout_
centerHorizontal, android:layout_centerVertical), les attributs de mise en forme du TextView (android:text,android:textSize,android:textAlignment,android:textColor,android:background), Les deux derniers attributs permettent de définir l’id (android:id) et la méthode à exécuter quand l’utilisateur clique sur le TextView. Le fichier strings.xml ne fait que définir des ressources de type chaine de caractère qui seront utilisés pour compter le nombre de click de l’utilisateur sur le TextView.
Strings.xml
<resources>
<string name=”app_name”>Demo Textview</string>
<string name=”message1”>Vous avez cliqué</string>
<string name=”action_settings”>Settings</string>
</resources>
MainActivity.Java
public class MainActivity extends Activity { private int compteur_click = 0;
private String msg = “Vous avez cliqué !”;
private TextView t;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
t = (TextView) this.findViewById(R.id.textView);
}
public void changeMsg(View view) {
Log.i(“Cours UVA”, t.getText() + “ “);
compteur_click++;
t.setText(msg + “\n” + compteur_click + “ fois”);
}
}
Le code Java permet de réaliser l’application de comptage des clicks de l’utilisateur. Notez que l’évènement onClick est ici géré par la méthode changeMsg().
A) B) C)
Figure 23 TextView : Captures d’écran de l’application Compteur de clicks
Le contrôle TextView a beaucoup d’autres attributs intéressants pour personnaliser l’apparence de votre application. Nous en verrons quelques-uns dans les exercices de cette partie.
EditText
insérer du texte. Par exemple, l’application SMS utilise ce widget pour récupérer le contenu du message. Ce champ offre des fonctionnalités très intéressantes à travers son attribut android:inputType. Cet attribut permet aussi bien de contrôler ce que l’utilisateur peut entrer ou bien la correction automatique des erreurs orthographiques.
Figure 24 Quelques Exemples de EditView
L’élément qui permet de créer un EditText avec XML est <EditText>. Son attribut
android:inputType détermine quel est le type contenu que l’utilisateur peut mettre. Les types les plus courants sont : none, text, phone, date, datetime, password, textAutoComplete, textAutoCorrect, textCapCharacters, number, textMultiline, …
<EditText
…
android:inputType=”text”
android:text=”Entrez ici votre nom”
android:ems=”10”
android:id=”@+id/editText”
… />
<EditText
…
android:inputType=”textPassword”
android:ems=”10”
android:id=”@+id/editText2”
<EditText
android:inputType=”textEmailAddress”
android:ems=”10”
android:id=”@+id/editText3”
android:text=”macky@gouv.sn” />
<EditText
android:inputType=”phone”
android:ems=”10”
android:id=”@+id/editText4”
android:text=”+221123456789” />
<EditText
android:inputType=”date”
android:ems=”10”
android:id=”@+id/editText5”
android:text=”10/02/2016” />
Figure 25 Quelques exemples d’utilisation d’EditText
Parmi les méthodes interessantes pour programmer le comportement d’un EditText, il y a setText(), getText(), getSelection(), setSelection(). Pour les évènements intéressants il y a les onKeyDown(), onKeyUp, OneEdit(), OnTextChanged(), onTouchChanged(), …
Le programme suivant affiche sur un TextView tous les caractères au fur et à mesure qu’ils sont tapés sur le EditText.
activity_main.xml
android:text=”Tapez les logs ici”
android:layout_alignParentTop=”true”
<EditText
public class MainActivity extends Activity {
private EditText e;
private TextView logs;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
logs = (TextView) findViewById(R.id.editOutputLogs);
e = (EditText) findViewById(R.id.editTextInput);
e.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_ENTER)
{
String logmsg = logs.getText()+”\n”+ (new
Les boutons sont des contrôles qui communiquent les évènements lorsque l’utilisateur les touche avec le tactile. Un bouton peut contenir du texte, une image ou les deux. L’attribut android:text permet d’ajouter du texte sur l’image alors que les attributs android:drawable*
permettent d’insérer une icône et sur le bouton. La Figure 26 donne un exemple de ces trois cas de figure. L’attribut android:background permet de personnaliser le fond du bouton soit avec un drawable ou bien avec une couleur.
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Bouton avec texte seulement”
android:id=”@+id/button3”
android:text=”Texte avec icone”
android:id=”@+id/button”
android:drawableLeft=”@drawable/ic_plane”
android:layout_alignParentTop=”true”
android:layout_alignParentStart=”true” />
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:drawableStart=”@drawable/ic_photo”
android:id=”@+id/button2”
android:layout_below=”@+id/button”
android:layout_alignParentStart=”true” />
Figure 26 Exemples de boutons avec la méthode déclarative XML Pour que les boutons soient utiles, il faut pouvoir capturer les évènements clicks pour programmer le comportement. Android offre trois manières de capturer les évènements onClick des boutons :
L’attribut android:onClick permet de spécifier dans le fichier XML une méthode d’une activité qui doit être exécutée si l’utilisateur clique sur le bouton en question. Le code suivant illustre cette méthode.
<Button
…
android:onClick=”takePlane”
… />
Ici la méthode takePlane doit être implantée par l’activité qui contient le bouton en question.
public void takePlane(View view) {
// Code à executer lorsque l’utilisateur clique sur l’interface Toast t = Toast.makeText(this,”Vous avez cliqué sur un
bouton”,Toast.LENGTH_LONG);
t.show();
}
Figure 27 Exemple de traitement de l’événement clique avec XML la classe Button
En utilisant une classe anonyme interne de la classe OnClickListner(). Cette méthode est illustrée par l’application suivante qui permet d’afficher les logs saisies sur un EditText.
layout_main.xml
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/
android”
xmlns:tools=”http://schemas.android.com/tools” android:layout_
width=”match_parent”
android:layout_height=”match_parent” android:paddingLeft=”@dimen/
activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin”
tools:context=”.MainActivity”>
<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@+id/editTextInput”
android:text=”Tapez les logs ici”
android:layout_alignParentTop=”true”
android:layout_alignParentStart=”true”
/>
<Button
MainActivity.java
public class MainActivity extends Activity {
private EditText e;
private TextView logs;
private Button addLog;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
logs = (TextView) findViewById(R.id.textViewLogs);
e = (EditText) findViewById(R.id.editTextInput);
addLog = (Button) findViewById(R.id.buttonAjouterLog);
addLog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String logmsg = logs.getText()+”\n”+ (new Date()).
Le résultat de ce code est illustré sur la Figure 28. La troisième méthode consiste à
implémenter l’Activité de l’interface OnClickLister. Le code suivant permet d’aboutir au même résultat que l’application de présentation des logs. Pour réaliser cela l’activité doit implémenter l’interface onClickListener et reimplémenter la méthode onClick().
Figure 28 Résultat d’une classe anonyme interne Le code suivant illustre cette troisième méthode.
MainActivity.java
public class MainActivity extends Activity implements View.
OnClickListener{
private EditText e;
private TextView logs;
private Button addLog;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
logs = (TextView) findViewById(R.id.textViewLogs);
e = (EditText) findViewById(R.id.editTextInput);
addLog.setOnClickListener(this);
}
@Override
public void onClick(View v) {
String logmsg = logs.getText()+”\n”+ (new Date()).