Les interface graphiques sous android

download Les interface graphiques sous android

of 5

  • date post

    01-Jul-2015
  • Category

    Mobile

  • view

    218
  • download

    2

Embed Size (px)

description

Layout de base sous Androud

Transcript of Les interface graphiques sous android

  • 1. M.Houssem LAHIANICours de programmation sous AndroidResponsable de matire : Monsieur Houssem Lahiani.Chapitre 2 : Les interfaces graphiques sous androidPlan du chapitreChapitre 2 : Les interfaces graphiques sous Android ......................................................................................................... 2I. LinearLayout ................................................................................................................................................................ 21. Orientation du Layout ............................................................................................................................................. 22. Taille des lments .................................................................................................................................................. 2II. RelativeLayout ........................................................................................................................................................ 31. Positionnement relatif au conteneur...................................................................................................................... 32. Position relative aux autres lments .................................................................................................................... 3III. AbsoluteLayout ........................................................................................................................................................ 4IV. TableLayout ............................................................................................................................................................. 4

2. M.Houssem LAHIANIChapitre 2 : Les interfaces graphiques sous AndroidLes interfaces sont dfinies via des fichiers XML. Ce format permet d'avoir un diteur graphique d'interface et d'avoir une vraie sparation entre votre code Java (comportement) et votre interface. Tout ce qui est fait en XML pourrait galement tre fait en Java, cependant le code serait beaucoup plus verbeux et complexe maintenir. Les interfaces dveloppes en Java sont principalement utilis comme le visuel d'un cran doit tre gnr dynamiquement en fonction des donnes (un formulaire dynamique par exemple).Il existe plusieurs types de layouts parmi lesquels :I. LinearLayoutCe layout permet de placer les composants les uns aprs les autres . Il faut ensuite savoir de quelle manire (verticalement ou horizontalement).Plusieurs proprits sont disponibles pour permettre aux dveloppeurs de personnaliser ce Layout.1. Orientation du LayoutCest la premire chose que vous prcisez quand vous crez votre LinearLayout (android:orientation). Cette option spcifie la faon dont seront aligns les lments contenus dans ce Layout. Deux options sont disponibles : Verticale : Oriente les lments sur une ligne verticale. Horizontale : Oriente les lments sur une ligne horizontale.2. Taille des lmentsLe LinearLayout ainsi que tous les widgets qui le composent doivent fournir une taille (hauteur et largeur). Donc ils doivent dfinir les deux proprits suivantes : android:layout_width android:layout_heightCes deux proprits peuvent prendre 3 types de valeur : Une taille fixe : par exemple 50px (pixels). Donc quel que soit la taille de lcran, llment occupera exactement 50px. fill_parent : Dans ce cas on demande au composant doccuper tout lespace disponible chez son conteneur parent (aprs le placement des autres widgets). wrap_content : Lorsqu'un layout a cette proprit, sa taille dpend directement de la taille des composants qu'il contient. Pour demander au Widget doccuper une taille naturelle (la taille de son contenu pour le texte par exemple). Sil est trop gros par rapport la taille disponible. Android soccupera par exemple de couper le texte sil ny a plus de place. 3. M.Houssem LAHIANIII. RelativeLayoutLe principe du RelativeLayout est de placer les lments selon dautres lments du conteneur. Voici les diffrents moyens qui sont votre disposition pour le placement des lments dans le cas dun RelativeLayout :1. Positionnement relatif au conteneurDans cette relation, vous pouvez lier un lment son conteneur : android:layout_alignParentTop (true / false) : Cette option permet de prciser si le haut de llment doit tre align avec celui de son conteneur. Mme principe pour : android:layout_alignParentBottom, android:layout_alignParentLeft et android:layout_alignParentRight. android:layout_centerHorizontal : Indique si llment doit tre centr horizontalement dans son conteneur. Mme principe pour : android:layout_centerVertical. android:layout_centerInParent : Vous permet dindiquer que llment doit tre centr horizontalement et verticalement dans le conteneur.2. Position relative aux autres lmentsAfin de pouvoir rfrencer le positionnement dun lment par rapport un autre, vous disposez dun moyen simple et efficace, il sagit des identificateurs (ID).Donc voil comment vous pouvez utiliser un ID : A la dclaration dun lment : android:id= @+id/idElem A lutilisation : @id/idElemMaintenant que les bases sont poses, voici les diffrentes options disponibles : android:layout_above : Indique que llment sera plac au-dessus de celui indiqu par son id. android:layout_below : Indique que llment sera plac en dessous de celui indiqu par son id. android:layout_toLeftOf : Indique que llment sera plac gauche de celui indiqu par son id. android:layout_toRightOf : Indique que llment sera plac droite de celui indiqu par son id. android:layout_alignTop : Indique que le haut de notre lment est align avec le haut de llment indiqu. android:layout_alignBottom : Indique que le bas de notre lment est align avec le bas de llment indiqu. android:layout_alignLeft : Indique que le ct gauche de notre lment est align avec le ct gauche de llment indiqu. android:layout_alignRight : Indique que le ct droit de notre lment est align avec le ct droit de llment indiqu. android:layout_alignBaseLine : Indique que les lignes de base des 2 lments sont alignes. 4. M.Houssem LAHIANIIII. AbsoluteLayoutAndroid fournit galement le conteneur AbsoluteLayout, dont le contenu est dispos en fonction de coordonnes spcifiques on lui indique o placer un fils en prcisant ses coordonnes X, Y, et Android le positionne cet endroit sans poser de question. Ceci a lavantage de fournir un positionnement prcis; en revanche, cela signifie galement que les vues nauront un aspect correct que sur des crans dune certaine dimension, moins dcrire beaucoup de code pour ajuster les coordonnes en fonction de la taille de lcran.Les crans Android pouvant avoir nimporte quelle taille et ces tailles voluent continuellement, lutilisation dAbsoluteLayout risque de devenir assez problmatique.IV. TableLayoutDernier layout de base, il permet d'organiser les lments en tableau, comme en HTML, mais sans les bordures. Voici un exemple d'utilisation de ce layout : 5. M.Houssem LAHIANI