Vous êtes sur la page 1sur 9

06/04/12

Chapitre 4 : Les Widgets de base Android

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

diord nA esab ed s t egdi W s eL : 4 er tipa hC

Catgorie : COURS ANDROID Publi le Jeudi, 10 Mars 2011 11:37 crit par TAHAR HAOUET Affichages : 2259 Chapitre 4 : Les Widgets de base Android Introduction Chaque bote 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 diffrente dans sa porte, et les widgets de base fourniront une bonne introduction l utilisation des widgets Android dans les activits. Les Labels Le plus simple widget est le label, dfini dans Android avec la classe TextView. Comme dans la plupart des botes outils GUI, les labels sont des zones de texte qui ne peuvent pas tre modifis directement par les utilisateurs. Gnralement, ils sont utiliss pour identifier les widgets adjacentes (par exemple, un "Nom:" Label ct d'un champ o vous remplissez un nom). En Java, vous pouvez crer un label en crant une instance de la classe TextView. Plus gnralement, cependant, vous pouvez crer des Labels dans les fichiers de layout XML en ajoutant un lment TextView au layout. Avec la proprit android :text dfini la valeur du Label. Un objet TextView a de nombreuses autres proprits intressantes, telles que les suivantes: android: police: Dfinit 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: Dfinit la couleur du texte du Label, en format RVB hexadcimal (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 lment examin dans le paragraphe prcdent s'applique galement la mise en forme du bouton. Toutefois, Android permet la dclaration du "on-click " listner pour un bouton. En plus de l'approche classique de la dfinition de certains objets (comme le l Activity) qui implmente l'interface View.OnClickListener, vous pouvez maintenant prendre une approche un peu plus simple: Dfinir une mthode publique dans votre activit qui prend un seul paramtre de type View, une valeur de retour void.
1/9

06/04/12

Chapitre 4 : Les Widgets de base Android

Dans votre Layout XML, sur l'lment Button, inclure l attribut and oid:onclick avec le nom de la mthode que vous avez dfini dans l'tape prcdente. Par exemple, vous pourriez avoir une mthode dans votre activit qui ressemble ceci: public void maMethode(View leButton) { // Faire le traitement ici } Ensuite, vous pouvez utiliser cette dclaration XML pour le bouton lui-mme, 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 activits: 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 prciser l'image utiliser. Ces attributs rfrences gnralement une ressource drawable,. Vous pouvez galement dfinir 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 rpondre 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" />

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

2/9

06/04/12

Chapitre 4 : Les Widgets de base Android

Champs de texte: Avec les boutons et les Labels, les champs de texte sont le troisime lment de la plupart des botes 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 proprits standard des TextView (par exemple, android:TextStyle), l EditText offre de nombreuses autres proprits qui seront utiles pour vous dans la construction de l UI, y compris les suivantes: android: autoText: Contrle si le champ doit fournir automatique l'orthographe de l'aide. Android android:capitalize Contrle si le champ doit automatiquement mettre en majuscule la premire 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: Contrle si le champ est entre sur une ou plusieurs lignes (par exemple, en appuyant sur Entre 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"
www.thaouet.net/index.php/cours/programmationmobile/11-chapitre4android?tmpl=component&pri 3/9

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"); } } Le rsultat est le suivant:

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

4/9

06/04/12

Chapitre 4 : Les Widgets de base Android

Une autre variante de ce champ est celui qui offre l'auto-compltion, pour aider les utilisateurs fournir une valeur sans avoir taper tout le texte. C'est prvu dans Android avec le Widget AutoCompleteTextView Les Check Box : La case cocher classique a deux tats: activ et dsactiv. 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 rpondre ce besoin. Il a TextView comme un anctre, de sorte que vous pouvez utiliser les proprits TextView comme Android: textColor pour la mise en forme du widget. Dans Java, vous pouvez appeler les fonctions suivantes: isChecked (): dtermine si la case a t coche. 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 prvenu 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"
www.thaouet.net/index.php/cours/programmationmobile/11-chapitre4android?tmpl=component&pri 5/9

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 implmente l'interface OnCheckedChangeListener (via cb.setOnCheckedChangeListener (this)). Le Callback pour l'auditeur est OnCheckedChanged (), qui reoit la case cocher dont l'tat a chang et le nouvel tat. Dans ce cas, nous mettons jour le texte de la case cocher.

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

6/9

06/04/12

Chapitre 4 : Les Widgets de base Android

Les Boutons Radios : Les boutons radio d'Android sont deux Etats, comme les cases cocher, mais peuvent tre regroups de telle sorte qu'un seul bouton radio dans le groupe pourra tre coch a la fois. Comme les CheckBox, les RadioButton hritent de la classe CompoundButton, qui son tour hrite de TextView. Par consquent, toutes les proprits standard TextView pour la mise en forme de la police, le style, la couleur, sont disponibles pour contrler l'apparence des boutons radio. De mme, vous pouvez appeler isChecked () sur un RadioButton pour voir si elle est slectionne, toggle () pour le slectionner, 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 slectionn dans ce groupe tout moment. Si vous attribuez un android:id votre RadioGroup dans votre layout XML, vous pouvez accder au groupe dans votre code Java et invoquez les commandes suivantes: check (): Coche un bouton radio spcifique via son identifiant (par exemple, group.check (R.id.radio1)). ClearCheck (): dcoche tous les boutons radio, aucun dans le groupe n est coch. GetCheckedRadioButtonId(): Obtient l'ID du contrle actuellement coch (ou -1 si aucune n'est coche). Exemple : <?xml version="1.0" encoding="utf-8"?> <RadioGroup xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
www.thaouet.net/index.php/cours/programmationmobile/11-chapitre4android?tmpl=component&pri 7/9

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 dfinie de sorte que aucun des boutons n est coch au dpart. Pour une prslection des boutons radio contrler, utiliser setChecked()sur le RadioButton ou Check() sur le RadioGroup partir de onCreate ()dans votre activit. Tous les widgets, y compris celles qui sont affiches dans les sections prcdentes, drivs de la classe View,
www.thaouet.net/index.php/cours/programmationmobile/11-chapitre4android?tmpl=component&pri 8/9

06/04/12

Chapitre 4 : Les Widgets de base Android

qui offre tous les widgets un ensemble de proprits et de mthodes utiles au-del de celles dj dcrites. Propri t s utiles Certaines des proprits les plus susceptibles d'tre utiliss sur les View notamment les suivants : android:nextFocusDown android:nextFocusLeft android:nextFocusRight android:nextFocusUp Une autre proprit utile est android: visibility, qui contrle 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 dsactiver certains widgets en utilisant un la slection d un CheckBox ou d un RadioButton. Vous pouvez donner un focus un widget via requestFocus () et voir si elle est selectionne par isFocused (). Vous pouvez utiliser ces fonctions dans le cas de dsactivation des widgets pour s assurer que le bon widget aura le focus une fois que votre opration de dsactivation est termine. 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 arrire-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 spcifier des couleurs diffrentes pour diffrentes conditions. Par exemple, Un TextView peut avoir une couleur du texte quand il est l'lment slectionn dans une liste et une autre couleur quand il n'est pas slectionne (widgets de slection sont discuts dans un autre chapitre). Ceci est gr par le ColorStateList par dfaut associe 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 considrs comme ayant la mme couleur, que vous passer en tant que paramtre la mthode valueOf(). C'est l quivalent java de android:textColor, pour donner au TextView toujours une couleur spcifique, indpendamment des circonstances. Crer un ColorStateList avec des valeurs diffrentes pour les diffrents tats, soit par le constructeur ou par un document XML.

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

9/9