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 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.