Vous êtes sur la page 1sur 14
Tutoriel Android Les Interfaces Graphiques Bonjour et bienvenue à ce nouveau tutoriel android . Aujourd’hui on

Tutoriel Android

Les Interfaces Graphiques

Bonjour et bienvenue à ce nouveau tutoriel android . Aujourd’hui on va manipuler les différents types de layout s en créant une calculatrice

Comme on l’a vu dans le tutoriel précedant ils existent plusieurs types de layouts(gabarits) :

LinearLayout , RelativeLayout, TableLayout et FrameLayout ! on va attaquer les 2 premiers types puisqu’ils sont les plus utilisés et rencontrés dans la pratique. Le but de cette session c’est de créer cette interface homme/machine en utilisant 2 methodes ( RelativeLayout et LinearLayout)

Tutoriel Android Les Interfaces Graphiques Bonjour et bienvenue à ce nouveau tutoriel android . Aujourd’hui on

I.LinearLayout :

En utilisant ce type d’affichage, les enfants de ce gabarit seront positionnés linéairement selon l’orientation choisie

Vertical : l’un au-dessus de l’autre de haut en bas

Horizontal : l’un à côté de l’autre de gauche à droite

La création d’une interface se fait sur 2 phases :

ENSI Junior Entreprise

1

Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les grandes lignes à suivre ! En utilisant les LinearLayout l’interface aura ce squelette

 Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les
 Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les
 Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les
Ecran d’affichage
Ecran d’affichage
 Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les
 Abstraction : c’est la base de notre vue, on spécifie nos besoins en traçant les
Boutons
Boutons

On constate bien qu’il y a des éléments graphiques ( boutons , écran d’affichage) qui sont organisés

verticalement et horizontalement

  • On aura donc besoin de plusieurs LinearLayout d’où l’entrée en jeu de notions père et fils !

  • En effet on va diviser l’interface en plusieurs gabarit et on est face à 2 choix :

Soit on charge l’affichage par un LinearLayout d’orientation « vertical » et on lui affecte des

fils d’orientation « horizontal » et chaque fils contiendra les différents boutons de chaque ligne Soit on charge l’affichage par un Linear Layout « vertical » qui contiendra 2 fils (l’écran d’affichage et un Linear layout « horizontal » qui à son tour contiendra des LinearLayout vertial (liste des boutons de chaque colonne)) Pour ce tutoriel je vais choisir la première solution

Donc notre squelette final est le suivant :

ENSI Junior Entreprise

LinearLayout vertcal/père LinearLayout Horizontal/fils 2
LinearLayout
vertcal/père
LinearLayout
Horizontal/fils
2

Realisation : une fois on a fait l’abstraction de notre vue, il nous reste qu’à écrire le code XML correspondant

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

android:paddingTop="20px"

>

<EditText

android:id="@+id/affichage" android:layout_width="fill_parent" android:layout_height="wrap_content" android:enabled="false" android:cursorVisible="false"

android:textSize="20px"

/> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button

android:id="@+id/bouton1"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="1"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton2"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="2"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton3"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="3"

android:layout_weight="1"

/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button

android:id="@+id/bouton4"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="4"

android:layout_weight="1"

/>

ENSI Junior Entreprise

3

<Button

android:id="@+id/bouton5"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="5"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton6"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="6"

android:layout_weight="1"

/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button

android:id="@+id/bouton7"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="7"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton8"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="8"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton9"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="9"

android:layout_weight="1"

/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button android:id="@+id/bouton_sub" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-"

android:layout_weight="1"

/> <Button

android:id="@+id/bouton0"

android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="0"

android:layout_weight="1"

/>

ENSI Junior Entreprise

4

<Button android:id="@+id/bouton_mul" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="*"

android:layout_weight="1"

/> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Button android:id="@+id/bouton_div" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="/"

android:layout_weight="1"

/> <Button android:id="@+id/bouton_del" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="C"

android:layout_weight="1"

/> <Button android:id="@+id/bouton_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+"

android:layout_weight="1"

/>

</LinearLayout>

<Button

android:id="@+id/bouton_res"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="="

/>

