Sauvegarde de l’état de l’Activité

Le code suivant permet d’ajouter plus d’informations à la sauvegarde:

protected void onSaveInstanceState(Bundle savedInstanceState) {

[Link](“playerScore“, mCurrentScore);

[Link](“playerLevel“, mCurrentLevel);
[Link](savedInstanceState);
}

Ces valeurs peuvent être récupérées par la suite dans le Bundle de onCreate(..)

1
Sauvegarde de l’état de l'activité
L'objet Bundle passé en paramètre de la méthode onCreate permet de restaurer les valeurs des interfaces
d'une activité qui a été déchargée de la mémoire. En effet, lorsque l'on appuie par exemple sur la touche
Home, en revenant sur le “bureau”, Android peut-être amené à décharger les éléments graphiques de la
mémoire pour économiser les ressources. Si l'on re-bascule sur l'application, l'application peut avoir perdu
les valeurs saisies dans les zones de texte...

Si une zone de texte n'a pas d'identifiant, Android ne pourra pas la sauver et elle ne pourra pas être
restaurée à partir de l'objet Bundle.

Si l'application est complètement détruite (tuée), rien ne peut être restauré.

2
 Exercice
● Créez un nouveau projet avec une Activity selon le template “Empty
Activity”,
● Redéfinissez les différentes méthodes du cycle de vie,
● Afficher dans chacune un message de log à l’aide de la classe Log,
● Observez l’ordre de l’affichage de ces messages dans la console dans
les différents cas de figures. N’oubliez pas de tester la rotation de
l'écran.

3
3. Interfaces ● 3.1 Vues et gabarits
3.2 Inclusions de gabarits
Graphiques
●
● 3.3 Positionnement avancé
● 3.4 Les listes
● 3.5 Les galeries
● 3.6 Les onglets

4
3.1 Vues et Gabarits
Les éléments graphiques héritent de la classe View. On peut regrouper des éléments graphiques dans
une ViewGroup. Des ViewGroup particuliers sont prédéfinis: ce sont des gabarits (layout) qui proposent
une prédispositions des objets graphiques:

● LinearLayout: dispose les éléments de gauche à droite ou du haut vers le bas ( 1 Element/ligne ou bien 1
Element/colonne)
● RelativeLayout: les éléments enfants sont placés par rapports à leurs parents ou bien les uns par rapport
aux autres
● TableLayout: disposition matricielle
● FrameLayout: disposition en haut à gauche en empilant les éléments
● GridLayout: disposition matricielle avec N colonnes et un nombre infini de lignes
● ConstraintLayout: similaire au RelativeLayout mais créé sur mesure pour l’éditeur visuel
Les déclarations se font principalement en XML, ce qui évite de passer par les
instanciations Java.

5
Attributs des Layouts
Les attributs des gabarits permettent d’adapter la disposition
des éléments fils. Les plus importants attributs sont: <LinearLayout
xmlns:android="[Link]
om/apk/res/android"
● android:layout_width et android:layout_height: android:orientation="vertical"
○ ="match_parent": l'élément remplit tout l'élément android:layout_width="match_parent"
android:layout_height="match_parent"
parent android:gravity="center"
○ ="wrap_content": prend la place minimum android:id="@+id/accueilid"
nécessaire à l'affichage >
○ ="fill_parent": comme match_parent (deprecated, …
API<8)
● android:orientation: définit l'orientation d'empilement …
(Horizontal ou Vertical)
● android:gravity: définit l'alignement des éléments
</LinearLayout>
(Allignement vers le Haut, centre, le bas, droite ..)

6
 Exemples de gabarits Afin de pouvoir référencer le positionnement
