Plan de la partie

31

Partie 2
30

INTERFACES
GRAPHIQUES
Dveloppement sous Android - Mlle TRIMECH R

Dans cette partie, nous traitons les points suivants :

Vues

et gabarits

Les

lments graphiques

Les

listes

Les

onglets

Dveloppement sous Android - Mlle TRIMECH R

Vue & Gabarits

Attributs des gabarits

32

33

Les lments graphiques hritent de la classe View. On peut regrouper des

lments graphiques dans une ViewGroup. Des ViewGroup particuliers sont

prdfinis: ce sont des gabarits (layout) qui proposent une prdispositions des
objets graphiques:

LinearLayout: dispose les lments de gauche droite ou du haut vers le bas

RelativeLayout: les lments enfants sont placs les uns par rapport aux autres

TableLayout: disposition matricielle

FrameLayout: disposition en haut gauche en empilant les lments

Les dclarations se font principalement en XML, ce qui vite de passer par les

instanciations Java.
Dveloppement sous Android - Mlle TRIMECH R

Les attributs les plus importants des gabarits sont:

android:layout_width et android:layout_height:
="fill_parent": l'lment remplit tout l'lment parent
="wrap_content": prend la place minimum ncessaire l'affichage
android:orientation: dfinit l'orientation d'empilement
android:gravity: dfinit l'alignement des lments
Voici un exemple de LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:id="@+id/accueilid"
>
</LinearLayout>
Dveloppement sous Android - Mlle TRIMECH R

Linterface comme ressource (1)

Linterface comme ressource (2)

34

35

Une interface graphique dfinie en XML sera aussi gnre comme une

Le layout reste modifiable au travers du code, comme tous les autres

ressource dans la classe statique R. Le nom du fichier xml, par exemple

objets graphiques. Pour cela, il est important de spcifier un id dans la

accueil.xml permet de retrouver le layout dans le code java au travers de

dfinition XML du gabarit (android:id="@+id/accueilid").

R.layout.accueil.

Cette remarque est aussi valable pour tous les autres objets graphiques.

Ainsi, pour associer la premire vue graphique l'activit principale de

Ainsi, on peut accder cet lment par son id et agir dessus au travers

l'application, il faut faire:

du code Java:

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LinearLayout l = (LinearLayout)findViewById(R.id.accueilid);
l.setBackgroundColor(Color.BLACK);

setContentView(R.layout.acceuil);
}
Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les lments graphiques

Les labels de texte

36

37

Un gabarit peut contenir des lments graphiques, ou d'autres gabarits. On

En XML

retrouve le mme principe que les tableaux imbriqus de l'HTML.

Les interfaces peuvent aussi inclure d'autres interfaces, permettant de factoriser

des morceaux d'interface. On utilise dans ce cas le mot clef include:

<?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"
>
<include android:id="@+id/include01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/acceuil"
>
</include>
</LinearLayout>
Dveloppement sous Android - Mlle TRIMECH R

<TextView

En programmation
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

android:id="@+id/le_texte"

LinearLayout gabarit = new LinearLayout(this);

// centrer les lments graphiques

android:layout_width="wrap_content"

gabarit.setGravity(Gravity.CENTER);
android:layout_height="wrap_content"

// empiler vers le bas!

gabarit.setOrientation(LinearLayout.VERTICAL);

android:text="@string/hello"
android:layout_gravity="center"

TextView texte = new TextView(this);

texte.setText("cration dune interface!");

/>

gabarit.addView(texte);
setContentView(gabarit);
}
Dveloppement sous Android - Mlle TRIMECH R

38

Les images

Les labels de texte

En XML
<EditText

Zone de texte

39

Interception dvnements

android:text=""

En XML

En programmation

android:id="@+id/EditText01"
android:layout_width="fill_parent"

edit.addTextChangedListener(new TextWatcher()

<ImageView

ImageView image = new ImageView(this);

android:id="@+id/logo"

image.setImageResource(R.drawable.logo);

android:src="@drawable/logo"

gabarit.addView(image);

android:layout_height="wrap_content"
>

@Override

</EditText>

En programmation

public void onTextChanged(CharSequence s,

int start,int before, int count) {

EditText edit = new

// do something here

EditText(this);

edit.setText("Edit me");
gabarit.addView(edit);

android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizont
al"
></ImageView>

);
Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les boutons

Les Listes (1)

40

41

En XML
<Button

vnement par click

Button b =
(Button)findViewById(R.id.Button01);

android:text="Valider"

b.setOnClickListener(new OnClickListener() {

Au sein d'un gabarit, on peut implanter une liste que l'on

pourra drouler si le nombre d'lments est important. Si l'on

souhaite faire une liste plein cran, il suffit juste de poser un

android:id="@+id/Button01"
android:layout_width="wrap_content"

@Override

android:layout_height="wrap_content

public void onClick(View v) {

Toast.makeText(v.getContext(), Action!",

>

Toast.LENGTH_LONG).show();
</Button>

}
});

layout linaire et d'y implanter une ListView. Le XML du

gabarit est donc:
<LinearLayout ...> <ListView android:id="@+id/listView1"

...> </ListView></LinearLayout>

}
Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les Listes (2)

Les Listes (3)

42

43

Etant donn qu'une liste peut contenir des lments

Prenons un exemple simple: une liste de chaine de caractres. Dans ce cas, on

cr un nouveau gabarit montexte et on ajoute dynamiquement un

