Tutoriel Android : Apprendre à construire des composants graphiques complexes

Chapitre 2.2

Android2ee

Mathias Seguy

Ce tutoriel explique comment construire des composants graphiques complexes. Il fait partie du livre "Android a complete course" dont les chapitres sont listés ci-dessous :

- Chapitre 0 : Installation et préparation de l'environnement de développement

- Chapitre 1 : Premiers pas avec Android

- Chapitre 1.1 : Cycle de vie de l'activité

- Chapitre 2.1 : Les éléments graphiques fondamentaux

- Chapitre 2.2 : Composants graphiques complexes

- Chapitre 3.3 : Intent et IntentFilters

- Chapitre 4.1 : Les Ressources

- Chapitre 4.2 : SharedPreferences et PreferenceActivity

- Chapitre 4.3 : Base de données SQLite

- Chapitre 4.4 : Gestion des fichiers

- Chapitre 5 : Content Provider

Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum : Commentez

- Titre : Tutoriel Android : Apprendre à construire des composants graphiques complexes

- Auteur : Mathias Seguy

- Parution : 11 décembre 2014

- Licence : Copyright ® 2014 Mathias Seguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Les IHMs des Activités - éléments complexes

- I-A. Les onglets

- I-A-1. Une autre activité dans un onglet

- I-B. Les vues basculantes : ViewFlipper

- I-B-1. Vue basculante statique

- I-B-2. Vue basculante dynamique

- I-C. Les tiroirs : SlidingDrawer

- II. Méthodes de saisie : clavier physique ou logiciel

- III. Les menus

- III-A. Menu d'option

- III-B. Menu contextuel

- III-C. Exemple

- III-D. Utilisation de l'inflation pour les menus (description via fichier XML d'un menu)

- IV. Polices de caractères

- V. Intégrer le navigateur WebKit à une activité : le widget WebView

- V-A. Activation JavaScript

- V-B. La méthode LoadData

- V-C. Méthodes de navigation

- VI. Messages surgissants : Toast et AlertDialog

- VI-A. Toast

- VI-B. Les AlertDialogs

- VII. Remerciements

I - Les IHMs des Activités - éléments complexes

I-A - Les onglets

Pour la mise en place d'onglets, il faut s'appuyer sur les widgets suivants :

- TabHost est le conteneur général ;

- TabWidget implémente la ligne des boutons d'onglets (qui contiennent labels, icônes ou une vue) ;

- FrameLayout est le conteneur des contenus des onglets : chaque onglet est un fils de FrameLayout.

Il existe un TabActivity, comme ListActivity, qui encapsule un motif d'interface graphique classique dans une sous-classe d'activité. Ce n'est pas nécessaire, une activité classique peut très bien utiliser également des onglets.

Quelques règles syntaxiques :

- L'identifiant du TabWidget doit être @android :id/tabs ;

- Dans le cas d'une TabActivity l'identifiant du TabHost est @android :id/tabhost.

Exemple de la définition statique d'onglets:

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

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent">

6. <TabHost android:id="@+id/tabhost"

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent">

9. <TabWidget android:id="@android:id/tabs"

10. android:layout_width="fill_parent"

11. android:layout_height="wrap_content"

12. />

13. <FrameLayout android:id="@android:id/tabcontent"

14. android:layout_width="fill_parent"

15. android:layout_height="fill_parent"

16. android:paddingTop="62px">

17. <DigitalClock android:id="@+id/digital"

18. android:layout_width="fill_parent"

19. android:layout_height="fill_parent"

20. android:layout_centerHorizontal="true"

21. />

22. <AnalogClock android:id="@+id/analog"

23. android:layout_width="fill_parent"

24. android:layout_height="wrap_content"

25. android:layout_centerHorizontal="true"

26. android:layout_alignParentTop="true"

27. />

28. </FrameLayout>

29. </TabHost>

30. </LinearLayout>

On remarque que TabHost contient deux objets distincts, le TabWidget qui est la ligne des boutons d'onglets et le FrameLayout qui lui contient les onglets. Ainsi, c'est le FrameLayout qui contient les widgets visualisés dans l'onglet.

