[PDF] Tutoriel sur le développement avec Android : introduction au Widgets de base - Free PDF Download

(1)

1/9 www.thaouet.net/index.php/cours/programmationmobile/11-chapitre4android?tmpl=component&pri

Chapitre 4 : Les Widgets de base Android

Catégorie : COURS ANDROID

Publié le Jeudi, 10 Mars 2011 11:37 Écrit par TAHAR HAOUET

Chapitre 4 : Les Widgets de base Android Introduction

Chaque boîte à outils d interface graphique a des widgets de base: Les champs de texte, les Labels ,les boutons, etc.

La boite à outil Android n'est pas différente dans sa portée, et les widgets de base fourniront une bonne introduction à l utilisation des widgets Android dans les activités.

Les Labels

Le plus simple widget est le label, défini dans Android avec la classe TextView. Comme dans la plupart des boîtes à outils GUI, les labels sont des zones de texte qui ne peuvent pas être modifiés directement par les utilisateurs. Généralement, ils sont utilisés pour identifier les widgets adjacentes (par exemple, un "Nom:" Label à côté d'un champ où vous remplissez un nom).

En Java, vous pouvez créer un label en créant une instance de la classe TextView. Plus généralement, cependant, vous pouvez créer des Labels dans les fichiers de layout XML en ajoutant un élément TextView au layout. Avec la propriété android :text défini la valeur du Label.

Un objet TextView a de nombreuses autres propriétés intéressantes, telles que les suivantes: android: police: Définit la police à utiliser pour Le Label (par exemple, monospace).

android: TextStyle: Indique que la police devrait être en gras (bold), en italique (italic), ou en gras et en italique (bold_italic).

android: textColor: Définit la couleur du texte du Label, en format RVB hexadécimal (par exemple, # FF0000 pour le rouge). Exemple : <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"

android:text="You were expecting something profound?" />

Les Boutons

La Classe Button est une sous-classe de TextView, donc tout élément examiné dans le paragraphe précédent s'applique également à la mise en forme du bouton.

Toutefois, Android permet la déclaration du "on-click " listner pour un bouton. En plus de l'approche classique de la définition de certains objets (comme le l Activity) qui implémente l'interface View.OnClickListener, vous pouvez maintenant prendre une approche un peu plus simple:

Définir une méthode publique dans votre activité qui prend un seul paramètre de type View, une valeur de retour void.

(2)

06/04/12 Chapitre 4 : Les Widgets de base Android

Dans votre Layout XML, sur l'élément Button, inclure l attribut and oid:onclick avec le nom de la méthode que vous avez défini dans l'étape précédente.

Par exemple, vous pourriez avoir une méthode dans votre activité qui ressemble à ceci: public void maMethode(View leButton) {

// Faire le traitement ici }

Ensuite, vous pouvez utiliser cette déclaration XML pour le bouton lui-même, en ajoutant onclick: Android: <Button

android:onClick="maMethode" ...

/>

C'est suffisant pour Android pour lier bouton avec le gestionnaire de clic. ImageView et ImageButton

Android a deux widgets pour vous aider à incorporer des images dans vos activités: ImageView et ImageButton. Comme le nom l'indique, ils sont analogues à base d'images de TextView et Button, respectivement. Chaque widget prend l'attribut android:src (dans un Layout XML) pour préciser l'image à utiliser. Ces attributs références généralement une ressource drawable,. Vous pouvez également définir le contenu de l'image repose sur une Uri à partir d'un fournisseur de contenu via setImageURI ().

ImageButton, est une sous-classe de ImageView, pour laquelle on a ajouté les comportements de boutons standards, pour répondre aux clics et ainsi de suite. Exemple :

<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/icon" android:layout_width="fill_parent" android:layout_height="fill_parent" android:adjustViewBounds="true" android:src="/@drawable/image01" />

(3)

Champs de texte:

Avec les boutons et les Labels, les champs de texte sont le troisième élément de la plupart des boîtes à outils d'interface graphique.

Dans Android, ils sont mis en œuvre via le widget EditText, qui est une sous-classe de la classe TextView utilisé pour les Labels.

En plus des propriétés standard des TextView (par exemple, android:TextStyle), l EditText offre de nombreuses autres propriétés qui seront utiles pour vous dans la construction de l UI, y compris les suivantes:

android: autoText: Contrôle si le champ doit fournir automatique l'orthographe de l'aide. Android

android:capitalize Contrôle si le champ doit automatiquement mettre en majuscule la première lettre du texte saisi (utile pour les champs de nom ou de la ville, par exemple).

android:digits: Configure le domaine de n'accepter que certains chiffres.

android:singleLine: Contrôle si le champ est entrée sur une ou plusieurs lignes (par exemple, en appuyant sur Entrée vous passez à l'autre widget ou ajouter une nouvelle ligne?).

voici un fichier de Layout XML montrant un widget EditText . <?xml version="1.0" encoding="utf-8"?> <EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/field" android:layout_width="fill_parent" android:layout_height="fill_parent" android:singleLine="false"

(4)

06/04/12 Chapitre 4 : Les Widgets de base Android />

Notez que android:singleline est mis à "false", afin que les utilisateurs seront en mesure d'entrer le texte dans plusieurs lignes.

Voici un exemple de code qui remplit le champ de saisie : package com.commonsware.android.field;

import android.app.Activity; import android.os.Bundle; import android.widget.EditText;

public class FieldDemo extends Activity { @Override

public void onCreate(Bundle icicle) { super.onCreate(icicle);

setContentView(R.layout.main);

EditText fld=(EditText)findViewById(R.id.field);

fld.setText("Licensed under the Apache License, Version 2.0 " + "(the \"License\"); you may not use this file " +

"except in compliance with the License. You may " + "obtain a copy of the License at " +

"http://www.apache.org/licenses/LICENSE-2.0"); }

}

(5)

Une autre variante de ce champ est celui qui offre l'auto-complétion, pour aider les utilisateurs à fournir une valeur sans avoir à taper tout le texte. C'est prévu dans Android avec le Widget AutoCompleteTextView

Les Check Box :

La case à cocher classique a deux états: activé et désactivé.

Cliquer sur la case à cocher permet de basculer entre les Etats et d'indiquer son choix (par exemple, «Ajouter une livraison urgente à ma commande").

Dans Android, il ya un widget CheckBox pour répondre à ce besoin. Il a TextView comme un ancêtre, de sorte que vous pouvez utiliser les propriétés TextView comme Android: textColor pour la mise en forme du widget. Dans Java, vous pouvez appeler les fonctions suivantes:

isChecked (): détermine si la case a été cochée.

setChecked (): Forces la case à cocher de basculer dans un état coché ou non toggle(): Bascule l état de la case à cocher, comme si l'utilisateur l a fait.

En outre, vous pouvez enregistrer un objet listener (dans ce cas, une instance de OnCheckedChangeListener) pour être prévenu lorsque l'état de la case à cocher change.

Exemple d un layout simple check box: <?xml version="1.0" encoding="utf-8"?>

<CheckBox xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/check"

android:layout_width="wrap_content" android:layout_height="wrap_content"

(6)

06/04/12 Chapitre 4 : Les Widgets de base Android android:text="This checkbox is: unchecked" />

L'extrait suivant configure le comportement de la case à cocher: public class CheckBoxDemo extends Activity

implements CompoundButton.OnCheckedChangeListener { CheckBox cb;

@Override

public void onCreate(Bundle icicle) { super.onCreate(icicle);

setContentView(R.layout.main);

cb=(CheckBox)findViewById(R.id.check); cb.setOnCheckedChangeListener(this); }

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) {

cb.setText("This checkbox is: checked"); }

else {

cb.setText("This checkbox is: unchecked"); }

} }

Notez que l'activité sert de son propre listener pour les changements d etats de la case à cocher, car il implémente l'interface OnCheckedChangeListener (via cb.setOnCheckedChangeListener (this)).

Le Callback pour l'auditeur est OnCheckedChanged (), qui reçoit la case à cocher dont l'état a changé et le nouvel état. Dans ce cas, nous mettons à jour le texte de la case à cocher.

(7)

Les Boutons Radios :

Les boutons radio d'Android sont à deux Etats, comme les cases à cocher, mais peuvent être regroupés de telle sorte qu'un seul bouton radio dans le groupe pourra être coché a la fois.

Comme les CheckBox, les RadioButton héritent de la classe CompoundButton, qui à son tour hérite de

TextView. Par conséquent, toutes les propriétés standard TextView pour la mise en forme de la police, le style, la couleur, sont disponibles pour contrôler l'apparence des boutons radio. De même, vous pouvez appeler

isChecked () sur un RadioButton pour voir si elle est sélectionnée, toggle () pour le sélectionner, et ainsi de suite, comme vous pouvez le faire avec un CheckBox.

La plupart du temps, vous voulez mettre vos widgets RadioButton dans un RadioGroup. Le RadioGroup indique un ensemble de boutons radio dont l'état est lié, ce qui signifie qu un seul bouton peut être sélectionné dans ce groupe à tout moment. Si vous attribuez un android:id à votre RadioGroup dans votre layout XML, vous pouvez accéder au groupe dans votre code Java et invoquez les commandes suivantes:

check (): Coche un bouton radio spécifique via son identifiant (par exemple, group.check (R.id.radio1)). ClearCheck (): décoche tous les boutons radio, aucun dans le groupe n est coché.

GetCheckedRadioButtonId(): Obtient l'ID du contrôle actuellement coché (ou -1 si aucune n'est cochée). Exemple :

<?xml version="1.0" encoding="utf-8"?> <RadioGroup

xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"

(8)

06/04/12 Chapitre 4 : Les Widgets de base Android android:layout_width="fill_parent" android:layout_height="fill_parent" > <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Chocolat" /> <RadioButton android:id="@+id/radio2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Caramel" /> <RadioButton android:id="@+id/radio3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Vanille" /> </RadioGroup>

Le groupe de boutons radio est d'abord définie de sorte que aucun des boutons n est coché au départ. Pour une présélection des boutons radio à contrôler, utiliser setChecked()sur le RadioButton ou Check() sur le RadioGroup à partir de onCreate ()dans votre activité.

(9)

qui offre à tous les widgets un ensemble de propriétés et de méthodes utiles au-delà de celles déjà décrites. Propri t s utiles

Certaines des propriétés les plus susceptibles d'être utilisés sur les View notamment les suivants : android:nextFocusDown

android:nextFocusLeft android:nextFocusRight android:nextFocusUp

Une autre propriété utile est android: visibility, qui contrôle si le widget est initialement visible. M thodes Utiles

Vous pouvez choisir si ou non un widget est activé via setEnabled () et voir s il est activé via isEnabled(). Un profil d utilisation pour cette fonctionalité est de désactiver certains widgets en utilisant un la sélection d un CheckBox ou d un RadioButton.

Vous pouvez donner un focus à un widget via requestFocus () et voir si elle est selectionnée par isFocused (). Vous pouvez utiliser ces fonctions dans le cas de désactivation des widgets pour s assurer que le bon widget aura le focus une fois que votre opération de désactivation est terminée.

Pour aider à naviguer dans l'arborescence des widgets et des conteneurs qui constituent l'ensemble des View d une activité, vous pouvez utiliser les fonctions suivantes:

GetParent (): Trouve le widget parent ou un conteneur. FindViewById (): Trouve un widget enfant avec un certain ID.

GetRootView (): Obtient la racine de l'arbre (par exemple, ce que vous avez fournie à la activité via setContentView ()).

Couleurs

Il existe deux types d'attributs de couleur dans les widgets Android. Certains, comme android:background, prennent une couleur unique (ou une image graphique pour servir de arrière-plan). D'autres, comme Android: textColor sur TextView (et sous-classes), peut prendre une ColorStateList, y compris via l'accesseur Java (dans ce cas, SetTextColor ()). Un ColorStateList vous permet de spécifier des couleurs différentes pour différentes conditions. Par exemple, Un TextView peut avoir une couleur du texte quand il est l'élément sélectionné dans une liste et une autre couleur quand il n'est pas sélectionnée (widgets de sélection sont discutés dans un autre chapitre). Ceci est géré par le ColorStateList par défaut associée à TextView.

Si vous souhaitez changer la couleur d'un widget TextView dans le code Java, vous avez deux choix principaux: Utilisez ColorStateList.valueOf (), qui retourne une ColorStateList dans laquelle tous les Etats sont considérés comme ayant la même couleur, que vous passer en tant que paramètre à la méthode valueOf(). C'est l équivalent java de android:textColor, pour donner au TextView toujours une couleur spécifique, indépendamment des circonstances.

Créer un ColorStateList avec des valeurs différentes pour les différents états, soit par le constructeur ou par un document XML.