graphiques divers et varis, les lments de la liste doivent

ArrayAdapter la liste listView1. Le gabarit suivant doit tre plac dans

tre insrs dans un ListAdapter et il faut aussi dfinir le

montexte.xml:

<?xml version="1.0" encoding="utf-8"?>

<TextView

gabarit qui sera utilis pour afficher chaque lment du

android:text="TextView"
android:id="@+id/montexte"

ListAdapter.

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

Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les Listes (4)

Les listes plus complexes

44

45

Le code de l'application qui cr la liste peut tre:

ListView list = (ListView)findViewById(R.id.listView1);

Supposons crer une liste complexe

Comprenant un texte
Une image
Etc.

ArrayAdapter<String> tableau =new

ArrayAdapter<String>(list.getContext(), R.layout.montexte);
for (int i=0; i<40; i++)
{
tableau.add( Cest lelement " + i);
}
list.setAdapter(tableau);
Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les Listes plus complexes (2)

Les Listes plus complexes (2)

46
Layout d'une ligne de liste
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:baselineAligned="true"
android:gravity="center">
<TextView android:layout_height="wrap_content"
android:id="@+id/monTexte"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"></TextView>
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_width="fill_parent"
android:gravity="right" android:layout_gravity="center">
<ImageView android:id="@+id/monImage"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@android:drawable/ic_menu_compass"></ImageView>
</LinearLayout>
</LinearLayout>

47

Dveloppement sous Android - Mlle TRIMECH R

Layout de la liste

<?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">
<ListView
android:layout_height="fill_parent"
android:id="@+id/maliste"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>

Dveloppement sous Android - Mlle TRIMECH R

Les Listes plus complexes (3)

Les Listes plus complexes (4)

48

49

Lorsque les listes contiennent un layout plus complexe qu'un texte, il faut

utiliser un autre constructeur de ArrayAdapter (ci-dessous) o resource

est l'id du layout appliquer chaque ligne et textViewResourceId est l'id
de la zone de texte inclus dans ce layout complexe.

ArrayAdapter (Context context, int resource, int textViewResourceId)

Dveloppement sous Android - Mlle TRIMECH R

A chaque entre de la liste, la vue gnre utilisera le

layout complexe et la zone de texte contiendra la string

passe en argument la mthode add.
ListView list = (ListView)findViewById(R.id.maliste);
ArrayAdapter<String> tableau = new ArrayAdapter<String>(
list.getContext(), R.layout.ligne, R.id.monTexte);
for (int i=0; i<40; i++)
{
tableau.add( Cest lelement " + i);
}
list.setAdapter(tableau);

Dveloppement sous Android - Mlle TRIMECH R

Les onglets (1)

Les onglets (2)

50

51

La ralisation d'onglets permet de mieux utiliser l'espace rduit

de l'cran.
Pour raliser les onglets, il faut suivre une structure trs

particulire pour le gabarit. Les diffrents onglets sont ensuite

crs dynamiquement par le code, en associant chaque onglet
l'activit correspondante.
Remarque : Dans ce qui suit, une explication du principe qui

peut dpendre de lAPI utilise.

Dveloppement sous Android - Mlle TRIMECH R

La dfinition du gabarit doit tre la suivante:

<TabHost android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:padding="5dp" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"/>
</LinearLayout>
</TabHost>
Dveloppement sous Android - Mlle TRIMECH R

Les onglets (3)

Les onglets (4)

52

53

IMPORTANT :
Certains ids sont imposs lorsqu'on utilise des onglets:

TabHost : android:id= "@android:id/tabhost"

TabWidget : android:id= "@android:id/tabs"

FrameLayout : android:id= "@android:id/tabcontent"

L'activit qui gre l'ensemble des onglets est une activit

spciale hritant de TabActivity. Le gabarit prcdent est

donc associ une classe dfinir hritant de TabActivity:
public class AndroTabs2Activity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...

Dveloppement sous Android - Mlle TRIMECH R

Dveloppement sous Android - Mlle TRIMECH R

Les onglets (5)

Les onglets (6)

54

55

Chaque onglet contient, dans sa partie du bas, une activit qu'il convient

de crer. Pour chaque activit, il faut donc dfinir une classe d'activit et
lui associer son gabarit:

Activit de onglet1

public class ActivityOnglet1 extends Activity {

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.onglet1);
}}
<LinearLayout ...>
layout onglet1.xml
<RatingBar android:id="@+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></RatingBar>
<SeekBar android:layout_height="wrap_content"
android:id="@+id/seekBar1"
android:layout_width="fill_parent"></SeekBar>
</LinearLayout>
Dveloppement sous Android - Mlle TRIMECH R

Ensuite, dans l'activit principale hritant de TabActivity, il faut crer

dynamiquement les onglets et les remplir:

TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
// Cration de l'intent lancant l'activit de l'onglet
intent = new Intent().setClass(this, ActivityOnglet1.class);
// Cration dynamique d'une configuration pour l'onglet 1
spec = tabHost.newTabSpec("Onglet 1");
spec.setContent(intent); // Associer l'intent l'onglet
spec.setIndicator("Onglet 1"); // Ajouter un texte dans l'onglet
tabHost.addTab(spec); // Ajout de l'onglet
...
// Choisir l'onglet par dfaut
tabHost.setCurrentTab(0);

NE PAS OUBLIER DE DCLARER LES ACTIVITS DANS LE MANIFEST

Dveloppement sous Android - Mlle TRIMECH R