1. public class StaticTabPane extends Activity {

2. /** Called when the activity is first created. */

3. @Override

4. public void onCreate(Bundle savedInstanceState) {

5. // Instanciation of the View

6. super.onCreate(savedInstanceState);

7. setContentView(R.layout.main);

8. // Instanciation of the Tab Host the one that contains the tabPanels

9. TabHost tabs = (TabHost) findViewById(R.id.tabhost);

10. tabs.setup();

11. // Instanciation of the first tab component

12. TabHost.TabSpec spec = tabs.newTabSpec("digital");

13. spec.setContent(R.id.digital);

14. //Definition of the label to display for the tabPanel

15. spec.setIndicator("Digital Clock");

16. //Adding the first tabPanel to the TabHost

17. tabs.addTab(spec);

19. //Instanciation of the second tab component

20. spec = tabs.newTabSpec("analogic");

21. spec.setContent(R.id.analog);

22. // Definition of the label to display for the tabPanel

23. spec.setIndicator("Analogic Clock");

24. //Adding the second tabPanel to the TabHost

25. tabs.addTab(spec);

27. }

28. }

Exemple pour la manipulation dynamique de la création d'onglets. Le fichier de déclaration GUI ci-dessus change à peine, l'AnalogClock étant remplacée par un Button :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent">

5. <TabHost android:id="@+id/tabhost"

6. android:layout_width="fill_parent"

7. android:layout_height="fill_parent">

8. <TabWidget android:id="@android:id/tabs"

9. android:layout_width="fill_parent"

10. android:layout_height="wrap_content"

11. />

12. <FrameLayout android:id="@android:id/tabcontent"

13. android:layout_width="fill_parent"

14. android:layout_height="fill_parent"

15. android:paddingTop="62px">

16. <DigitalClock android:id="@+id/digital"

17. android:layout_width="fill_parent"

18. android:layout_height="fill_parent"

19. android:layout_centerHorizontal="true"

20. />

21. <Button android:id="@+id/button"

22. android:layout_width="fill_parent"

23. android:layout_height="fill_parent"

24. android:text="Bouton semi-aleatoire"

25. />

26. </FrameLayout>

27. </TabHost>

28. </LinearLayout>

Seul le code Java change fortement :

1. public class DynamicTabPane extends Activity {

2. /** * The tabHost     */

3. TabHost tabHost;

4. /**     * The On click Listener     */

5. private OnClickListener ocl = new View.OnClickListener() {

6. public void onClick(View view) {

7. addTabSpec();

8. }

9. };

10. /**     * The Button that adds a new TabSpec     */

11. private Button btn;

13. @Override

14. public void onCreate(Bundle icicle) {

15. // Instanciate the activity

16. super.onCreate(icicle);

17. setContentView(R.layout.main);

18. // Instanciate the TabHost

19. tabHost = (TabHost) findViewById(R.id.tabhost);

20. tabHost.setup();

22. // Instanciate the first tabPanel

23. TabHost.TabSpec tabSpec = tabHost.newTabSpec("digital");

24. tabSpec.setContent(R.id.digital);

25. tabSpec.setIndicator("Clock");

26. // Adding the first tabPanel

27. tabHost.addTab(tabSpec);

29. // Instanciate the second tabPanel

30. tabSpec = tabHost.newTabSpec("button");

31. tabSpec.setContent(R.id.button);

32. tabSpec.setIndicator("Button");

33. // Adding the second tabPanel

34. tabHost.addTab(tabSpec);

36. // Adding functionalities to the button: When a clic is done, a new TabPanel is created

37. btn = (Button) findViewById(R.id.button);

38. if (btn == null) {

39. Toast.makeText(this, "nullPointeur exception", Toast.LENGTH_LONG).show();

40. } else {

41. Toast.makeText(this, "not nullPointeur exception", Toast.LENGTH_LONG).show();

42. btn.setOnClickListener(ocl);

43. }

44. }

46. /**

47. * @param tabHost

48. */

49. private void addTabSpec() {

50. Toast.makeText(this, "A new tab is created", Toast.LENGTH_LONG).show();

51. // Retrieve the TabSpec of the TabHost and creating a new entry

52. TabHost.TabSpec spec = tabHost.newTabSpec("analogic");

53. // Creating a new content to the tabPanel using TabContent factory

54. spec.setContent(new TabHost.TabContentFactory() {

55. public View createTabContent(String tag) {

56. // This method has to return a view, the tag is the one define by TabSpec

57. return (new AnalogClock(getApplicationContext()));

58. }

59. });

60. // or using an already defined element:

61. //        spec.setContent(R.id.digital);

62. // Define the Tab label

63. spec.setIndicator("Analogic");

64. // Adding the new tabPanel to the TabHost

65. tabHost.addTab(spec);

66. }

68. }

I-A-1 - Une autre activité dans un onglet

Il est possible d'intégrer une autre activité au sein d'un onglet. Cet exemple est expliqué au chapitre 5.3.5. Cas particulier : La navigation par onglets.

I-B - Les vues basculantes : ViewFlipper

On peut souhaiter pouvoir avoir des onglets sans barre d'onglets, c'est-à-dire basculer d'une vue à une autre au sein de l'activité.