d’un élément par rapport à un autre, on dispose
RelativeLayout : Dans ce gabarit on positionne chaque d’un moyen simple et efficace, il s’agit des
identificateurs (ID).
élément par rapport à son conteneur :
● android:layout_alignParentTop (true / false) : Cette option
Rappel de l’utilisation des ID :
permet de préciser si le haut de l’élément doit être aligné
avec celui de son conteneur. ● A la déclaration d’un élément : android:id=
● Même principe pour : android:layout_alignParentBottom, “@+id/idElement”
android:layout_alignParentLeft et ● A l’utilisation : @id/idElement
android:layout_alignParentRight.
● android:layout_centerHorizontal : Indique si l’élément doit
être centré horizontalement dans son conteneur.
● Même principe pour : android:layout_centerVertical.
● android:layout_centerInParent : Vous permet d’indiquer que
l’élément doit être centré horizontalement et verticalement
dans le conteneur.

7
RelativeLayout (positionnement relatif)
● android:layout_above : Indique que l’élément ● android:layout_alignBottom : Indique que le
sera placé au-dessus de celui indiqué par son bas de notre élément est aligné avec le bas de
id. l’élément indiqué.
● android:layout_below : Indique que l’élément ● android:layout_alignLeft : Indique que le côté
sera placé en dessous de celui indiqué par son gauche de notre élément est aligné avec le
id. côté gauche de l’élément indiqué.
● android:layout_toLeftOf : Indique que ● android:layout_alignRight : Indique que le
l’élément sera positionné à gauche de celui côté droit de notre élément est aligné avec le
indiqué par son id. côté droit de l’élément indiqué.
● android:layout_toRightOf : Indique que ● android:layout_alignBaseLine : Indique que les
l’élément sera positionné à droite de celui lignes de base des 2 éléments sont alignées.
indiqué par son id.
● android:layout_alignTop : Indique que le haut ATTENTION! Left/Right ⇒ Start/End
de notre élément est aligné avec le haut de
l’élément indiqué.

8
 <RelativeLayout
xmlns:android="[Link]
"

RelativeLayout (exemple)
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="16dp"
android:paddingEnd="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentStart="true"
android:layout_toStartOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentEnd="true"
android:text="@string/done" />
</RelativeLayout>
9
 ConstraintLayout Contraintes circulaires :
● layout_constraintCircle : references another widget id
● layout_constraintCircleRadius : the distance to the other widget center
Contraintes relatives : ● layout_constraintCircleAngle : which angle the widget should be at (in
degrees, from 0 to 360)
● layout_constraintLeft_toLeftOf
● layout_constraintLeft_toRightOf
● layout_constraintStart_toEndOf
● layout_constraintStart_toStartOf
● layout_constraintRight_toLeftOf <Button android:id="@+id/buttonA" ... />
● layout_constraintRight_toRightOf <Button android:id="@+id/buttonB" ...
● layout_constraintEnd_toStartOf app:layout_constraintCircle="@+id/buttonA"
● layout_constraintEnd_toEndOf
● layout_constraintTop_toTopOf app:layout_constraintCircleRadius="100dp"
● layout_constraintTop_toBottomOf app:layout_constraintCircleAngle="45" />
● layout_constraintBottom_toTopOf
● layout_constraintBottom_toBottomOf
● layout_constraintBaseline_toBaselineOf

<Button android:id="@+id/buttonA" ... />

<Button android:id="@+id/buttonB" ...
app:layout_constraintLeft_toRightOf="@+id/buttonA" />

10
Autres exemples
Positionnement linéaire LinearLayout:
<LinearLayout
xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" android:orientation="vertical"
android:id="@+id/accueilid"
>
<TextView android:id="@+id/le_texte"
android:text="@string/hello" />
<TextView android:id="@+id/le_texte2"
android:text="@string/hello2" />
</LinearLayout>

11
L’interface graphique comme ressource
Une interface graphique définie en XML sera aussi générée comme une
ressource dans la classe statique R. Le nom du fichier xml, par exemple
[Link] permet de retrouver le layout dans le code java au travers de
[Link].
Ainsi, pour associer la première vue graphique à l'activité principale de
l'application, il faut faire:
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link]);
}

