Layouts

Dans ce chapitre, nous aborderons les sujets suivants:
► Définir et gonfler une mise en page
► Utilisation de RelativeLayout
► Utilisation de LinearLayout
► Création de tables - TableLayout et GridLayout
► Utilisation de ListView, GridView et d'adaptateurs
► Modification des propriétés de disposition pendant l'exécution
► Optimisation des mises en page avec la visionneuse de la hiérarchie


Dans Android, l'interface utilisateur est définie dans une mise en page. Une mise en page peut être déclarée en XML ou créée dynamiquement dans le code. (Il est recommandé de déclarer la mise en page en XML plutôt qu'en code afin de conserver la couche de présentation distincte de la couche d'implémentation.) Une mise en page peut définir un objet Listitem individuel, un fragment ou même toute l'activité. Les fichiers de mise en page sont stockés dans le dossier / res / layout et référencés dans le code avec l'identificateur suivant: R.layout. <Filename_without_extension>.
Android fournit une variété utile de classes de mise en page qui contiennent et organisent des éléments individuels d'une activité (tels que des boutons, des cases à cocher et d'autres vues). L'objet ViewGroup est un objet conteneur qui sert de classe de base pour la famille de classes Layout d'Android. Les vues placées dans une mise en page forment une hiérarchie, la mise en page la plus haute étant le parent.
Android fournit plusieurs types de mise en page intégrés conçus pour des objectifs spécifiques, tels que RelativeLayout, qui permet de positionner les vues par rapport à d'autres éléments. LinearLayout peut empiler les Vues ou les aligner horizontalement, selon l'orientation spécifiée. Le TableLayout peut être utilisé pour disposer une grille de Vues. Dans différentes dispositions, nous pouvons également justifier les Vues avec Gravité et fournir une taille proportionnelle avec le contrôle du poids. Les dispositions et viewGroups peuvent être imbriqués les uns dans les autres pour créer des configurations complexes. Plus d'une douzaine d'objets Layout différents sont fournis pour la gestion des widgets, des listes, des tableaux, des galeries et d'autres formats d'affichage. De plus, vous pouvez toujours dériver des classes de base pour créer vos propres dispositions personnalisées.

Détails
Catégorie : Layouts
Affichages : 21
Comme mentionné dans l'introduction, RelativeLayout permet aux vues d'être positionnées les unes par rapport aux autres et par le parent. RelativeLayout est particulièrement utile pour réduire le nombre de mises en page imbriquées, ce qui est très important pour réduire les besoins de mémoire et de traitement.

Se préparer
Créez un nouveau projet et appelez-le RelativeLayout. La disposition par défaut utilise un RelativeLayout, que nous utiliserons pour aligner les Vues horizontalement et verticalement.
Comment faire...
1. Ouvrez le fichier res / layout / activity_main.xml et modifiez-le comme suit:
<TextView
android: id = "@ + id / textView1"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: text = "Centré"
android: layout_centerVertical = "vrai"
android: layout_centerHorizontal = "vrai" />
<TextView
android: id = "@ + id / textView2"
-C28}
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Ci-dessous TextViewl" android: layout_below = "@ + id / textView1" android: layout_toLeftOf = "@ id / textView1" /> <TextView
android: id = "@ + id / textView3" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "En bas à droite" android: layout_alignParentBottom = "true" android: layout_alignParentEnd = "true" />
2. Exécutez le code ou affichez la disposition dans l'onglet Conception