Cela est possible avec l'objet ViewFlipper qui hérite de FrameLayout. Le basculement entre les vues est alors à mettre en place (contrairement aux onglets où le processus est pris en charge par les TabWidget).

I-B-1 - Vue basculante statique

L'objet principal est ViewFlipper, qui se décrit dans le layout.xml, et sa méthode showNext.

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. >

6. <Button android:id="@+id/flip "

7. android:layout_width="fill_parent"

8. android:layout_height="wrap_content"

9. android:text="Flip !"

10. />

11. <ViewFlipper android:id="@+id/flipper"

12. android:layout_width="fill_parent"

13. android:layout_height="fill_parent"

14. >

15. <TextView

16. android:layout_width="fill_parent"

17. android:layout_height="wrap_content"

18. android:text="first"

19. />

20. <TextView

21. android:layout_width="fill_parent"

22. android:layout_height="wrap_content"

23. android:text="second"

24. />

25. </ViewFlipper>

26. </LinearLayout>

Et le code associé :

1. public class FlipTuto extends Activity {

2. /** *The flipperView View      */

3. ViewFlipper flipperView;

5. @Override

6. public void onCreate(Bundle icicle) {

7. super.onCreate(icicle);

8. setContentView(R.layout.main);

9. //Retrieve the flipperView

10. flipperView = (ViewFlipper) findViewById(R.id.flipper);

11. //Instanciate the button

12. Button btn = (Button) findViewById(R.id.flip);

13. //When the button is click, just flip to the next element

14. btn.setOnClickListener(new View.OnClickListener() {

15. public void onClick(View view) {

16. flipperView.showNext();

17. }

18. });

19. }

20. }

I-B-2 - Vue basculante dynamique

Exemple d'ajout de vues à la volée :

Le descripteur d'IHM ne décrit pas le contenu du ViewFlipper :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. >

6. <ViewFlipper android:id="@+id/details"

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. >

10. </ViewFlipper>

11. </LinearLayout>

Le code Java:

1. public class FlipDynamicTuto extends Activity {

2. /*** The dummy data list */

3. static String[] items = { "item1", "item2", "item3", "item4", "item5", "item6" };

4. /**

5. * The viewFlipper

6. */

7. final ViewFlipper viewFlipper;

8. @Override

9. public void onCreate(Bundle icicle) {

10. super.onCreate(icicle);

11. setContentView(R.layout.main);

12. //Retrieve the viewFlipper

13. viewFlipper = (ViewFlipper) findViewById(R.id.details);

14. // Define animation object for the flip

15. viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));

16. viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));

17. //Add view

18. for (String item : items) {

19. Button btn = new Button(this);

20. btn.setText(item);

21. //When the button is click, just flip to the next element

22. btn.setOnClickListener(new View.OnClickListener() {

23. public void onClick(View view) {

24. viewFlipper.showNext();

25. }

26. });

27. //Add a new View to the viewFlipper.

28. viewFlipper.addView(btn, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,

29. ViewGroup.LayoutParams.FILL_PARENT));

30. }

31. //Or make an automatic flipping (in ms)

32. viewFlipper.setFlipInterval(2000);

33. //And launch it

34. viewFlipper.startFlipping();

35. }

37. }

Les descripteurs d'animations :

res\anim\push_left_in.xml:

1. <set xmlns:android="http://schemas.android.com/apk/res/android">

2. <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>

3. <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />

4. </set>

res\anim\push_left_out.xml:

1. <set xmlns:android="http://schemas.android.com/apk/res/android">

2. <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>

3. <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />

4. </set>

I-C - Les tiroirs : SlidingDrawer

Les tiroirs sont des widgets qui s'affichent et se cachent au-dessus de la vue courante. Pour cette raison, il ne peut être le fils que des layouts de type RelativeLayout ou FrameLayout.

Un tiroir (SlidingDrawer) est défini par une poignée (le plus souvent ImageView) et un contenu qu'il pointe au travers des balises android:handle et android:content. L'ouverture et la fermeture par toucher de la poignée sont automatiquement gérées par la poignée.

Les méthodes utiles à l'emploi de ce widget sont :

- open(), close(), toggle() pour ouvrir, fermer et switcher instantanément ;

- animateOpen, animateClose, animateToggle pour ouvrir, fermer et switcher en utilisant une animation ;

- lock, unlock désactive/active l'écoute des clics utilisateurs ;

- ajouter des écouteurs pour l'ouverture du tiroir, sa fermeture, son mouvement.

Exemple :

Descripteur de ressources GUI :

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:layout_width="fill_parent"

3. android:layout_height="fill_parent"

