Share
Les dispositions de tableau peuvent être utilisées pour afficher des données tabulaires ou pour aligner soigneusement le contenu de l'écran d'une manière similaire à un tableau HTML sur une page Web. Apprenez à les créer avec des fichiers XML de mise en page et via du code.
Comprendre les schémas est important pour bien concevoir une application Android. Dans ce tutoriel, vous apprendrez tout sur les dispositions de table, qui organisent les contrôles de l'interface utilisateur, ou widgets, à l'écran en lignes et en colonnes bien définies. Lorsqu'elles sont utilisées correctement, les présentations de table peuvent constituer le puissant paradigme de présentation sur lequel les applications Android peuvent concevoir leurs écrans ou afficher des données tabulaires..
Une structure de tableau correspond exactement à ce à quoi vous pouvez vous attendre: une grille composée de lignes et de colonnes, dans laquelle une cellule peut afficher un contrôle de vue. Du point de vue de la conception de l’interface utilisateur, un objet TableLayout est composé de contrôles TableRow, un pour chaque ligne de votre tableau. Le contenu d'un TableRow est simplement le contrôle de vue qui ira dans chaque? Cellule? de la grille de table.
L'apparence d'un TableLayout est régie par plusieurs règles supplémentaires. Tout d'abord, le nombre de colonnes de la table entière correspond au nombre de colonnes de la ligne contenant le plus de colonnes. Deuxièmement, la largeur de chaque colonne est définie comme la largeur du contenu le plus large de la colonne. Les attributs de lignes et de cellules layout_width de TableLayout sont toujours MATCH_PARENT - bien qu'ils puissent être placés dans un fichier XML, la valeur réelle ne peut pas être remplacée. Le layout_height d'une cellule de TableLayout peut être défini, mais un attribut TableRow pour layout_height est toujours WRAP_CONTENT. Les cellules peuvent s'étendre sur des colonnes, mais pas sur des lignes. Cela se fait via l'attribut layout_span de la vue enfant d'un TableRow. Une cellule est une vue enfant unique dans un TableRow. Si vous souhaitez une cellule plus complexe avec plusieurs vues, utilisez une vue de présentation pour encapsuler les autres vues..
Cela dit, certaines règles peuvent être modifiées. Les colonnes peuvent être marquées comme extensibles, ce qui signifie que la largeur peut être étendue à la taille du conteneur parent. Les colonnes peuvent également être marquées comme rétrécissables, ce qui signifie qu'elles peuvent être réduites en largeur afin que toute la ligne tienne dans l'espace fourni par le conteneur parent. Vous pouvez également réduire une colonne entière.
Pour obtenir une documentation complète sur les dispositions de table, consultez la documentation du SDK Android pour la classe TableLayout. Les attributs XML associés à utiliser dans les ressources XML sont également définis dans la documentation..
Les exemples sont mieux expliqués par l'exemple, et les tableaux ne sont pas différents. Supposons que nous voulions concevoir un écran montrant les prévisions météorologiques étendues. Une disposition de la table peut être un bon choix pour organiser ces informations:
Cette première figure montre un aperçu du tableau dans l'éditeur de présentation:
Le moyen le plus pratique et le plus facile à gérer de concevoir des interfaces utilisateur pour les applications consiste à créer des ressources de présentation XML. Cette méthode simplifie grandement le processus de conception de l'interface utilisateur, en transférant une grande partie de la création et de la présentation statiques des contrôles de l'interface utilisateur et de la définition des attributs de contrôle vers XML, au lieu de jalonner le code..
Les ressources de présentation XML doivent être stockées dans la hiérarchie des répertoires de projet / res / layout. Jetons un coup d'oeil à la disposition de la table introduite dans la section précédente. Ce fichier de ressources de présentation, nommé judicieusement /res/layout/table.xml, est défini dans XML comme suit:
Rappelez-vous que, dans l'activité, une seule ligne de code dans la méthode onCreate () est nécessaire pour charger et afficher une ressource de présentation à l'écran. Si la ressource de présentation était stockée dans le fichier /res/layout/table.xml, cette ligne de code serait:
setContentView (R.layout.table);
Toutes les colonnes de cette structure de tableau sont définies à la fois pour réduire et pour étirer en utilisant un "*" dans la valeur. Si seulement certaines colonnes devaient être réduites ou étirées, les valeurs seraient une liste séparée par des virgules (en utilisant des index basés sur 0 pour les colonnes).
Le tableau ressemble maintenant à ce qui suit pour les captures d'écran en mode portrait et paysage.
Vous pouvez également créer et configurer par programmation des dispositions de table en Java. Ceci est fait en utilisant les classes TableLayout et TableRow (android.widget.TableLayout et android.widget.TableRow). Vous trouverez les paramètres d'affichage uniques pour chaque contrôle dans les classes TableLayout.LayoutParams et TableRow.LayoutParams. En outre, les paramètres de présentation types (android.view.ViewGroup.LayoutParams), tels que layout_height et layout_width, ainsi que les paramètres de marge (ViewGroup.MarginLayoutParams) s'appliquent toujours aux objets TableLayout et TableRow, mais pas nécessairement aux cellules de table. Pour les cellules de tableau (toute vue à l'intérieur du tableau), la largeur est toujours MATCH_PARENT. La hauteur peut être définie, mais WRAP_CONTENT est définie par défaut et n'a pas besoin d'être spécifiée..
Au lieu de charger une ressource de présentation directement à l'aide de la méthode setContentView () comme indiqué précédemment, si vous créez une présentation par programme, vous devez créer le contenu de l'écran en Java, puis fournir un objet de présentation parent qui contient tout le contenu du contrôle à afficher. vues enfant à la méthode setContentView (). Dans ce cas, votre mise en page parent utilisée serait la mise en page de tableau créée..
Par exemple, le code suivant illustre comment faire en sorte qu'une activité instancie par un programme les paramètres de présentation TableLayout et reproduise l'exemple présenté précédemment en XML:
Accentsconagua
@Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); TableLayout table = new TableLayout (this); table.setStretchAllColumns (true); table.setShrinkAllColumns (true); TableRow rowTitle = new TableRow (this); rowTitle.setGravity (Gravity.CENTER_HORIZONTAL); TableRow rowDayLabels = new TableRow (this); TableRow rowHighs = new TableRow (this); TableRow rowLows = new TableRow (this); TableRow rowConditions = new TableRow (this); rowConditions.setGravity (Gravity.CENTER); TextView vide = new TextView (this); // titre colonne / ligne TextView title = new TextView (this); title.setText ("Table météo Java"); title.setTextSize (TypedValue.COMPLEX_UNIT_DIP, 18); title.setGravity (Gravity.CENTER); title.setTypeface (Typeface.SERIF, Typeface.BOLD); TableRow.LayoutParams params = new TableRow.LayoutParams (); params.span = 6; rowTitle.addView (title, params); // libellé colonne TextView highsLabel = new TextView (this); highsLabel.setText ("Jour au plus haut"); highsLabel.setTypeface (Typeface.DEFAULT_BOLD); TextView lowsLabel = new TextView (this); lowsLabel.setText ("Jour bas"); lowsLabel.setTypeface (Typeface.DEFAULT_BOLD); TextView conditionsLabel = new TextView (this); conditionsLabel.setText ("Conditions"); conditionsLabel.setTypeface (Typeface.DEFAULT_BOLD); rowDayLabels.addView (vide); rowHighs.addView (highsLabel); rowLows.addView (lowsLabel); rowConditions.addView (conditionsLabel); // jour 1 colonne TextView jour1Label = new TextView (this); day1Label.setText ("7 février"); day1Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day1High = new TextView (this); day1High.setText ("28шF"); day1High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day1Low = new TextView (this); day1Low.setText ("15шF"); day1Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day1Conditions = new ImageView (this); day1Conditions.setImageResource (R.drawable.hot); rowDayLabels.addView (day1Label); rowHighs.addView (day1High); rowLows.addView (day1Low); rowConditions.addView (day1Conditions); // jour2 colonne TextView jour2Label = new TextView (this); day2Label.setText ("8 février"); day2Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day2High = new TextView (this); day2High.setText ("26шF"); day2High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day2Low = new TextView (this); day2Low.setText ("14шF"); day2Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day2Conditions = new ImageView (this); day2Conditions.setImageResource (R.drawable.pt_cloud); rowDayLabels.addView (day2Label); rowHighs.addView (day2High); rowLows.addView (day2Low); rowConditions.addView (day2Conditions); // jour3 colonne TextView jour3Label = new TextView (this); day3Label.setText ("9 février"); day3Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day3High = new TextView (this); day3High.setText ("23шF"); day3High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day3Low = new TextView (this); day3Low.setText ("3шF"); day3Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day3Conditions = new ImageView (this); day3Conditions.setImageResource (R.drawable.snow); rowDayLabels.addView (day3Label); rowHighs.addView (day3High); rowLows.addView (day3Low); rowConditions.addView (day3Conditions); // jour4 colonne TextView jour4Label = new TextView (this); day4Label.setText ("10 février"); day4Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day4High = new TextView (this); day4High.setText ("17шF"); day4High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day4Low = new TextView (this); day4Low.setText ("5шF"); day4Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day4Conditions = new ImageView (this); day4Conditions.setImageResource (R.drawable.lt_snow); rowDayLabels.addView (day4Label); rowHighs.addView (day4High); rowLows.addView (day4Low); rowConditions.addView (day4Conditions); // jour5 colonne TextView jour5Label = new TextView (this); day5Label.setText ("11 février"); day5Label.setTypeface (Typeface.SERIF, Typeface.BOLD); TextView day5High = new TextView (this); day5High.setText ("19шF"); day5High.setGravity (Gravity.CENTER_HORIZONTAL); TextView day5Low = new TextView (this); day5Low.setText ("6шF"); day5Low.setGravity (Gravity.CENTER_HORIZONTAL); ImageView day5Conditions = new ImageView (this); day5Conditions.setImageResource (R.drawable.pt_sun); rowDayLabels.addView (day5Label); rowHighs.addView (day5High); rowLows.addView (day5Low); rowConditions.addView (day5Conditions); table.addView (rowTitle); table.addView (rowDayLabels); table.addView (rowHighs); table.addView (rowLows); table.addView (rowConditions); setContentView (table); Regardons de plus près la liste de code Java ci-dessus. Tout d'abord, nous créons le contrôle TableLayout et définissons les attributs shrinkable et stretchable sur true pour toutes les colonnes à l'aide des méthodes setStretchAllColumns () et setShrinkAllColumns (). Ensuite, nous créons systématiquement cinq TableRow. Chaque TableRow contiendra des contrôles d'affichage (contrôles TextView pour le titre, les dates, les valeurs maximales et minimales, ainsi que des contrôles ImageView pour les graphiques de conditions météorologiques). Vous verrez comment la plage de colonnes est gérée avec le premier TableRow. Des colonnes spécifiques de vues sont créées, stylisées et ajoutées, dans l'ordre, au tableau approprié à l'aide de la méthode addView (). Chaque table est ajoutée au contrôle TableLayout, dans l'ordre, à l'aide de la méthode addView () de TableLayout. Enfin, nous chargeons le TableLayout et l’afficheons à l’écran à l’aide de la méthode setContentView ().
Comme vous pouvez le constater, la taille du code peut augmenter rapidement au fur et à mesure que de nouveaux contrôles sont ajoutés à l'écran. Pour l'organisation et la facilité de maintenance, il est préférable de définir et d'utiliser des mises en page par programmation plutôt que dans le cas contraire. De plus, dans un cas comme celui-ci, les données proviennent généralement d'une autre source que les chaînes que nous saisissons, une boucle peut donc être plus appropriée pour de nombreuses applications..
Les résultats sont présentés dans la figure suivante. Comme vous pouvez le constater, ils sont identiques aux résultats précédents - comme prévu.
Bien que les dispositions de tableau puissent être utilisées pour concevoir des interfaces utilisateur complètes, elles ne sont généralement pas le meilleur outil pour le faire, car elles sont dérivées de LinearLayout et ne constituent pas le contrôle le plus efficace en termes de présentation. Si vous y réfléchissez, un TableLayout n'est guère plus qu'un ensemble organisé de LinearLayouts imbriqués, et les dispositions d'imbrication trop profondes sont généralement découragées pour des raisons de performances. Cependant, pour les données qui sont déjà dans un format approprié pour un tableau, tel que les données de tableur, la disposition du tableau peut constituer un choix raisonnable.
De plus, les données de disposition des tableaux peuvent varier en fonction de la taille et de la résolution de l'écran. En règle générale, il est recommandé d’activer le défilement lorsque vous affichez de grandes quantités de données. Par exemple, si l'exemple météorologique utilisé précédemment incluait également une? Rédaction? des conditions, ce texte pourrait être une phrase ou vingt phrases, permettant ainsi le défilement vertical et / ou horizontal serait prudent.
Les interfaces utilisateur des applications Android sont définies à l'aide de dispositions, et les dispositions de table sont extrêmement pratiques pour afficher des données d'affichage ou des contrôles en lignes et en colonnes. L'utilisation de dispositions de table appropriées permet de simplifier et d'accélérer de nombreuses conceptions d'écran. Cependant, gardez à l'esprit que TableLayout est dérivé de LinearLayout et présente les mêmes limitations de performances..
Les développeurs mobiles Lauren Darcey et Shane Conder ont co-écrit plusieurs livres sur le développement Android: un livre de programmation en profondeur intitulé Développement d'applications sans fil Android et Sams TeachYourself Développement d'applications Android en 24 heures. Lorsqu'ils n'écrivent pas, ils passent leur temps à développer des logiciels mobiles dans leur entreprise et à fournir des services de conseil. Vous pouvez les contacter par courrier électronique à l'adresse [email protected], via leur blog à l'adresse androidbook.blogspot.com et sur Twitter @androidwireless..
я я
