Android : Les bases pour la création d'interfaces utilisateurs

15 aout 2012 rdorigny 0 commentaires

Chaque activité JAVA Android est associée à une vue qui représente l'interface visuelle de l'application. Et c'est par l'intermédiaires des vues que l'utilisateur interfère avec l'application mobile. Nous allons étudier les principes de fonctionnement de ces interfaces visuelles.

L'écran d'une application mobile Android correspond généralement souvent à plusieurs vues. c'est un ensemble d'éléments qui sont organisés hiérarchiquement. Dans la littérature, on parle souvent de l'arbres des vues.



1)Les layout

Les layout sont des sous-classes de la classe ViewGroup, ce sont des wrappers qui permettent de positionner les différents objets. Il est possible de mettre un layout dans un autre.

Les différents modèles sont:
  • LinearLayout: aligne les différents éléments graphiques de gauche à droite ou de haut en bas, il est possible de le préciser par l’attribut orientation vertical et horizontal,
  • RelativeLayout: les objets sont placés les uns par rapport aux autres,
  • FrameLayout: tous les objets sont placés sont calés dans le coin gauche du gabarit,
  • TableLayout: on utilise un tableau pour positionner les objets graphiques.

    • <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout>

    <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <TableRow android:id=@+id/tableRow1 android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="L1C1"></TextView> <TextView android:text="L1C2"></TextView> <TextView android:text="L1C3"></TextView> </TableRow> <TableRow android:id=@+id/tableRow2 android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:text="L2C1"></TextView> <TextView android:text="L2C2"></TextView> </TableRow> </TableLayout>

    Android ne prévoit pas de créer des colonne, seules les lignes sont définis.

    Les tailles:
  • fill_parent (match_content dans les dernières versions de l'API): occupe toute la place possible dans l'élément parent,
  • wrap_content: occupe juste la taille nécessaire.

    • 2)Créer une vue

    Il existe deux méthodes pour créer une vue, en XML ou code directement.

    2.1)Créer une vue en XML

    C'est la meilleure solution, ainsi le framework gérera totalement notre interface homme machine (IHM). Les fichiers sont stockés sous res/layout du package. Le système donnera un numéro d'identifiant automatiquement qui sera définit dans la ressource R, et qui correspond à la variable R.layout.visusondelayout. On créé un fichier main.xml tel que:
    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/letexte" /> </LinearLayout>

    Nous avons vu dans le chapitre précédent comment associer l'interface et l'activité par la commande :
    package fr.doritique; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class VisuSondeActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TextView letexte = (TextView) findViewById(R.id.letexte); letexte.setText("coucou"); } }

    On remarquera la fonction findViewById qui recherche un objet TextView et qui en retourne une instance. On peut alors manipuler sa valeur par le setter setText().
    Ce qui donnera:

    2.2)Création d'une interface en JAVA

    Le framework Android propose également des méthodes pour réaliser la même chose.
    package fr.doritique; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class VisuSondeActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); TextView letexte=new TextView(this); setContentView(letexte); letexte.setText("coucou"); } }


    On créé une instance TextView, on l'affiche puis on précise sa valeur. Mais attention, une activité n'est rattaché qu'à une vue. Donc, si on veut complexifier l'interface, il faudra la construire avant de l'afficher.

    package fr.doritique; import android.app.Activity; import android.os.Bundle; import android.widget.LinearLayout; import android.widget.TextView; public class VisuSondeActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //Instanciation du gabarit LinearLayout Layout=new LinearLayout(this); Layout.setOrientation(LinearLayout.VERTICAL); //Instanciation des deux TextView TextView texte1=new TextView(this); TextView texte2=new TextView(this); //Intégration des TextView dans le layout Layout.addView(texte1); Layout.addView(texte2); //Liaison du layout avec l'activité setContentView(Layout); //Configuration des messages texte1.setText("coucou"); texte2.setText("coucou2"); } }

    Ce qui donnera:

    Conclusion

    Nous vous avons présentés les quelques fonctionnalités de bases pour la création d'une interface Android. Nous avons vu les deux façons pour créer une vue liée à une activité, ainsi que les différents gabarits disponibles.

    Les fonctionnalités avancées feront l'objet d'un prochain article.






    Pseudonyme (obligatoire) :
    Adresse mail (obligatoire) :
    Site web :




    © 2024 www.doritique.fr par Robert DORIGNY