D Veloppement Sous Android Part2

7/25/2019 D Veloppement Sous Android Part2

1/7

INTERFACESGRAPHIQUES

Partie 230

Dveloppement sous Android - Mlle TRIMECH R

Plan de la partie

Dans cette partie, nous traitons les points suivants :

Vues et gabarits

Les lments graphiques

Les listes

Les onglets

31


Vue & Gabarits


32

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

lments graphiques dans une ViewGroup. Des ViewGroupparticuliers 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.

Attributs des gabarits


33

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:


2/7

Linterface comme ressource (1)


34

Une interface graphique dfinie en XML sera aussi gnre comme une

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

accueil.xmlpermet de retrouver le layout dans le code java au travers de

R.layout.accueil.

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

l'application, il faut faire:

public voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.acceuil);

}

Linterface comme ressource (2)


35

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

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

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

Cette remarque est aussi valable pour tous les autres objets graphiques.Ainsi, on peut accder cet lment par son id et agir dessus au travers

du code Java:

LinearLayout l = (LinearLayout)findViewById(R.id.accueilid);

l.setBackgroundColor(Color.BLACK);

Les lments graphiques


36

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

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:

Les labels de texte


37

En XML En programmation



LinearLayout gabarit = newLinearLayout(this);

// centrer les lments graphiques

gabarit.setGravity(Gravity.CENTER);

// empiler vers le bas!

gabarit.setOrientation(LinearLayout.VERTICAL);

TextView texte = newTextView(this);

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

gabarit.addView(texte);

setContentView(gabarit);

}


3/7

Zone de texte

38


En XML

En programmation

EditText edit = new

EditText(this);

edit.setText("Edit me");

gabarit.addView(edit);

edit.addTextChangedListener(new TextWatcher()

{

@Override

public voidonTextChanged(CharSequence s,

intstart,intbefore, intcount) {

// do something here

}

}

);

Interception dvnements

Les labels de texteLes images


39

En XML En programmation

ImageView image = newImageView(this);

image.setImageResource(R.drawable.logo);

gabarit.addView(image);

Les boutons


40


4/7

Les Listes (2)


42

Etant donn qu'une liste peut contenir des lments

graphiques divers et varis, les lments de la liste doivent

tre insrs dans un ListAdapter et il faut aussi dfinir legabarit qui sera utilis pour afficher chaque lment du

ListAdapter.

Les Listes (3)


43

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

cr un nouveau gabarit montexte et on ajoute dynamiquement un

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

montexte.xml:

Les Listes (4)


44

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

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

ArrayAdapter tableau =new

ArrayAdapter(list.getContext(), R.layout.montexte);

for(inti=0; i


5/7

Les Listes plus complexes (2)


46

Layout d'une ligne de liste



47

Layout de la liste



48

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 textViewResourceIdest l'id

de la zone de texte inclus dans ce layout complexe.

ArrayAdapter (Context context, int resource, int textViewResourceId)



49

A chaque entre de la liste, la vue gnre utilisera lelayout complexe et la zone de texte contiendra la string

passe en argument la mthode add.

ListViewlist= (ListView)findViewById(R.id.maliste);

ArrayAdapter tableau =new ArrayAdapter(

list.getContext(), R.layout.ligne, R.id.monTexte);

for(inti=0; i


6/7

Les onglets (1)


50

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.

Les onglets (2)


51

La dfinition du gabarit doit tre la suivante:

Les onglets (3)


52

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"

Les onglets (4)


53

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 classAndroTabs2Activity extendsTabActivity {

@Override



setContentView(R.layout.main);

...


7/7

Les onglets (5)


54

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:public classActivityOnglet1 extendsActivity {

public voidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);

setContentView(R.layout.onglet1);

}}

layout onglet1.xml

Activit de onglet1

Les onglets (6)


55

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

dynamiquement les onglets et les remplir:

TabHosttabHost= getTabHost();TabHost.TabSpecspec;

Intent intent;

// Cration de l'intent lancant l'activit de l'ongletintent = newIntent().setClass(this, ActivityOnglet1.class);

// Cration dynamique d'une configuration pour l'onglet 1spec = tabHost.newTabSpec("Onglet 1");

spec.setContent(intent); // Associer l'intent l'ongletspec.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

D Veloppement Sous Android Part2

Documents

Transcript of D Veloppement Sous Android Part2