12
L’interface graphique comme ressource
Le layout reste modifiable au travers du code, comme tous les autres objets
graphiques. Pour cela, il est important de spécifier un id dans la définition
XML du gabarit (android:id="@+id/accueilid"). Le "+" signifie que cet id est
nouveau et doit être généré dans la classe R. Un id sans "+" signifie que l'on
fait référence à une ressource déjà existante.
En ayant généré un id, on peut accéder à cet élément et agir dessus au
travers du code Java:
LinearLayout l = (LinearLayout)findViewById([Link]);
[Link]([Link]);

13
Les Labels de texte
En XML: En Java: (ATTENTION! ç’est juste pour montrer que c’est
possible, mais c’est à éviter!)
<TextView
android:id="@+id/le_texte" public class Activity2 extends Activity {
android:layout_width="wrap_content" public void onCreate(Bundle savedInstanceState) {
android:layout_height="wrap_content" [Link](savedInstanceState);
android:text="@string/hello" LinearLayout gabarit = new LinearLayout(this);
android:layout_gravity="center" [Link]([Link]);
/> [Link]([Link]);

TextView texte = new TextView(this);

[Link]("Programming creation of interface !");
[Link](texte);
setContentView(gabarit);
}

14
Les zones de saisie
En XML:
<EditText android:text=""
android:id="@+id/myText"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</EditText>

En Java: (ATTENTION! à éviter!)

EditText edit = new EditText(this);
[Link]("Edit me");
[Link](edit);

15
Les images
En XML: En Java:
<ImageView ImageView image = new ImageView(this);
android:id="@+id/logoecole" [Link]([Link]);
android:src="@drawable/logoecole" [Link](image);
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
></ImageView>

16
 La gestion des événements de click se
font par l'intermédiaire d'un listener:
Les boutons Button b =
(Button)findViewById([Link]);
En XML: [Link](new OnClickListener() {

<Button android:text="@string/go" @Override

android:id="@+id/goButton" public void onClick(View v) {
[Link]([Link](), "Stop !",
android:layout_width="wrap_content" Toast.LENGTH_LONG).show();
}
});
android:layout_height="wrap_content">
}
</Button>
Il est aussi possible d’utiliser l’attribut
onClick=”clickHandler” depuis le code
XML pour capturer les évènements de
click!

17
Unités de mesure
● dp : Density independent Pixel ( Pixel indépendant ● pt : Point - 72 points par pouce. basé sur la
de la Densité) - Unité abstraite qui est basée sur la taille physique de l'écran.
densité physique de l'écran. Cette unité est égale à ● px : Pixels - Corresponds aux pixels réels de
un pixel sur un écran de 160 DPI (Points par l'écran. Cette unité de mesure n'est pas
pouce). Cette dimension est utilisée pour la mise recommandées car le rendu sur les
en page des éléments. px = dp * (dpi / 160) différents types d'écrans peut être
● sp : Scale independent Pixel (Pixel indépendant de différents. Le nombre de pixels par pouce
l’échelle) - Utilisé pour les tailles de polices. On peut varier suivant les appareils.
pourrait comparer cette unité aux em du ● mm : Millimètre - basée sur la taille
développement web. La police peut être plus ou physique de l'écran
moins grosse suivant les préférences utilisateurs ● in : Inches (Pouces) - basée sur la taille
physique de l'écran

18
Exercice : première interface graphique
Nom
● En utilisant des LinearLayout, construisez une activité qui correspond à
Prénom
l’interface ci contre : Classe
● En utilisant un ConstraintLayout, refaites la même activité.
● Affichez un message temporaire sur l'écran quand le bouton “enregistrer” est
cliqué. Remarques
● Changez l’arrière plan de l’activité en un dégradé de couleurs.
● Créez une interface adaptée au mode paysage. Elle exploite l’espace de l'écran
en affichant la zone des remarques à côté de l’image au lieu d’être en dessous.

ENREGISTRER

19