Les interfaces graphiques
1. Les conteneurs ou gabarits
Les éléments graphiques héritent de la classe View. On peut regrouper des éléments graphiques
dans une ViewGroup. Des ViewGroup par culiers sont prédé nis: ce sont des gabarits (layout) qui
proposent une prédisposi on des objets graphiques:
• LinearLayout: dispose les éléments de gauche à droite ou du haut vers le bas
• FrameLayout: disposi on en haut à gauche en empilant les éléments
• Rela veLayout: les éléments enfants sont placés les uns par rapport aux autres
• ConstraintLayout : dispose les vues en u lisant des contraintes dé nies par rapport aux autres
vues et au parent.
• TableLayout: disposi on matricielle
• GridLayout: disposi on matricielle avec N colonnes et un nombre in ni de lignes
Les déclara ons se font principalement en XML, ce qui évite de passer par les instancia ons Java.
1.1. A ributs des gabarits
Les a ributs des gabarits perme ent de spéci er des a ributs supplémentaires.
Les plus importants sont:
• android:layout_width et android:layout_height:
="match_parent": l'élément remplit tout l'élément parent
="wrap_content": prend la place minimum nécessaire à l'a chage
• android:orienta on: dé nit l'orienta on d'empilement
• android:gravity: dé nit l'alignement des éléments
Exemple 1 : pour construire un gabarit Linéaire :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="@+id/text1"
android:text="XXXXXXXX" />
<TextView
android:id="@+id/text2"
android:text=« XXXXXXXX" />
</LinearLayout>
Page 1
ti
tt
tt

ti
ti
fi
ti
ti
ti
ti
fi
tt
ti
ti
ti
fi
tt
ffi
fi
fi
fi
ti
Exemple 2: pour empiler une image et un texte:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent
android:src="@drawable/mon_ image" />
<TextView
android:id="@+id/text3"
android:text="XXXXXXXX" />
</FrameLayout>
2. L’interface comme ressource
Une interface graphique dé nie en XML sera générée comme une ressource dans la classe sta c R
Pour associer la première vue graphique a l'ac vité principale :
public void onCreate (Bundle savedInstanceState) {
super. onCreate (savedInstanceState) ;
setContentView (R.layout .acceuil);
}
Le layout reste modi able au travers du code comme tous les autres objets graphiques.
Pour cela il est important de spéci er un id dans la dé ni on XML du gabarit
(android:id="+id/accueilid")
3. Les labels de texte
En XML
<TextView
android:id="@+id/texte_id"
android:layout_width=« wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="XXXXXXXX" / >
Page 2

fi
fi
fi
ti
fi
ti
ti
Par la programma on:
public class Activity2 extends AppCompatActivity {
public void onCreate (Bundle savedInstanceState) {
super. onCreate (savedInstanceState) ;
LinearLayout gabarit = new LinearLayout (this) ;
gabarit.setGravity(Gravity.CENTER); // centrer les éléments graphiques
gabarit.setOrientation (LinearLayout.VERTICAL); // empiler vers le bas !
TextView texte = new TextView (this) ;
texte.setText ("Programming creation of interface !");
gabarit.addView (texte) ;
setContentView (gabarit);
｝
｝
4. Les zones de texte
En XML
<EditText
android:text=""
android:id="@+id/EditText01"
android: layout_width="match_parent"
android: layout_height="wrap_content">
</EditText>
Par la programma on:
EditText edit = new EditText (this) ;
edit.setText ("Edit me");
gabarit.addView (edit) ;
// Interception d’événements:
edit.addTextChangedListener (new TextWatcher () {
@Override
public void onTextChanged (CharSequence s, int start, int before, int count) {
// faire quelque chose
}
});
5. Les images
Page 3

ti
ti
En XML
<ImageView
android:id="@+id/logoEnsi"
android: src="@drawable/ensi"
android:layout_width="100px"
android:layout_height="wrap_content"
android: layout _gravity="center_horizontal" />
Par la programma on:
ImageView image = new ImageView (this) ;
image. setImageResource(R.drawable.monimage);
gabarit.addView (image)
6. Les boutons
En XML
<Button
android:text="Go !"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android: layout_height="wrap_content" />
Par la programma on:
Bu on b = ndViewById (R.id.Bu on01) ;
b. setOnClickListener (new OnClickListener () (
@Override
public void onClick(View v) {
Toast makeText (v.getContext (), "Stop !", Toast. LENGTH_LONG) . show () ;
}
}
Page 4
tt

fi
ti
ti
tt
