Layouts

Bonjour à tous.

Maintenant que nous savons comment installer Android sur votre machine, et comment créer une application simple, nous allons apprendre à créer layouts en Android. Dans Android, layouts sont créés à l'aide de fichiers XML, avec une structure de langue très rigide et standardisée, mais aussi très simple et didactique, grâce à l'excellente structure créée par Google.

Il existe plusieurs types de layout dans Android: FrameLayout, LinearLayout, TableLayout, entre autres. Dans cette sujet, nous allons aborder principalement les 3 dispositions citées dans ce paragraphe.

FrameLayout

Le FrameLayout est le layout la plus fondamentale qui existe dans Android. Dans cette layout, nous avons seulement une structure de layout stockée. Toutefois, cette structure peut être une autre layout. Cette layout est souvent utilisée dans les layouts génériques, comme des Tabs et des écrans dont le layout change tout au long de son exécution. Nous allons utiliser cette layout comme une base pour enseigner plusieurs concepts de base de layout dans Android.

Par exemple, dans Android, il existe différents types de composants graphiques:

• TextView → Affiche un texte sur l'écran. Il est certainement le graphique composant plus utilisé dans Android.
• ImageView →  Affiche une image ou simplement une fenêtre sur l'écran. Chaque fois que vous présentez une image ou montrer à l'utilisateur une fenêtre de couleur, par exemple, ce composant est utilisé.
• EditText →  Les composants ci-dessus fournissent des informations sur l'écran. Mais le EditText obtient un texte tapé par l'utilisateur, qui peut être utilisé pour interagir avec l'application Android.
• Button →  Cette composante est la plus commune dans toutes les système du layout. Dans cette composante, une action est effectuée après l'utilisateur clique.
• CheckBox → Un composant qui a essentiellement deux valeurs: vrai ou faux. Très utilisé pour représenter les paramètres du système.
• RadioGroup → Élément très utile de montrer les différentes options figurant sur l'écran, où seule l'une des options doit être cliqué. Largement utilisé dans les questions à choix multiples.

E existem diversos parâmetros para cada componente gráfico em um layout em Android. Para entender bem como são esses parâmetros, é demonstrado abaixo o uso de alguns desses componentes em um FrameLayout. Abaixo é mostrado o código-fonte do XML que cria o layout.

Et il y a plusieurs paramètres pour chaque composant graphique dans une layout dans Android. Pour bien comprendre comment ces paramètres sont indiquées, au-dessous est représentée l'utilisation de certains de ces composants dans un FrameLayout. Nous avons suivante, le source code du XML que crée le layout.

Et le layout genéré.

Dans le source ci-dessus, nous avons quelques paramètres, qui sont expliquées ci-dessous:

• android:layout_width="match_parent" → Dans la création de layouts dans Android, Il faut toujours appeler un paramètre en utilisant le préfixe "android:". Dans ce cas, le suffixe du paramètre est "layout_width". Ce paramètre définit la taille de la largeur de l'écran que nous créons. Cette taille peut être une taille fixe (en pixels, density pixels, ou d'autres unités de mise en forme) ou tailles extensibles. Dans ce cas, il est d'une taille extensible. Il y a 3 tailles extensible dans Android:
• fill_parent → Avec cette option, la taille du paramètre est au maximum (c'est à dire la taille de l'écran en cours). Par exemple, si l'écran est de 800 x 600 pixels et si le FrameLayout a le paramètre android:layout_width="fill_parent", la largeur dy layout de l'écran sera 600 pixels. Dans le API 8 (Froyo, Android 2.2), cette option a été abandonee, et remplacé par l'option "match_parent".
• wrap_content → Avec cette option, la taille du paramètre sera minimale, basée sur les composants-enfant de la configuration actuelle. Par exemple, si nous définissons la largeur du layout actuelle, avec le paramètre layout_width comme suit: android:layout_width="wrap_content", la largeur de l'écran sera le taille du composant-enfant de ce layout. Dans le cas de XML que nous analysons, votre composant enfant est un TextView. Si, par exemple, ce TextView a une taille de 20 x 20 (largeur x hauteur) pixels, donc la taille du layout sera le même. C'est ce que wrap_content fait. Si nous avions fill_parent  en la place, la taille du layout ne serait pas 20 x 20 pixels, mais les 800 x 600 pixels, équivalente à la taille de l'écran mobile.
• match_parent → Maintient la taille hérité par le composant-parent. S'il n'y a pas de composant parent, la taille sera maximale (c'est à dire, la taille de l'écran). Dans ce XML, nous avons une TextView et son composant-parent, qui est un FrameLayout. Si nous mettons dans le TextView le paramètre android:layout_width="match_parent", la largeur de l'écran en cours sera la même largeur du FrameLayout.
• android:layout_height="match_parent" → Ce paramètre définit la hauteur de l'écran que nous créons.
• android:gravity="center_horizontal" → Ce paramètre définit l'alignement des composants de cette layout a. Dans ce cas, l'alignement  sera au le centre et aussi horizontal.
• android:text="Exemplo" → Ce paramètre définit le texte du composante de courant.

