Interfaces

Tutoriels Android

Nouveau jeu multijoueurs !

Utilisez votre Smartphone comme manette, ouvrez le site BoomBoom Fighter, et explosez vos amis !

Interfaces






Créer une interface avec ADT


Le but de cette rubrique du tuto, ainsi que la suivante, va être de créer une liste, avec deux boutons: un permettant d'effacer la liste, l'autre de la remplir.

Il est possible de placer directement les éléments de l'interface avec ADT, avec l'onglet "Graphical Layout", qui apparaît Lorsque vous allez sur un XML de l'interface.

L'onglet "main.xml" sert à modifier directement le code du xml.

Attention: Si vous voulez toucher le code après avoir modifié l'interface, vous devez enregistrer votre xml, voire même parfois le fermer et l'ouvrir à nouveau, au risque de rencontrer parfois un petit bug du plug-in ADT (je vous laisserai découvrir cela, vous ne me croiriez pas ;) ).

Rappel: Si vous lancez l'application, ne la lancez pas depuis votre xml, il va vous créer un fichier XXX.out.xml et l'application ne se lancera pas.

Plaçons maintenant des éléments sur l'interface avec le Graphical Layout, par exemple un titre, avec une liste, et deux boutons en dessous de la liste:

Voici le résultat obtenu avec le Graphical Layout:
Remarque: Lors du placement des "ImageButton", une petite fenêtre est apparue, vous demandant quelle image vous souhaitiez mettre sur le bouton. Vous pouvez à ce moment choisir l'image, mais vous pourrez aussi la modifier directement dans le xml.

Nous avons donc maintenant nos éléments. Nous allons améliorer le placement des éléments: en effet, le code généré place avec des valeurs en dur les éléments. L'idéal est d'avoir des positions relatives; c'est d'autant plus important que les tailles d'écrans de smartphones varient énormément - je n'ai jusqu'ici pas parlé des tablettes tactiles sous Android, mais votre application fonctionne sous celles-ci si vous ne la paramétrez pas.

Cela a été utile? 3 0    -    Une suggestion? (facultatif)


Mettre en forme le XML


Nous allons maintenant modifier directement le code du xml pour maîtriser les éléments du xml.

Tout d'abord nous allons changer le LinearLayout de base en RelativeLayout: en effet, un RelativeLayout permet de placer les éléments qu'il contient les uns par rapport aux autres.

Nous allons lui ajouter également un id "page_accueil".

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/page_accueil"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
47
</RelativeLayout>


Voici maintenant le TextView:

1
2
3
4
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />


Nous allons lui ajouter un id, changer le texte qu'il contient, et le centrer:

1
2
3
4
5
6
    <TextView
        android:id="@+id/titre_page"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Bienvenue!" />


Occupons-nous du LinearLayout contenant les boutons - il est possible que vous n'ayez pas tout à fait le même code généré, mais comme vous pouvez le voir, certaines valeurs sont codées en dur (marges):

 <LinearLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="73dp"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="22dp"
            android:layout_toRightOf="@+id/imageButton3"
            android:src="@drawable/ic_launcher" />

  </LinearLayout>


Explications du code:
  • La valeur "fill_parent" des attributs layout_width ou layout_height signifie que l'élément prendra la taille de l'élément parent;
  • La valeur "wrap_content" signifie que l'élément prendra la taille dont il a besoin;
  • "layout_toRightOf" signifie que l'élément concerné se situera à droite de l'élément ciblé; il existe également les attributs "layout_toLeftOf", "layout_below " & "layout_above";
  • "layout_alignParentTop/Bottom/Left/Right" permet de gérer l'alignement de l'élément par rapport à son conteneur;


Nous allons changer l'id en "zoneDeBoutons" de ce LinearLayout, changer le layout_height pour que le LinearLayout prenne uniquement la hauteur dont il a besoin, l'aligner en bas de page, le centrer et lui donner un poids ("weightSum"):

1
android:weightSum="2"