</LinearLayout>

II.RelativeLayout :

En utilisant ce type d’affichage, les enfants (boutons et écran d’affichage) de ce gabarit seront positionnés les uns par rapport aux autres

  • Pour se faire on utilisera les Identifiants de ces éléments graphiques et on ajoutera un attribut de position « android :layout_XXX »

* android:layout_below : permet de placer l'élément en dessous de l'élément spécifié (par son id) * android:layout_above : permet de placer l'élément au dessus de l'élément spécifié .

ENSI Junior Entreprise

5

* android:layout_toLeftOf : permet de placer l'élément a gauche de l'élément spécifié . * android:layout_toRightOf : permet de placer l'élément a droite de l'élément spécifié .

* android:layout_alignTop : le haut de l'élément sera aligné avec le haut de l'élément spécifié . * android:layout_alignBottom : le bas de l'élément sera aligné avec le bas de l'élément spécifié . * android:layout_alignLeft : le coté gauche de l'élément sera aligné avec le coté gauche de l'élément spécifié . * android:layout_alignRight : le coté droit de l'élément sera aligné avec le coté droit de l'élément spécifié .

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

android:id="@+id/ecran1"

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

android:paddingTop="20px"

>

<EditText android:layout_height="wrap_content" android:id="@+id/affichage" android:layout_width="fill_parent"

android:textSize="20px"

/> <Button

android:id="@+id/bouton1"

android:text="1"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_below="@+id/affichage" /> <Button

android:id="@+id/bouton2"

android:text="2"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton1"

android:layout_below="@+id/affichage" /> <Button

android:id="@+id/bouton3"

android:text="3"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton2"

android:layout_below="@+id/affichage"

/>

ENSI Junior Entreprise

6

<Button

android:id="@+id/bouton4"

android:text="4"

android:layout_height="wrap_content"

android:layout_below="@+id/bouton1"

android:layout_width="110dip"/>

<Button

android:id="@+id/bouton5"

android:text="5"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton4"

android:layout_below="@+id/bouton2"

/> <Button

android:id="@+id/bouton6"

android:text="6"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton5"

android:layout_below="@+id/bouton3"

/> <Button

android:id="@+id/bouton7"

android:text="7"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_below="@+id/bouton4"

/>

<Button

android:id="@+id/bouton8"

android:text="8"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton7"

android:layout_below="@+id/bouton5"

/> <Button

android:id="@+id/bouton9"

android:text="9"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton8"

android:layout_below="@+id/bouton6"

/> <Button android:id="@+id/bouton_sub" android:text="-"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_below="@+id/bouton7"

/> <Button

android:id="@+id/bouton0"

ENSI Junior Entreprise

7

android:text="0"

android:layout_width="110dip"

android:layout_height="wrap_content" android:layout_toRightOf="@+id/bouton_sub"

android:layout_below="@+id/bouton8"

/> <Button android:id="@+id/bouton_mul" android:text="*"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton0"

android:layout_below="@+id/bouton9"

/> <Button android:id="@+id/bouton_div" android:text="/"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_below="@+id/bouton_sub"

/> <Button android:id="@+id/bouton_del" android:text="C"

android:layout_width="110dip"

android:layout_height="wrap_content" android:layout_toRightOf="@+id/bouton_div"

android:layout_below="@+id/bouton0"

/> <Button android:id="@+id/bouton_add" android:text="+"

android:layout_width="110dip"

android:layout_height="wrap_content"

android:layout_toRightOf="@+id/bouton_del"

android:layout_below="@+id/bouton_mul"

/>

<Button

android:id="@+id/bouton_res"

android:text="="

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/bouton_del"

/>

</RelativeLayout>

ENSI Junior Entreprise

8

Passons maintenant au code java (Partie logique).Pour programmer la calculatrice, jai adapté un code trouvé sur le site du zéro

