Imprimer

Dans cet article, nous aborderons les sujets suivants :

 

 Les différents layout

Notions communes aux différents layout

Par exemple android:inputType="textPassword"

 

Le linearlayout

Dans ce layout, tous les composants ajoutés sont disposés à la suite. Via l'attribut orientation, on précise si les éléments seront disposés horizontalement ou verticalement.

Dans l'exemple ci dessous, une page de login (fichier activity_main_linearlayout.xml), est montré la mise en application des tags suivants :

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Page d'authentification" />

    <EditText
        android:id="@+id/editTextLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="votre login"
        android:ems="10" >

        <requestFocus />
    </EditText>
    
       <EditText
        android:id="@+id/editTextPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="votre mot de passe"
android:inputType="textPassword" android:ems="10" > </EditText> <Button android:id="@+id/buttonConnect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Se connecter"
android:onClick="doConnect"/>/> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="0dp" android:text="Annuler" android:layout_weight="0.5"
android:onClick="doReset"/>/> </LinearLayout>

 

Le résultat est le suivant (obtenu via le simulateur de device d'éclipse):

 

 

Le relativelayout

Dans ce layout, les éléments sont positionnés relativement aux autres ou au conteneur. Quelques exemples de positionnement :

L'exemple ci dessous (fichier activity_relativelayout.xml) correspond à une page d'accueil avec trois boutons. Ces trois boutons permettront de naviguer vers une autre activité, chaque activité utilisant un layout différent :

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bienvenue " />

    <TextView
        android:id="@+id/textViewLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView1"
      />

<Button android:id="@+id/buttonGoToTableLayout" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textViewLogin" android:layout_centerHorizontal="true" android:text="Vers tablelayout" android:onClick="goToTableLayout"/>

<Button android:id="@+id/buttonGoToGridLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/buttonGoToTableLayout" android:text="Vers exemple gridlayout" android:onClick="goToGridLayout"/>

<Button android:id="@+id/buttonGoToFrameLayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/buttonGoToGridLayout" android:layout_alignParentRight="true" android:text="Vers exemple framelayout" android:onClick="goToFrameLayout"/> </RelativeLayout>

Le résultat est le suivant :

relativelayout 

 

Le tablelayout

Ce layout permet de disposer les éléments dans un tableau. Par contre, il n'est pas possible du fusionner des cellules comme en html avec la balise table.  

Ci-dessous un exemple de formulaire avec nom, prénom, email, téléphone (fichier activity_tablelayout.xml):

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nom" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="5">
            <requestFocus />
        </EditText>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Prénom" />
        
        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="5"/>

    </TableRow>

   <TableRow
       android:id="@+id/tableRow2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >

       <TextView
           android:id="@+id/textView3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Mail" />

       <EditText
           android:id="@+id/editText3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="5"
           android:inputType="textEmailAddress" />

       <TextView
           android:id="@+id/textView4"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Numéro de téléphone" />

       <EditText
           android:id="@+id/editText4"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="5"
           android:inputType="phone" />

   </TableRow>

</TableLayout>



Le résultat est le suivant (obtenu via le simulateur de device d'éclipse et en se mettant en mode paysage Ctrl F12):

tablelayout

 

Le gridlayout

Ce layout vient compléter le tablelayout en proposant de fusionner des cellules.  Ci-dessous un exemple avec une grille sur 4 colonnes et des fusions de colonne (fichier activity_gridlayout.xml) :

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nom" />

    <EditText
        android:id="@+id/editTextNom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prénom" />

    <EditText
        android:id="@+id/editTextPrenom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email" />
    
    <EditText
        android:id="@+id/editTextEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Téléphone" />
    
    <EditText
        android:id="@+id/editTextTelephone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Adresse" />
        
    <EditText
        android:id="@+id/editTextAdresse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:ems="5" />

</GridLayout>

 

Ce qui donne le rendu suivant :

gridlayout 

 

Le framelayout

 Il s'agit du layout le plus basique. Il permet de superposer des éléments, par exemple le logo Android avec un texte sur cette image.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

       <ImageView 
                     android:src="@drawable/android"
                     android:scaleType="fitCenter"
                     android:layout_height="fill_parent"
                     android:layout_width="fill_parent"/>
         <TextView
                      android:text="Tutorial Android"
                      android:textSize="30sp"
                      android:textStyle="bold"
                      android:textColor="#003399"
                      android:layout_height="fill_parent"
                      android:layout_width="fill_parent"
                      android:gravity="center"/>
</FrameLayout>

 

Le résultat est le suivant  :

framelayout 

 

 

Les intents

Sur nos boutons déclenchant une action, il faut créer un intent pointant vers l'activité voulue et lancer l'activité.

Ce qui donne dans le cas du passage de l'écran de login à l'écran d'accueil :

 

Ci-dessous la méthode déclenchée par l'action de login, qui après vérification de la non nullité du login et du mot de passe, déclenche une autre activité :

 

	public void doConnect(View view) {

		EditText txtUserName = (EditText) findViewById(R.id.editTextLogin);
		String strUserName = txtUserName.getText().toString();
		EditText txtUserPasswd = (EditText) findViewById(R.id.editTextPassword);
		String strUserPasswd = txtUserPasswd.getText().toString();

		if (TextUtils.isEmpty(strUserName)) {
			txtUserName.setError("Veuillez saisir votre login");
			return;
		}
		if (TextUtils.isEmpty(strUserPasswd)) {
			txtUserName.setError("Veuillez saisir votre mot de passe");
			return;
		}
		Toast.makeText(this, "doConnect", Toast.LENGTH_SHORT).show();
		Intent intent = new Intent(this, RelativelayoutActivity.class);
		intent.putExtra(EXTRA_LOGIN, strUserName);
		intent.putExtra(EXTRA_PASSWORD, strUserPasswd);
		startActivity(intent);

	}

 

Changement de l'orientation de l'écran

Suivant que l'écran de votre équipement est orienté en mode portrait ou paysage, il peut être bon de positionner un layout pour chacun de ces modes. Pour ce faire, il faudra créer une seconde vue à positionner dans le répertoire ...

Sous Eclipse, pour passer du mode portrait à paysage, il faut se servir des touches Ctrl F12. 

 

AVD Manager

Pour tester votre code sous Eclipse, il faut décrire le device sur lequel exécuté votre application via Android Virtual Device.

Si ce menu n’apparaît pas, configurer Eclipse : Windows > Customize perspective >  Command group availibility :  android SDK and AVD Manager

 

Code source

TestLayout.zip