Android Layout: LinearLayout

Le plus important dans une application mobile en plus des fonctionnalités offertes est son interface. Combien de fois j'ai eu à désinstaller une application qui marchait bien mais dont l'interface ressemblait à un puzzle géant. On va donc éviter de reproduire ce genre d'effet sur les futurs utilisateurs de nos applications.
Pour ça il faut commencer par voir ce que android nous offre comme possibilité d'interface, s'approprier les interactions de base du système, pour pouvoir les intégrer au mieux et produire une "killer-app". Pendant que j'y suis, il faudra un jour traiter du référencement des applications sur les market. Même si on en est pas encore là.


Allez on devient sérieux pour découvrir le premier gabarit que propose android. .
Pour ça on ouvre le précédent projet "Hello world" et on va parcourir l'arborescence du projet pour atteindre le fichier main.xml.

• res -> Layout -> main.xml

Sous eclipse on constate deux interfaces pour ce fichier. Une  Wysiwyg et une affichant du code xml.

Interface WYSIWYG

Cet outil facilite la création d'interface pour les applications, mais il faudra de temps en temps privilégier l'écriture de code xml pour avoir un rendu plus propre et plus adapté à ce que l'on veut produire.

Autant le dire maintenant Android est riche en structure d'affichage (Layout ) dont les principales sont: Linear, Relative Grid, Tab, Table ou List.








Le premier gabarit que nous allons voir est le LinearLayout qui permet de définir des zones horizontales ou verticales pour organiser nos éléments à l'écran. Pour ceux qui ont déjà fait du développement web, ça équivaut à la balise "div" mais avec une information sur le positionnement que les éléments qu'il contient prendront par défaut.

Je vous propose de faire un copier/Coller du code suivant dans le fameux main.xml

<?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"     
  android:baselineAligned="false">    
  <LinearLayout         
   android:layout_width="match_parent"        
   android:id="@+id/linearLayout1"         
   android:orientation="horizontal"        
   android:weightSum="1"         
   android:baselineAligned="false"        
   android:layout_gravity="fill_horizontal"         
   android:layout_height="50dp">            
   <TextView             
    android:layout_height="50dp"             
    android:text="KodMobil"            
    android:layout_width="80dp"             
    android:layout_weight='0.41'            
    android:layout_gravity="fill_vertical"             
    android:background="#fff"            
    android:id="@+id/TextView1"            
    android:textSize="25px"            
    android:textStyle="bold" >            
   </TextView>            
   <TextView             
    android:text="KodMobil"             
    android:id="@+id/textView2"            
    android:background="#ff0"             
    android:layout_weight='0.41'            
    android:layout_width="80dp"            
    android:layout_height="50dp"             
    android:layout_gravity="fill_horizontal"            
    android:textSize="25px">        
   </TextView>        
   <TextView             
    android:text="KodMobil"             
    android:id="@+id/textView3"            
    android:background="#f00"            
    android:layout_weight="0.20"            
    android:layout_width="80dp"             
    android:layout_height="50dp"            
    android:layout_gravity="fill_vertical"            
    android:textSize="25px">        
   </TextView>        
   <TextView             
    android:text="KodMobil"            
    android:layout_width="80dp"            
    android:background="#fff"             
    android:id="@+id/textView4"            
    android:layout_weight="0.41"             
    android:layout_height="50dp"            
    android:layout_gravity="fill_vertical"            
    android:textSize="25px">        
   </TextView>    
  </LinearLayout>    
  <LinearLayout         
   android:layout_width="fill_parent"        
   android:layout_height="fill_parent"        
   android:id="@+id/linearLayout2"         
   android:orientation="vertical">            
   <TextView             
    android:text="KodMobil"             
    android:id="@+id/textView5"            
    android:background="#f00"             
    android:layout_width="fill_parent"            
    android:layout_height="wrap_content"            
    android:textSize="50px"            
    android:textColor="#ff0"            
    android:textStyle="bold">            
   </TextView>            
   <TextView             
    android:text="KodMobil"             
    android:id="@+id/textView6"            
    android:background="#ff0"            
    android:layout_width="fill_parent"            
    android:layout_height="wrap_content"            
    android:textSize="50px"            
    android:textColor="#f00">            
   </TextView>            
   <TextView             
    android:text="KodMobil"             
    android:id="@+id/textView7"            
    android:background="#fff"            
    android:layout_width="fill_parent"            
    android:layout_height="wrap_content"            
    android:textSize="50px"            
    android:textColor="#000">            
   </TextView>    
  </LinearLayout>
 </LinearLayout>

Affichage de tewtview dans des LinearLayout

En inspectant le code on remarque qu'on a trois LinearLayout. Un principal, qui encadre les deux autres avec la direction verticale (android:orientation="vertical") qui forcera tous nos éléments à être positionnés les uns au dessus des autres.
Les deux lignes suivantes indiquent au LinearLayout d'occuper tout l'espace du conteneur parent autant en hauteur qu'en largeur.

android:layout_width="fill_parent"
android:layout_height="fill_parent"


Ensuite dans les deux LinearLayout qui suivent on force l'affichage de TextView à l'horizontale pour le premier (android:orientation="horizontal") et à la verticale pour le second.

Résultat final de l'opération on obtient quelque chose comme la capture en dessus.

Sur les TextView (zone permettant d'afficher du texte) j'en ai profité pour faire des tests de mises en forme que j'expliquerai sûrement une prochaine fois.