Comment ça marche...
C'est un exercice très simple, mais il montre plusieurs des options de RelativeLayout: layout_centerVertical, layout_centerHorizontal, layout_below, layout_alignParentBottom, et ainsi de suite.
Les attributs de disposition RelativeLayout les plus couramment utilisés sont les suivants:
► layout_below: Cette vue doit être en dessous de la vue spécifiée
► layout_above: Cette vue doit être au-dessus de la vue spécifiée
► layout_alignParentTop: Aligner cette vue sur le bord supérieur du parent
► layout_alignParentBottom: Aligner cette vue sur le bord inférieur du parent
► layout_alignParentLeft: Aligne cette vue sur le bord gauche du parent
► layout_alignParentRight: Aligne cette vue sur le bord droit du parent
► layout_centerVertical: Centrer cette vue verticalement dans le parent
► layout_centerHorizontal: Centrer cette vue horizontalement dans le parent
► layout_center: Centre cette vue à la fois horizontalement et verticalement dans le parent
Pour la liste complète des paramètres RelativeLayout, visitez:
http://developer.android.com/reference/android/
widget / RelativeLayout.LayoutParams.html.
Il y a plus...
Contrairement à ce que nous avons vu précédemment, voici un exemple utilisant un LinearLayout juste pour centrer un TextView (créant le même effet que le paramètre layout_center de
Disposition relative):
<? xml version = "1.0" encoding = "utf-8"?>
http://schemas.android.com/apk/res/ android" "><LinearLayout xmlns: android = "http://schemas.android.com/apk/res/ android"
android: orientation = "horizontal"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: gravity = "centre">
<LinearLayout
android: layout_width = "0dp" android: layout_height = "wrap_content" android: layout_weight = "1" android: gravité = "centre">
<TextView
android: id = "@ + id / imageButton_speak" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Centré" />
</ LinearLayout>
</ LinearLayout>
Notez que cette disposition est d'un niveau plus profond que l'équivalent RelativeLayout (qui est un LinearLayout imbriqué dans LinearLayout parent.) Bien qu'un exemple simple, c'est une bonne idée d'éviter l'imbrication inutile car elle peut affecter la performance, surtout quand une mise en page est gonflée à plusieurs reprises (comme un ListItem).

Voir également
► La recette suivante, Utilisation de LinearLayout, qui vous donnera une disposition alternative
► Voir la section Optimisation des mises en page avec la visionneuse Hiérarchie pour plus d'informations sur la conception de la mise en page efficace.

Détails
Catégorie : Layouts
Affichages : 30

Lorsque vous utilisez l'assistant Android Studio pour créer un nouveau projet, il crée automatiquement le fichier res / layout / activity_main.xml (comme illustré dans la capture d'écran suivante). Il gonfle ensuite le fichier XML dans le rappel onCreate () avec setContentView (R.layout. Activity_main).
Pour cette recette, nous allons créer deux mises en page légèrement différentes et passer d'un bouton à l'autre.
Se préparer
Créez un nouveau projet dans Android Studio et appelez-le InflateLayout. Une fois le projet créé, développez le dossier res / layout pour pouvoir modifier le fichier activity_main.xml.
Comment faire...
1. Modifiez le fichier res / layout / activity_main.xml afin qu'il contienne un bouton
défini ici:
<Bouton
android: id = "@ + id / buttonLeft"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: text = "Bouton gauche"
android: layout_centerVertical = "vrai"
android: layout_alignParentLeft = "vrai"
android: onClick = "onClickLeft" />
2. Faites maintenant une copie de activity_main.xml et appelez-la activity_main2.xml.
Changez le bouton pour qu'il corresponde aux éléments suivants:
<Bouton
android: id = "@ + id / buttonRight"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: text = "Bouton droit"
android: layout_centerVertical = "vrai"
android: layout_alignParentRight = "vrai"
android: onClick = "onClickRight" />
3. Ouvrez MainActivity.java et ajoutez les deux méthodes suivantes pour gérer le
clics sur le bouton:
public void onClickLeft (Voir la vue) {
setContentView (R.layout.activity_main2);
}
public void onClickRight (Voir la vue) {
setContentView (R.layout.activity_main);
}
4. Exécutez cette application sur un périphérique ou un émulateur pour le voir en action.
Comment ça marche...
La clé ici est l'appel à setContentView (), que nous avons rencontré auparavant dans le code onCreate () autogénéré. Transmettez simplement un ID de mise en page à setContentView () et cela gonfle automatiquement la mise en page.
dzH
Ce code est destiné à rendre le concept facile à comprendre, mais serait excessif pour simplement changer la propriété d'un bouton (dans cet exemple, nous pourrions simplement changer l'alignement sur le bouton clic). L'initialisation de la mise en page est généralement nécessaire une seule fois, dans la méthode onCreate (), mais il arrive que vous souhaitiez gonfler manuellement une mise en page, comme nous l'avons fait ici. (Si vous manipulez manuellement les changements d'orientation, ce serait un bon exemple.)
Il y a plus...
En plus d'identifier une mise en page à l'aide d'un ID de ressource, comme nous l'avons fait ici, setContentView () peut également prendre une vue comme argument, par exemple:
findViewByld (R.id.myView)
setContentView (myView);
Voir également
► Comme mentionné précédemment, reportez-vous à la rubrique Fragment, au Chapitre 5, Exploration des fragments, AppWidgets et à l'interface utilisateur du système, pour la méthode alternative permettant de modifier la disposition de l'écran.