Ce poids est en fait un pourcentage, si vous définissez un weightSum de 1, cela signifie que 1 représente 100% de la largeur ou hauteur - selon l'orientation - de votre LinearLayout.

En l'occurence ici, je lui ai donné un poids de 2: j'ai 2 boutons, et chaque bouton va faire un poids de 1:

1
android:layout_weight="1"


Voici une petite ligne de code utile pour faire disparaître le fond des ImageButton:

1
android:background="@android:color/transparent"


Nous allons enfin supprimer les marges, changer les id des deux boutons "remplir" et "effacer", et les propriétés de type "layout_alignParentTop" pour les boutons, devenues inutiles. Les autres propriétés n'ont pas lieu d'être retouchées. Voici le code final pour la zone de boutons:

    <LinearLayout
        android:id="@+id/zoneDeBoutons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:weightSum="2" >

        <ImageButton
            android:id="@+id/remplir"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/effacer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/imageButton1"
            android:background="@android:color/transparent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>


L'idée est de placer la ListView sous le titre, et au-dessus de la zone de boutons; On va modifier l'id de la ListView pour qu'il soit plus parlant en "contenuDeLaPage", et on va lui donner ses positions relatives. Sa hauteur doit être définie par la valeur "wrap_content" pour ne pas qu'elle chevauche les autres éléments - son élément parent étant le RelativeLayout de la page entière. Voici le code de la ListView modifié:

1
2
3
4
5
6
7
    <ListView
        android:id="@+id/contenuDeLaPage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/zoneDeBoutons"
        android:layout_below="@+id/titre_page" >
    </ListView>


Une fois toutes ces modifications effectuées, vous devriez avoir la mise en page souhaitée, comme ceci:




Passons maintenant au code Java.

Cela a été utile? 3 1    -    Une suggestion? (facultatif)


Lier les éléments du XML à l'activité Java


Voici le code Java de l'activité de base que vous avez - pour moi il s'agit de TestActivity:

package test.activities;

import android.app.Activity;
import android.os.Bundle;

public class TestActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}


Rappel: Par la propriété "setContentView" on lie l'activité au fichier main.xml contenu dans le dossier layout.

On va maintenant déclarer les éléments dans l'activité, et les lier au fichier xml:

package test.activities;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TestActivity extends Activity {
    /** Called when the activity is first created. */
	
	//Déclaration des éléments
	private RelativeLayout page_accueil;
	private TextView titre_page;
	private ListView contenuDeLaPage;
	private LinearLayout zoneDeBoutons;
	private ImageButton remplir, effacer;

	//Constructeur de l'activité
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Création du lien avec le fichier main.xml
        setContentView(R.layout.main);
        
        //Création des liens avec le main.xml
        this.page_accueil = (RelativeLayout)findViewById(R.id.page_accueil);
        this.titre_page = (TextView)findViewById(R.id.titre_page);
        this.contenuDeLaPage = (ListView)findViewById(R.id.contenuDeLaPage);
        this.zoneDeBoutons = (LinearLayout)findViewById(R.id.zoneDeBoutons);
        this.remplir = (ImageButton)findViewById(R.id.remplir);
        this.effacer = (ImageButton)findViewById(R.id.effacer);
        
    }
}


Le but va être maintenant de mettre en place les listeners sur les éléments de l'interface, et de remplir la ListView.

Rendez-vous au prochain chapitre, Contrôleurs.

Cela a été utile? 8 0    -    Une suggestion? (facultatif)







*Les commentaires seront validés avant d'apparaître.

Commentaires

2 commentaire(s)
Bonjour, comment faire si on veut faire une recherche sur la listview
2014-09-28 15:04:12 - Par unknow
Bonjour, ce tuto devrait répondre à  votre besoin : http://www.tutozone.info/2014/10/tutoriel-listview-personnalisee-avec.html
2015-03-18 11:48:00 - Par François
Mon profil LinkedIn Me suivre sur Twitter

Copyright FC © 2012-2014