Le Tutoriel de Android TableLayout
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
TableLayout organise les View qu'il contient sous forme de tables. Plus précisément, TableLayout est un ViewGroup contenant un ou plusieurs TableRow, chaque TableRow est une ligne (row) dans le tableau, contenant des cellules (cell). Les View enfant peuvent être placées dans une cellule ou dans une cellule fusionnée à partir de cellules consécutives d'une ligne. Contrairement aux tableaux en HTML, vous ne pouvez pas fusionner des cellules consécutives sur la même colonne.
TableLayout est comme une View normale, vous pouvez la glisser-déposer dans une interface disponible:
Ou utilisez-le comme la Layout originale de l'interface:
Ajoutez des TableRow et des View dans TableLayout:
Dans TableLayout, les colonnes sont indexées 0, 1, 2 ... propriété android:stretchColumns vous permet de spécifier quelles colonnes seront étirées (stretched) pour remplir l'espace horizontal libre de TableLayout.
<!-- The columns with indexes 0 and 2 will be stretched. -->
<TableLayout
...
android:stretchColumns="0, 2">
...
</TableLayout>
<!-- All columns will be stretched. -->
<TableLayout
...
android:stretchColumns="*">
...
</TableLayout>
Contrairement à android:stretchColumns, l'attribut android:shrinkColumns spécifie les colonnes qui seront réduites(shrinked) pour empêcher les View enfant de déborder de TableLayout.
<!-- The columns with indexes 0 and 2 will be shrinked. -->
<TableLayout
...
android:shrinkColumns="0, 2">
...
</TableLayout>
<!-- All columns will be shrinked. -->
<TableLayout
...
android:shrinkColumns="*">
...
</TableLayout>
L'attribut android:collapseColumns spécifie que les colonnes vont se réduire (collapsed), ce qui signifie que la largeur de la colonne sera 0, la colonne sera masquée.
<!-- The columns with indexes 0 and 2 will be collapsed-->
<TableLayout
...
android:collapseColumns="0, 2">
...
</TableLayout>
<!-- All columns will be collapsed---->
<TableLayout
...
android:collapseColumns="*">
...
</TableLayout>
L'attribut android:layout_column est appliqué à une View enfant dans un TableRow pour spécifier son index de colonne. Les valeurs possibles sont 0, 1, 2, ...
L'attribut android:layout_span s'applique à la View enfant pour spécifier le nombre de cellules consécutives dans un TableRow qui seront fusionnées ensemble.
L'attribut android:layout_gravity est appliqué aux View enfants (de TableRow) pour spécifier sa position relative par rapport à la cellule qui le contient. Cet attribut affecte le comportement de la propriété android:layout_width.
Cas 1: Si la propriété android:layout_gravity n'est pas définie pour la View enfant ( de TableRow), la View enfant aura toujours une largeur remplie avec la cellule qui la contient, ce qui signifie que la propriété android:layout_width obtiendra toujours la valeur MATCH_PARENT.
Cas 2: si la propriété android:layout_gravity est définie sur la View enfant (de TableRow), View enfant aura toujours la largeur par défaut, ce qui signifie que la propriété android:layout_width recevra toujours la valeur WRAP_CONTENT.
L'attribut android:layout_gravity est utilisé pour spécifier l'emplacement de View dans la cellule qui la contient.
| Constant in Java | Value | Description |
| Gravity.LEFT | left | |
| Gravity.CENTER_HORIZONTAL | center_horizontal | |
| Gravity.RIGHT | right | |
| Gravity.TOP | top | |
| Gravity.CENTER_VERTICAL | center_vertical | |
| Gravity.BOTTOM | bottom | |
| Gravity.START | start | |
| Gravity.END | end | |
| Gravity.CENTER | center | |
L'attribut android:layout_weight est utilisé pour les View enfant (de TableRow), il spécifie combien d'espace cette View enfant occupera horizontalement dans View parent (TableRow). Une valeur layout_weight supérieure à zéro permet à View enfant de se développer pour remplir tout espace restant dans View parent. Les View enfant peuvent spécifier une valeur layout_weight, puis tout espace restant dans View parent sera affecté aux View enfant en fonction de leur ratio layout_weight.
Lorsque toutes les View enfants (de TableRow) ont android:layout_weight = 0, vous verrez un espace vide dans View parent (TableRow):
View enfant a android:layout_weight> 0 occupera l'espace libre de View parent (TableRow):
L'espace libre de View parent (TableRow) sera alloué a View enfant en fonction de leur ratio layout_weight.
Voici une fenêtre de connexion, pensez-vous que vous pouvez utiliser TableLayout pour concevoir l'interface pour cela?
La réponse est "Absolument possible", et voici l'esquisse de l'idée de design:
Ensuite, il faut suivre l'idée:
Étape 1: Ajoutez 5 TableRow à TableLayout:
Étape 2: Ajoutez 4 Button au premier TableRow, nous aurons un TableLayout avec 4 colonnes, cela facilitera le processus de conception. Le premier TableRow sera supprimé de l'interface une fois le processus de conception terminé.
Étape 3: Ajoutez une autre View enfant à l'interface:
Étape 4: définir l'attribut android:layout_span pour quelques View enfants
Étape 5: Définissez android:layout_column pour le bouton "Login":
Étape 6: étirez (stretch) les colonnes avec l'index 1, 3:
- (TableLayout) android:stretchColumns = "1, 3"
Étape 7: définissez les attributs android:layout_gravity pour les boutons "Login" et "Forget Password":
Étape 8: Définissez le text, textSize, padding, gravity pour View enfant sur l'interface:
Étape 9: supprimez d'abord TableRow et la conception de l'interface est terminée.
layout_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:stretchColumns="1, 3"
tools:context=".MainActivity">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:gravity="center"
android:text="Login"
android:textSize="22sp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="User name" />
<EditText
android:id="@+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPersonName" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="Password" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:ems="10"
android:inputType="textPassword" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="right"
android:text="Login" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Forget Password?" />
</TableRow>
</TableLayout>