4. >

5. <SlidingDrawer

6. android:id="@+id/drawer"

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. android:handle="@+id/handle"

10. android:content="@+id/content">

11. <ImageView

12. android:id="@id/handle"

13. android:layout_width="wrap_content"

14. android:layout_height="wrap_content"

15. android:src="@drawable/tray_handle_normal"

16. />

17. <Button

18. android:id="@id/content"

19. android:layout_width="fill_parent"

20. android:layout_height="fill_parent"

21. android:text="Button"

22. />

23. </SlidingDrawer>

24. </FrameLayout>

Code Java :

1. public class SlidingDrawerTuto extends Activity {

2. @Override

3. public void onCreate(Bundle icicle) {

4. super.onCreate(icicle);

5. setContentView(R.layout.main);

6. // Retrieve the SlidingDrawer

7. final SlidingDrawer slidingDrawer = (SlidingDrawer) findViewById(R.id.sliding);

8. // Listen for states changed

9. slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener(){

10. @Override

11. public void onDrawerOpened() {//Do something, for example change background picture:

12. slidingDrawer.getHandle().setBackgroundResource(R.drawable.slidingOpen);

13. }});

14. slidingDrawer.setOnDrawerScrollListener(new OnDrawerScrollListener() {

15. @Override

16. public void onScrollStarted() {//Do something

17. }

18. @Override

19. public void onScrollEnded() {//Do something

20. }

21. });

22. slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {

23. @Override

24. public void onDrawerClosed() {//Do something

25. }

26. });

27. }}

II - Méthodes de saisie : clavier physique ou logiciel

De manière transparente, Android propose le clavier logiciel (IME Input Method Editor) quand aucun clavier physique n'existe dans la manipulation de champs texte (EditorText). Nous verrons dans ce chapitre comment personnaliser ce comportement par défaut.

Depuis Android 1.5 un seul attribut sert à définir le style des champs EditText, android:inputType. Ces styles peuvent être séparés par un | de manière à se cumuler. La liste des inputTypes possibles est :

- text

- textCapCharacters

- textCapWords

- textCapSentences

- textAutoCorrect

- textAutoComplete

- textMultiLine

- textImeMultiLine

- textNoSuggestions

- textUri

- textEmailAddress

- textEmailSubject

- textShortMessage

- textLongMessage

- textPersonName

- textPostalAddress

- textPassword

- textVisiblePassword

- textWebEditText

- textFilter

- textPhonetic

- number

- numberSigned

- numberDecimal

- phone

- datetime

- date

- time

Ces inputTypes définissent le clavier qui apparaîtra lorsque l'utilisateur remplira le champ EditText ; ainsi, s'il est d'inputType number, le clavier n'aura que des chiffres…

Exemple :

1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:layout_width="fill_parent"

3. android:layout_height="fill_parent"

4. android:stretchColumns="1" >

5. <TableRow>

6. <TextView

7. android:text="Aucune regle speciale : "

8. />

9. <EditText />

10. </TableRow>

11. <TableRow>

12. <TextView

13. android:text="Adresse email : "

14. />

15. <EditText

16. android:inputType="text|textEmailAddress"

17. />

18. </TableRow>

19. <TableRow>

20. <TextView

21. android:text="Nombre decimal signe : "

22. />

23. <EditText

24. android:inputType="number|numberSigned|numberDecimal"

25. />

26. </TableRow>

27. <TableRow>

28. <TextView

29. android:text="Date :"

30. />

31. <EditText

32. android:inputType="date"

33. />

34. </TableRow>

35. <TableRow>

36. <TextView

37. android:text="Texte multi-lignes : "

38. />

39. <EditText

40. android:inputType="text|textMultiLine|textAutoCorrect"

41. android:minLines="3" android:gravity="top"

42. />

43. </TableRow>

44. </TableLayout>

La seconde préoccupation associée à ce clavier logiciel est de savoir ce que devient l'activité lorsque le clavier apparaît :

- Il peut pousser l'activité vers le haut quand il apparaît (mode adjustPan).

- Il peut modifier la taille de l'activité pour pouvoir se mettre à ses côtés sans rien changer d'autre (mode adjustResize).

- En mode paysage, il peut masquer l'activité et prendre tout l'écran pour améliorer la saisie.

Ce mode est choisi par Android (en fonction de votre layout), pour le modifier il faut le définir au niveau de l'activité, ce qui s'effectue dans le manifeste de cette activité :

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

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3. package="com.commonsware.android.imf.two"

4. android:versionCode="1"

5. android:versionName="1.0">

6. <application android:label="@string/app_name"

7. android:icon="@drawable/icon">