package com.Calculatrice; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; public class BasicCalculator extends Activity { private Button bouton0; private Button bouton1; private Button bouton2; private Button bouton3; private Button bouton4; private Button bouton5; private Button bouton6; private Button bouton7; private Button bouton8; private Button bouton9; private Button boutonDiv; private Button boutonMul; private Button boutonAdd; private Button boutonSub; private Button boutonRes; private Button boutonDel; private EditText affichage; private double chiffre1; private boolean clicOperateur = false; private boolean update = false; private String operateur = ""; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); bouton0= (Button)findViewById(R.id.bouton0); bouton1= (Button)findViewById(R.id.bouton1); bouton2= (Button)findViewById(R.id.bouton2); bouton3= (Button)findViewById(R.id.bouton3); bouton4= (Button)findViewById(R.id.bouton4); bouton5= (Button)findViewById(R.id.bouton5); bouton6= (Button)findViewById(R.id.bouton6); bouton7= (Button)findViewById(R.id.bouton7); bouton8= (Button)findViewById(R.id.bouton8); bouton9= (Button)findViewById(R.id.bouton9); affichage= (EditText) findViewById(R.id.affichage); boutonMul= (Button)findViewById(R.id.bouton_mul); boutonDiv= (Button)findViewById(R.id.bouton_div); boutonSub= (Button)findViewById(R.id.bouton_sub); boutonAdd= (Button)findViewById(R.id.bouton_add); boutonRes= (Button)findViewById(R.id.bouton_res);

ENSI Junior Entreprise

9

boutonDel= (Button)findViewById(R.id.bouton_del);

/* * liste des ecouteur pour les bouton !! */

bouton0.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 0

});

}

chiffreClick("0");

bouton1.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 1

chiffreClick("1");

} }); bouton2.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton2

chiffreClick("2");

} }); bouton3.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 3

chiffreClick("3");

} }); bouton4.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 4

});

}

chiffreClick("4");

ENSI Junior Entreprise

10

bouton5.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 5

chiffreClick("5");

}

}); bouton6.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 6

chiffreClick("6");

} }); bouton7.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 7

chiffreClick("7");

} }); bouton8.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 8

chiffreClick("8");

} }); bouton9.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton 9

chiffreClick("9");

} }); boutonDiv.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton div clickOp("/");

});

}

ENSI Junior Entreprise

11

boutonMul.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton mul clickOp("*");

} }); boutonAdd.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton add clickOp("+");

} }); boutonSub.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton sub clickOp("-");

} }); boutonDel.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton del delClick();

} }); boutonRes.setOnClickListener(new View.OnClickListener() {

@Override public void onClick(View v) { // TODO Auto-generated method stub //methode qui va etre declenché lorsqu'on appui sur le bouton = resClick();

}

});

}

public void clickOp(String str){ if(clicOperateur){ calcul();

affichage.setText(String.valueOf(chiffre1));

}else{

ENSI Junior Entreprise

12

chiffre1 = Double.valueOf(affichage.getText().toString()).doubleValue(); clicOperateur = true;

} operateur = str; update = true;

} public void chiffreClick(String str) { if(update){ update = false; }else{

if(!affichage.getText().equals("0"))

str = affichage.getText() + str;

}

affichage.setText(str);

} public void resClick(){ calcul(); update = true; clicOperateur = false;

} public void delClick(){ clicOperateur = false; update = true; chiffre1 = 0; operateur = ""; affichage.setText("");

} private void calcul(){ if(operateur.equals("+")){ chiffre1 = chiffre1 + Double.valueOf(affichage.getText().toString()).doubleValue();

affichage.setText(String.valueOf(chiffre1));

}

if(operateur.equals("-")){ chiffre1 = chiffre1 - Double.valueOf(affichage.getText().toString()).doubleValue();

affichage.setText(String.valueOf(chiffre1));

} if(operateur.equals("*")){ chiffre1 = chiffre1 * Double.valueOf(affichage.getText().toString()).doubleValue();

affichage.setText(String.valueOf(chiffre1));

} if(operateur.equals("/")){ try{ chiffre1 = chiffre1 / Double.valueOf(affichage.getText().toString()).doubleValue();

affichage.setText(String.valueOf(chiffre1));

}catch(ArithmeticException e){

affichage.setText("0");

}

}

}

}

ENSI Junior Entreprise

13

ENSI Junior Entreprise

14