Lorsque vous devez créer une table dans votre interface utilisateur, Android propose deux options de mise en page pratiques: TableLayout (avec TableRow) et GridLayout (ajoutées dans l'API 14). Les deux options de disposition peuvent créer des tableaux similaires, mais chacun utilisant une approche différente. Avec TableLayout, les lignes et les colonnes sont ajoutées dynamiquement lorsque vous générez la table. Avec GridLayout, les tailles de ligne et de colonne sont définies dans la définition de la mise en page.
Aucune mise en page n'est meilleure, c'est juste une question d'utilisation de la meilleure mise en page pour vos besoins. Nous allons créer une grille 3 x 3 en utilisant chaque mise en page pour donner une comparaison, car vous pourriez facilement vous retrouver en utilisant les deux mises en page, même au sein de la même application.
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B3" android: id = "@ + id / textView8" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C3" android: id = "@ + id / textView9" />
</ TableRow>
</ TableLayout>
3. Maintenant, ouvrez le projet GridLayout pour modifier activity_main.xml. Changez la disposition racine à GridLayout. Ajoutez les attributs columnCount = 3 et rowCount = 3 au
GridLayout élément.
4. Maintenant, ajoutez neuf TextViews à GridLayout. Nous utiliserons le même texte que le précédent TableLayout pour une comparaison cohérente. Étant donné que GridView n'utilise pas TableRows, les trois premiers TextView sont dans la ligne 1, les trois suivants sont dans la ligne 2 et ainsi de suite. Le résultat final ressemblera à ceci:
<GridLayout
http://schemas.android.com/apk/res/android" ">xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: columnCount = "3"
android: rowCount = "3">
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "A1" android: id = "@ + id / textView1" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B1" android: id = "@ + id / textView2" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C1" android: id = "@ + id / textView3" />
<TextView
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
{3T | -
android: text = "A2" android: id = "@ + id / textView4" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B2" android: id = "@ + id / textView5" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C2" android: id = "@ + id / textView6" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "A3" android: id = "@ + id / textView7" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B3" android: id = "@ + id / textView8" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C3" android: id = "@ + id / textView9" />
</ GridLayout>
5. Vous pouvez exécuter l'application ou utiliser l'onglet Conception pour voir les résultats.
Comment ça marche...
Comme vous pouvez le voir lors de la visualisation des tableaux créés, les tableaux se ressemblent à l'écran. La principale différence est le code pour les créer.
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B3" android: id = "@ + id / textView8" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C3" android: id = "@ + id / textView9" />
</ TableRow>
</ TableLayout>
3. Maintenant, ouvrez le projet GridLayout pour modifier activity_main.xml. Changez la disposition racine à GridLayout. Ajoutez les attributs columnCount = 3 et rowCount = 3 au
GridLayout élément.
4. Maintenant, ajoutez neuf TextViews à GridLayout. Nous utiliserons le même texte que le précédent TableLayout pour une comparaison cohérente. Étant donné que GridView n'utilise pas TableRows, les trois premiers TextView sont dans la ligne 1, les trois suivants sont dans la ligne 2 et ainsi de suite. Le résultat final ressemblera à ceci:
<GridLayout
http://schemas.android.com/apk/res/android" ">xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: columnCount = "3"
android: rowCount = "3">
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "A1" android: id = "@ + id / textView1" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B1" android: id = "@ + id / textView2" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C1" android: id = "@ + id / textView3" />
<TextView
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
{3T | -
android: text = "A2" android: id = "@ + id / textView4" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B2" android: id = "@ + id / textView5" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C2" android: id = "@ + id / textView6" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "A3" android: id = "@ + id / textView7" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "B3" android: id = "@ + id / textView8" />
<TextView
android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: texte = "C3" android: id = "@ + id / textView9" />
</ GridLayout>
5. Vous pouvez exécuter l'application ou utiliser l'onglet Conception pour voir les résultats.
Comment ça marche...
Comme vous pouvez le voir lors de la visualisation des tableaux créés, les tableaux se ressemblent à l'écran. La principale différence est le code pour les créer.
Dans le XML TableLayout, chaque ligne est ajoutée à la table en utilisant un TableRow. Chaque vue devient une colonne. Ce n'est pas une exigence car les cellules peuvent être ignorées ou laissées vides.
(Voir comment spécifier l'emplacement de la cellule dans un TableRow dans la section suivante.)
Le GridLayout utilise l'approche inverse. Le nombre de lignes et de colonnes est spécifié lors de la création de la table. Nous n'avons pas besoin de spécifier les informations de ligne ou de colonne (bien que nous puissions, discuté comme suit). Android ajoutera automatiquement chaque vue aux cellules dans l'ordre.
Il y a plus...
Tout d'abord, voyons plus de similitudes entre les mises en page. Les deux dispositions ont la capacité d'étirer les colonnes pour utiliser l'espace d'écran restant. Pour TableLayout, ajoutez l'attribut suivant à la déclaration xml:
android: stretchColumns = "1"
stretchColumns spécifie l'index (basé sur zéro) des colonnes à étirer. (android: shrinkColumns est un index basé sur zéro des colonnes qui peuvent rétrécir, ainsi la table peut s'adapter à l'écran.)
Pour obtenir le même effet avec GridLayout, ajoutez l'attribut suivant à toutes les vues de la colonne B (textView2, textView5 et textView8):
android: layout_columnWeight = "1"
Toutes les cellules d'une colonne donnée doivent définir le poids ou ne pas s'étirer.
Maintenant, regardons quelques-unes des différences, car c'est vraiment la clé pour déterminer quelle mise en page utiliser pour une tâche donnée. La première chose à noter est de savoir comment les colonnes et les lignes sont réellement définies.
Dans le TableLayout, les lignes sont spécifiquement définies, en utilisant un TableRow. (Android déterminera le nombre de colonnes dans la table en fonction de la ligne contenant le plus de cellules.) Utilisez l'attribut android: layoutColumn lors de la définition de la vue pour spécifier la colonne.
En revanche, avec GridLayout, les nombres de lignes et de colonnes sont spécifiés lors de la définition de la table (en utilisant columnCount et rowCount comme indiqué précédemment).
Dans l'exemple précédent, nous avons simplement ajouté TextViews à GridLayout et laissé le système les positionner automatiquement. Nous pouvons modifier ce comportement en spécifiant la position de ligne et de colonne lors de la définition de la vue, par exemple:
android: layout_row = "2"
android: layout_column = "2"
Android incrémente automatiquement le compteur de cellules après l'ajout de chaque vue, de sorte que la vue suivante doit également spécifier la ligne et la colonne, sinon vous risquez de ne pas obtenir le résultat souhaité.
Comme le LinearLayout montré dans la recette LinearLayout, le GridLayout offre également l'attribut d'orientation de soutenir horizontal (le défaut) et vertical. L'orientation détermine comment les cellules sont placées. (L'horizontale remplit d'abord les colonnes, puis descend à la ligne suivante, tandis que la verticale remplit la première colonne de chaque rangée, puis la colonne suivante.)
{Hh
(Voir comment spécifier l'emplacement de la cellule dans un TableRow dans la section suivante.)
Le GridLayout utilise l'approche inverse. Le nombre de lignes et de colonnes est spécifié lors de la création de la table. Nous n'avons pas besoin de spécifier les informations de ligne ou de colonne (bien que nous puissions, discuté comme suit). Android ajoutera automatiquement chaque vue aux cellules dans l'ordre.
Il y a plus...
Tout d'abord, voyons plus de similitudes entre les mises en page. Les deux dispositions ont la capacité d'étirer les colonnes pour utiliser l'espace d'écran restant. Pour TableLayout, ajoutez l'attribut suivant à la déclaration xml:
android: stretchColumns = "1"
stretchColumns spécifie l'index (basé sur zéro) des colonnes à étirer. (android: shrinkColumns est un index basé sur zéro des colonnes qui peuvent rétrécir, ainsi la table peut s'adapter à l'écran.)
Pour obtenir le même effet avec GridLayout, ajoutez l'attribut suivant à toutes les vues de la colonne B (textView2, textView5 et textView8):
android: layout_columnWeight = "1"
Toutes les cellules d'une colonne donnée doivent définir le poids ou ne pas s'étirer.
Maintenant, regardons quelques-unes des différences, car c'est vraiment la clé pour déterminer quelle mise en page utiliser pour une tâche donnée. La première chose à noter est de savoir comment les colonnes et les lignes sont réellement définies.
Dans le TableLayout, les lignes sont spécifiquement définies, en utilisant un TableRow. (Android déterminera le nombre de colonnes dans la table en fonction de la ligne contenant le plus de cellules.) Utilisez l'attribut android: layoutColumn lors de la définition de la vue pour spécifier la colonne.
En revanche, avec GridLayout, les nombres de lignes et de colonnes sont spécifiés lors de la définition de la table (en utilisant columnCount et rowCount comme indiqué précédemment).
Dans l'exemple précédent, nous avons simplement ajouté TextViews à GridLayout et laissé le système les positionner automatiquement. Nous pouvons modifier ce comportement en spécifiant la position de ligne et de colonne lors de la définition de la vue, par exemple:
android: layout_row = "2"
android: layout_column = "2"
Android incrémente automatiquement le compteur de cellules après l'ajout de chaque vue, de sorte que la vue suivante doit également spécifier la ligne et la colonne, sinon vous risquez de ne pas obtenir le résultat souhaité.
Comme le LinearLayout montré dans la recette LinearLayout, le GridLayout offre également l'attribut d'orientation de soutenir horizontal (le défaut) et vertical. L'orientation détermine comment les cellules sont placées. (L'horizontale remplit d'abord les colonnes, puis descend à la ligne suivante, tandis que la verticale remplit la première colonne de chaque rangée, puis la colonne suivante.)
{Hh