8. <activity android:name=".keyboardTuto"

9. android:label="@string/app_name"

10. android:windowSoftInputMode="adjustResize">

11. <intent-filter>

12. <action android:name="android.intent.action.MAIN" />

13. <category android:name="android.intent.category.LAUNCHER" />

14. </intent-filter>

15. </activity>

16. </application>

17. </manifest>

Les modes disponibles sont :

- StateUnspecified (le système choisit l'état le plus approprié) ;

- stateUnchanged (le système laisse l'état du clavier en l'état quand l'activité passe au premier plan) ;

- stateHidden (le système cache le clavier quand l'activité passe au premier plan) ;

- stateAlwaysHidden (le système cache le clavier quoi qu'il arrive) ;

- stateVisible (le système affiche le clavier quand l'activité passe au premier plan) ;

- stateAlwaysVisible (le système affiche le clavier quoi qu'il arrive) ;

- adjustUnspecified (le système choisit comment le clavier s'insère dans votre activité) ;

- adjustResize (le système change la taille des composants de l'activité pour afficher le clavier) ;

- adjustPan (le système pousse votre activité pour afficher le clavier).

Ces modes sont cumulables les uns avec les autres avec l'opérateur « | » (ex : adjustResize|visible).

III - Les menus

Il y a deux types de menus : les menus contextuels et les menus d'option (menu usuel).

III-A - Menu d'option

Il se déclenche en appuyant sur un bouton de menu et a deux états : icône ou étendu. Il s'ouvre en mode icône (six icônes maximum avec le dernier qui vaut « + » pour afficher le reste du menu en mode étendu).

Deux façons d'implémenter un menu sont possibles : soit en Java, soit en XML.

La création s'effectue en surchargeant la méthode OnCreateOptionsMenu de l'activité :

1. @Override

2. public boolean onCreateOptionsMenu(Menu menu) {

3. populateMenu(menu);

4. return(super.onCreateOptionsMenu(menu));

5. }

L'objet menu est accessible directement dans les méthodes surchargées associées aux menus de l'activité.

Pour ajouter des choix et des sous-menus, il faut utiliser la méthode add de la classe Menu. Cette méthode possède quatre paramètres :

- Un identifiant de groupe permettant de regrouper un ensemble d'items en choix exclusif (comme ButtonGroup).

- Un identifiant de choix servant à identifier l'item du menu par un entier. Cet entier est récupéré par la méthode onOptionsItemSelected.

- Un identifiant d'ordre indiquant un emplacement du choix dans le menu lorsque ce dernier contient des options ajoutées par Android (utiliser Menu.NONE tant que vous ne maîtrisez pas cet attribut).

- Le texte à afficher par le menu.

Ce qui donne :

1. menu.add(Menu.NONE, ITEM1, Menu.NONE, "Item 1");

Les identifiants de choix et de groupes permettent ceci :

- MenuItem.setCheckable avec un identifiant de choix ajoute une case à cocher à côté du titre de l'item.

- Menu.SetGroupCheckable est identique à GroupButton pour les RadioButtons.

III-B - Menu contextuel

Le principe est identique au menu d'option. Le menu contextuel apparaît lorsqu'un utilisateur laisse appuyé un élément de la vue.

Les différences entre menu d'option et menu contextuel :

- Enregistrer les widgets qui porteront le menu contextuel en appelant la méthode registerForContextMenu et en passant le widget (une View).

- Implémenter la méthode OnContextMenu qui reçoit l'objet View en paramètre (ce qui permet d'implémenter plusieurs menus en fonction de cet objet). Cette méthode est appelée à chaque fois que le menu est affiché (contrairement au menu d'options).

Enfin la méthode OnContextItemSelected est partagée par tous les menus contextuels et ne reçoit qu'un MenuItem, il faut donc que les identifiants des items soient tous distincts pour tous les menus contextuels. De plus, getMenuInfo renvoie l'objet ContextMenu.ContextMenuInfo reçu par la méthode onCreateContextMenu.

III-C - Exemple

Descripteur d'IHM :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent" >

5. <TextView

6. android:id="@+id/textView"

7. android:layout_width="fill_parent"

8. android:layout_height="wrap_content"

9. android:text="Texte multi-lignes : "/>

10. <EditText

11. android:id="@+id/editText"

12. android:inputType="text|textMultiLine|textAutoCorrect"

13. android:minLines="3" android:gravity="top"

14. />

15. </LinearLayout>

Code Java :

1. public class MenuTuto extends Activity {

2. /*** A text view     */

3. TextView textView;

4. /** * an Edit Text     */

5. EditText editText;

6. //Items Identifier used by the option menu

7. final private int ITEM_ID1 = Menu.FIRST + 100001;

8. final private int ITEM_ID2 = Menu.FIRST + 100002;

9. final private int ITEM_ID3 = Menu.FIRST + 100003;

10. final private int ITEM_ID4 = Menu.FIRST + 100004;

11. //Item used by the Context Menu

12. final private int ITEM_ID5 = Menu.FIRST + 100005;

13. final private int ITEM_ID6 = Menu.FIRST + 100006;

14. final private int ITEM_ID7 = Menu.FIRST + 100007;

15. final private int ITEM_ID8 = Menu.FIRST + 100008;

17. @Override

18. public void onCreate(Bundle icicle) {

19. //GUI instanciation

20. super.onCreate(icicle);

21. setContentView(R.layout.main);

22. // Graphic elements creation

23. textView = (TextView) findViewById(R.id.textView);

24. editText =(EditText) findViewById(R.id.editText);

25. // Adding the contextual menu on the Widget EditText

26. registerForContextMenu(editText);

27. }

28. /******************************************************************************/

29. /** Context Menu ****************************************************************/

30. /******************************************************************************/

31. //Create a context Menu

32. @Override

33. public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {

34. populateContextMenu(menu);

35. }

37. //Link the context menu's items selection action with the applyMenuChoice method

38. @Override

39. public boolean onContextItemSelected(MenuItem item) {

40. return (applyMenuChoice(item) || super.onContextItemSelected(item));

41. }

42. // Fill the menu

43. private void populateContextMenu(Menu menu) {

44. menu.add(Menu.NONE, ITEM_ID5, Menu.NONE, getString(R.string.item5));

45. menu.add(Menu.NONE, ITEM_ID6, Menu.NONE, getString(R.string.item6));

46. menu.add(Menu.NONE, ITEM_ID7, Menu.NONE, getString(R.string.item7));

47. menu.add(Menu.NONE, ITEM_ID8, Menu.NONE, getString(R.string.item8));

48. }

49. /***********************************************************************/

50. /** Option Menu Methods**************************************************/

51. /***********************************************************************/

52. //Create an option Menu

53. @Override

54. public boolean onCreateOptionsMenu(Menu menu) {

55. populateOptionMenu(menu);

56. return (super.onCreateOptionsMenu(menu));

57. }

58. //Link the option menu's items selection action with the applyMenuChoice method

59. @Override

60. public boolean onOptionsItemSelected(MenuItem item) {

61. return (applyMenuChoice(item) || super.onOptionsItemSelected(item));

62. }

63. // Fill the menu

64. private void populateOptionMenu(Menu menu) {

65. menu.add(Menu.NONE, ITEM_ID1, Menu.NONE, getString(R.string.item1));

66. menu.add(Menu.NONE, ITEM_ID2, Menu.NONE, getString(R.string.item2));

67. menu.add(Menu.NONE, ITEM_ID3, Menu.NONE, getString(R.string.item3));

68. menu.add(Menu.NONE, ITEM_ID4, Menu.NONE, getString(R.string.item4));

69. }

70. /**********************************************************************/

71. /** Option and Context Menu shared Methods*********************************/

72. /**********************************************************************/

73. //Associated action method when a selction occurs in a menu

74. private boolean applyMenuChoice(MenuItem item) {

75. //Use the Item identifier to know the selected one

76. switch (item.getItemId()) {

77. case ITEM_ID1:

78. case ITEM_ID2:

79. case ITEM_ID3:

80. case ITEM_ID4:

81. textView.setText("The item selected from the option Menu is: "+item.getTitle());

82. break;

83. case ITEM_ID5:

84. case ITEM_ID6:

85. case ITEM_ID7:

86. case ITEM_ID8:

87. editText.append("\r\nThe item selected from the context Menu is: "+item.getTitle());

88. break;

89. }

90. return (false);

91. }

92. }

III-D - Utilisation de l'inflation pour les menus (description via fichier XML d'un menu)

L'élément racine doit se nommer Menu, ses fils sont de type « item » ou « group ». Les sous-menus sont déclarés comme étant des menus contenus par un item. Tous les items ont un identifiant permettant de les manipuler dans le code Java.

Exemple, le fichier res\menu\sample :

1. <menu xmlns:android="http://schemas.android.com/apk/res/android">

2. <item android:id="@+id/item2"

3. android:orderInCategory="2"

4. android:title="item2_no_icon" />

6. <item android:id="@+id/item3"

7. android:title="Item3_icon"

8. android:orderInCategory="3"

9. android:icon="@drawable/icon" />

11. <item android:id="@+id/item4"

12. android:orderInCategory="4"

13. android:enabled="false"

14. android:title="item4_disable" />

16. <group android:id="@+id/itemGroup1"

17. android:menuCategory="secondary"

18. android:visible="false">

20. <item android:id="@+id/itemGroup1_item1"

21. android:orderInCategory="0"

22. android:title="item 1.1" />

24. <item android:id="@+id/itemGroup1_item2"

25. android:orderInCategory="1"

26. android:title="item1.2" />

27. </group>

29. <item android:id="@+id/submenu1"

30. android:orderInCategory="3"

31. android:title="submenu">

32. <menu>

34. <item android:id="@+id/submenu_item1"

35. android:title="Item_s1_shown"

36. android:visible="true"

37. android:alphabeticShortcut="s" />

39. <item android:id="@+id/submenu_item2"

40. android:title="Item_s2_hidden"

41. android:visible="false"

42. android:alphabeticShortcut="h" />

44. </menu>

45. </item>

46. </menu>

L'ordre du choix des menus est celui de leur déclaration au sein de ce fichier. Les tags disponibles pour les menus sont :

- titre (label de l'item) ;

- icône (icône de l'item) ;

- ordre (pour spécifier un ordre autre que celui de la déclaration des items) ;

- activation (android:enable) se manipule en Java avec setEnable (pour un item) ou setGroupEnable (pour un groupe) ;

- visibilité (android:visible) se manipule en Java avec setVisible ;

- les raccourcis (android:alphabeticsShortCut ou android:numericalShortCut).

Le descripteur d'IHM :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. >

6. <TextView

7. android:layout_width="fill_parent"

8. android:layout_height="wrap_content"

9. android:text="Menu Avaialable"/>

10. </LinearLayout>

Et le code Java :

1. public class MenuXmlTuto extends Activity {

2. /**

3. * the Menu of the activity

4. */

5. private Menu theMenu = null;

7. // Création de l'activité (qui n'est qu'un TextView ; un label quoi)

8. @Override

9. public void onCreate(Bundle savedInstanceState) {

10. super.onCreate(savedInstanceState);

11. setContentView(R.layout.main);

12. }

14. // Création du menu d'options associé au fichier xml res\menu\sample

15. @Override

16. public boolean onCreateOptionsMenu(Menu menu) {

17. // instanciation du menu via le fichier XML

18. new MenuInflater(getApplication()).inflate(R.menu.sample, menu);

19. // the menu et menu sont le même objet

20. theMenu = menu;

21. // Création du menu comme avant

22. return (super.onCreateOptionsMenu(menu));

23. }

24. // Instanciation de l'action associée à la sélection d'un item du menu (mets à jour le TextView

25. // avec le message associé à l'item)

26. @Override

27. public boolean onOptionsItemSelected(MenuItem item) {

28. //Do something:

29. //for exemple:

30. if(item.getItemId()==R.id.submenu_item1){

31. //show/hide the hidden item

32. theMenu.setGroupVisible(R.id.itemGroup1,

33. !theMenu.findItem(R.id.itemGroup1).isVisible());

34. //show hide an item

35. theMenu.findItem(R.id.item4).setVisible(true);

36. }else if(item.getItemId()==R.id.item3){

37. //Enable/disable an item

38. theMenu.findItem(R.id.item4).setEnabled(true);

39. //enable/disable a group

40. theMenu.setGroupEnabled(R.id.itemGroup1, false);

41. }

42. return (super.onOptionsItemSelected(item));

43. }

44. }

IV - Polices de caractères

Trois polices logiques sont disponibles : « sans », « mono » et « sheriff ».

Pour cela dans un TextView (tous les widgets héritent de TextView !!), il faut utiliser l'attribut @android:typeface.

Exemple :

1. <TableLayout

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

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. android:stretchColumns="1">

6. <TableRow>

7. <TextView

8. android:id="@+id/sans"

9. android:text="Hello sans"

10. android:typeface="sans"

11. android:textSize="20sp"

12. />

13. </TableRow>

15. <TableRow>

16. <TextView

17. android:id="@+id/serif"

18. android:text="Hello serif"

19. android:typeface="serif"

20. android:textSize="20sp"

21. />

22. </TableRow>

24. <TableRow>

25. <TextView

26. android:id="@+id/monospace"

27. android:text="Hello monospace"

28. android:typeface="monospace"

29. android:textSize="20sp"

30. />

31. </TableRow>

32. </TableLayout>

Ajouter une police.

Il suffit de créer un répertoire assets/polices dans ressources et de copier les polices de caractères au format TTF (True Type).

Puis en Java, affecter cette police aux widgets :

TextView tv =(TextView)findViewById(R.id.custom);

Typeface face = Typeface.createFromAsset(getAssets(),"fonts/HandmadeTypewriter.ttf");

tv.setTypeface(face);

Attention : les polices pèsent, ne pas trop ajouter de polices sous peine de pénaliser le téléphone en lui volant toute sa mémoire (une police peut aller de 70Ko à plus de 500Ko !!!).

V - Intégrer le navigateur WebKit à une activité : le widget WebView

Ce navigateur possède son propre package (android.webkit). Pour les opérations simples, WebKit est comme un autre widget Android. On l'affiche, on lui passe l'URL qu'il doit afficher et il l'affiche :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. >

6. <WebView android:id="@+id/webkit"

7. android:layout_width="fill_parent"

8. android:layout_height="fill_parent"

9. />

10. </LinearLayout>

Et le code Java :

1. public class WebKitTutoSimple extends Activity {

2. WebView browser;

4. @Override

5. public void onCreate(Bundle icicle) {

6. super.onCreate(icicle);

7. setContentView(R.layout.main);

8. browser = (WebView) findViewById(R.id.webkit);

9. //load an URL

10. browser.loadUrl("http://stinfoservices.net/");

11. //Set javascript enable

12. browser.getSettings().setJavaScriptEnabled(true);

13. //Javascript can open a new window

14. browser.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

15. }

16. }

V-A - Activation JavaScript

Par défaut il est désactivé. Pour l'activer :

1. //Set JavaScript enable

2. browser.getSettings().setJavaScriptEnabled(true);

3. //Javascript can open a new window

4. browser.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

V-B - La méthode LoadData

Au lieu de faire charger une URL, il est possible de charger des données HTML qui seront affichées au sein du navigateur.

1. //or load data

2. browser.loadData("<html><body>Bonjour !</body></html>","text/html", "UTF-8");

V-C - Méthodes de navigation

Pour des raisons d'ergonomie, WebView ne possède pas de barre de navigation. Mais les méthodes pour naviguer existent (au développeur d'inventer son IHM associée). Ces méthodes sont :

- reload() ;

- goBack() (pour revenir en arrière) et canGoBack (pour savoir si la page précédente existe) ;

- goFroward() et canForward (idem mais pour le forward) ;

- goBackOrForward(int step) avance ou recule du nombre de pas désignés dans l'historique des pages (-1 => goBack) ;

- clearCache ;

- clearHistory.

VI - Messages surgissants : Toast et AlertDialog

VI-A - Toast

Le toast est un message évanescent qui s'affiche et disparaît de lui-même. Il laisse le focus où il est déjà.

Pour lancer un toast, il suffit de trois paramètres : activité courante (le contexte), le texte à afficher ainsi que la durée qui vaut Length_Long ou Length_Short :

1. //Dans le cas où l'on doit récupérer le contexte de l'application (en dehors d'une activité)

2. Toast.makeText(getApplicationContext(), "A toast", Toast.LENGTH_LONG).show();

3. //Dans le cas où l'on se trouve dans une activité, this=getApplicationContext

4. Toast.makeText(this, "A toast", Toast.LENGTH_SHORT).show();

VI-B - Les AlertDialogs

Pour créer une AlertDialog il faut utiliser le builder et chaîner les appels (car les méthodes de builder renvoient builder, pas bête !) ou définir les attributs de la fenêtre proprement sur l'objet builder:

1. //Define the AlertDialog (android.app.AlertDialog.Builder;)

2. Builder alertDialog=new AlertDialog.Builder(this);

3. //set its title

4. alertDialog.setTitle("The Alert Dialog Title");

5. //set its message

6. alertDialog.setMessage("The message to display");

7. //Define its neutral button (its label and the associated action)

8. alertDialog.setNeutralButton("My neutral Button",

9. new DialogInterface.OnClickListener() {

10. public void onClick(DialogInterface dlg, int sumthin) {

11. //Do something.

12. //if nothing done, the window will just close

13. }

14. });

15. //Define its positive button (its label and the associated action)

16. alertDialog.setPositiveButton(R.string.positiveButton, new DialogInterface.OnClickListener() {

17. public void onClick(DialogInterface dlg, int sumthin) {

18. //Do something.

19. //if nothing done, the window will just close

20. }

21. });

22. //Define its negative button (its label and the associated action)

23. alertDialog.setNegativeButton("No",  new DialogInterface.OnClickListener() {

24. public void onClick(DialogInterface dlg, int sumthin) {

25. //Do something.

26. //if nothing done, the window will just close

27. }

28. });

29. //show the alert

30. alertDialog.show();

VII - Remerciements

Nous remercions ced pour sa relecture orthographique et Mickael Baron pour la mise au format Developpez.com.