devstory

Le Tutoriel de Android TableLayout

  1. Android TableLayout
  2. TableLayout - android:stretchColumns
  3. TableLayout - android:shrinkColumns
  4. TableLayout - android:collapseColumns
  5. View - android:layout_column
  6. View - android:layout_span
  7. View - android:layout_gravity
  8. View - android:layout_weight
  9. Exemple de TableLayout

1. Android TableLayout

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:

2. TableLayout - android:stretchColumns

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>

3. TableLayout - android:shrinkColumns

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>

4. TableLayout - android:collapseColumns

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>

5. View - android:layout_column

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

6. View - android:layout_span

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.

7. View - android:layout_gravity

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.CLIP_HORIZONTAL
clip_horizontal
Gravity.FILL_HORIZONTAL
fill_horizontal
Gravity.TOP
top
Gravity.CENTER_VERTICAL
center_vertical
Gravity.BOTTOM
bottom
Gravity.CLIP_VERTICAL
clip_vertical
Gravity.FILL_VERTICAL
fill_vertical
Gravity.START
start
Gravity.END
end
Gravity.CENTER
center
Gravity.FILL
fill

8. View - android:layout_weight

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.

9. Exemple de TableLayout

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>

Tutoriels de programmation Android

Show More

Tutoriels de programmation Android

Show More

Articles les plus récents

Show More