De nombreux concepts ont été expliqué ci-dessus. Pour mieux les comprendre, nous allons modifier et tester les options une par une. Par exemple, ci-dessous, nous avons le même XML précédent, mais cette fois avec le paramètre android:gravity du composant TextView, changé de "center_horizontal" à "center_vertical".

  

Et ci-dessous, nous avons le même XML comme ci-dessus, mais cette fois avec le paramètre android:gravity du composant TextView changé de "center_horizontal" à "center".

Nous allons continuer à modifier les paramètres des composants, afin de mieux comprendre le fonctionnement de chacun. Ci-dessous le layout résultante quand on modifier les paramètres android: layout_width et android: layout_height à "match_parent" à "wrap_content".

Ainsi, la taille du FrameLayout devient la même taille du TextView. Difficile à comprendre? Donc, nous allons colorer le TextView:

Le résultat est le suivant:

Maintenant, il est facile de comprendre que la taille de FrameLayout est devenu la même taille de la TextView. Si nous changeons le paramètres android:layout_width et android:layout_height de FrameLayout du "wrap_content" au "match_parent" (quelle est la valeur d'origine, exposée dans la premiere image de ce sujet), nous avons le résultat suivant.

Autrement dit, dans l'exemple précédent, la taille de FrameLayout devient la même taille que la TextView par l'utilisation de "wrap_content". Maintenant, le taille du FrameLayout est devenu le taille de l'écran mobile, à l'aide de "match_parent". La compréhension de ces concepts du taille extensible de l'écran est TRÈS IMPORTANT dans le développement de tous layout de Android. Il est très important de maîtriser ces concepts, sinon la création de layout dans Android va devenir beaucoup plus compliqué.

Après l'explication du FrameLayout, est représenté ci-dessous le XML précédent avec quelques plus d'options, afin de laisser un plus élégant texte affiché.

Le résultat de cette nouvelle XML est:

Dans ce nouveau XML, nous changeons la couleur du FrameLayout, du noir (couleur par défaut) au bleu, à travers le paramètre android:background avec la valeur "#2244AA", qui est un bleu doux. Mais pourquoi la majorité de l'écran est de couleur blanche? Parce que c'est la couleur de la TextView (via l'option android:background="#FFFFFF"). Comme les paramètres de taille de l’écran du FrameLayout et TextView sont "match_parent", le taille de l'écran est le taille du TextView. Cependant, nous avons un nouveau paramètre dans le FrameLayout: android:padding="5dp". Quel est ce paramètre? Avec ce paramètre, est créé une frontière intérieure entre le FrameLayout et TextView, avec 5 dp du taille. Le concept de “dp” peut être vu ici.

Ainsi, comme la couleur de la FrameLayout est bleu, et le TextView est blanc, nous avons un contraste à l'écran, donnant l'impression que une frontière a été créé. Poursuivant l'explication, nous avons des options android:textSize (la taille du texte), android:textStyle (de style de texte, qui dans ce cas est en gras), et android:textColor (couleur du texte, qui dans ce cas est rouge).

Maintenant, nous allons parler d'autres types du layout.

LinearLayout

En FrameLayout nous avons une unique composante de l'enfant. Mais dans LinearLayout, nous avons plusieurs. Cette layout convient pour différents cas comme structures sur l'écran dans un mode linéaire. Dans cette layout, nous avons un paramètre qui n'existait pas dans FrameLayout, le android:orientation. Il a les possibilités “vertical” et “horizontal”. Pour démontrer le fonctionnement de ce paramètre, nous allons utiliser un autre XML.

Maintenant, nous avons plus d'un composant à l'écran. Le résultat de XML est:

C'est à dire, nous avons 2 TextViews, une sous l'autre, en position verticale. Comment le TextViews ont des paramètres android:layout_width="match_parent" et android:layout_height="wrap_content", nous avons la largeur à la taille maximale, et de la hauteur avec une taille minimum (la taille du TextView). Ci-dessous, nous avons une inversion de ces valeurs lorsque l'orientation du LinearLayout est horizontal.

Voici le résultat:

Comme les TextViews sont proches, nous prenons un espacement entre eux. Ceci est illustré dans le code XML suivant:

Voici le résultat:

Ce qui a été ajouté est le paramètre android:layout_margin="5dp". Il a créé une frontière extérieure (à ne pas confondre avec padding, qui est une marge interne) entre le 2 TextViews. Pourtant, les textes sont " collé" dans TextView. Ensuite, nous utilisons le padding pour donner un espacement interne dans les textes.

Voici le résultat: 

Pour conclure cette explication du LinearLayout, nous parler de paramètre layout_weight. Voici un nouvelle XML.

Dans ce XML, nous incluons un nouveau TextView, et modifier l'orientation du LinearLayout de l'horizontale à la verticale. Cependant, nous incluons le paramètre android:layout_weight="1". Ce paramètre donne la priorité à la taille de TextView dans lequel il est fixé (dans ce cas, le premier TextView). En d'autres termes, il améliore le taille de la largeur/hauteur de cette composante, remplace l'efficacité (rendant utile l'opération) du paramètres android:layout_width et android:layout_height. Ainsi, il "s'étend" la taille de ce TextView. Le résultat est:

Et maintenant, le résultat lorsque nous avons créé android:layout_weight="1" aussi dans le deuxième TextView.

Toujours sur le troisième.

Le paramètre layout_weight donne le “poids” de chaque composant. Comme dans l'image précédente tous ont le même poids, ils occupent la même place sur l'écran. Cependant, ce paramètre remplace les paramètres android:layout_width et android:layout_height. Pour finaliser l'explication de layout_weight, ce qui arrive quand nous avons placé toute les TextView comme android:layout_weight="1", mais le première TextView comme android:layout_weight="2"?

C'est à dire, il a équilibré le poids des composants en fonction de la valeur des paramètres android:layout_weight dans chaque TextView.

Maintenant, nous allons en apprendre un peu sur le TableLayout.

TableLayout

Cette layout est couramment utilisé lorsque nous avons besoin de lister plusieurs composants en une ligne, le long d'un même écra. Par exemple, pour créer une layoutavec 18 TextView de 3 par 3, divisé le long des 6 lignes.

Pour créer un layout comme celle-ci, nous pourraient utiliser 6 LinearLayouts. Cependant, nous aurions un très grand source en XML, plus beaucoup de mémoire sur Android. La solution dans ce cas serait d'utiliser un TableLayout.

Pour signaler que certains composants de TableLayout être utilisés dans la même ligne, est utilisée le composant TableRow. Voici un exemple de son utilisation:

Et le résultat:

Pour l'exemple ci-dessus, on peut déduire l'effet d'une TableLayout. Si nous n'utilisons pas le composant TableRow, le TableLayout deviendrait un LinearLayout.

Pour mieux comprendre le fonctionnement de TableLayout, nous allons faire un exercice. Nous allons créer un layout avec 6 lignes, chacune contenant 3 TextView de taille égale. Le résultat sera le layout ci-dessous. 

Vous pouvez déjà voir que le code source XML généré sera énorme (plus de 250 lignes pour les deux cas), parce que nous devons reproduire beaucoup de code pour créer ces 18 TextViews. Une astuce pour éviter ce travail retaper est de créer un style pour notre TextView. Pour créer un style, nous devons créer un fichier XML dans le dossier res/values, appelé styles.xml.

Dans ce fichier, nous allons créer la forme générique de notre TextViews. Ci-dessous est montré comment serait la syntaxe de ce fichier.

Maintenant, nous devons mettre ce nouveau style dans notre XML. Alors, se traduirait par un fichier XML avec seulement 110 lignes, plus de la moitié de la taille de lignes de XML sans l'aide de styles.

-----

Avec ces trois types du layout, nous pouvons créer une immense quantité de layouts dans Android. Il existe d'autres types du layout (et d'autres éléments visuels), qu'avec le temps, nous allons voir ici sur le blog.

Si quelqu'un a une question, suggestion ou critique, sentir à l'aise.