‫Content de te revoir.
‫Maintenant, il est enfin temps d'utiliser la grille et vous avez vu comment utiliser le panneau technique avant et le panneau de
‫rack et ceux d'aujourd'hui bien empilés et enveloppent les choses.
‫Et maintenant, nous allons vérifier Grid, qui nous permet de positionner les choses dans une grille, et nous allons
‫commencer en utilisant simplement une grille à deux temps.
‫Et tout d'abord, ce dont nous avons besoin pour cela, c'est d'une colonne et d'une définition de rouleau afin que nous puissions aller de l'avant et dans
‫notre grille.
‫Allez donc dans votre fichier Zemel puis dans la grille, créez une définition de colonne de points de grille et ici vous pouvez définir
‫vos différentes colonnes.
‫Donc, tout d'abord, vous avez besoin des définitions de colonnes, au pluriel, puis vous pouvez continuer et
‫créer vos définitions de colonnes individuelles.
‫Par exemple, vous pouvez aller de l'avant et en créer un ici.
‫Je vais rester simple en une seule ligne comme ça.
‫Et ce que je veux définir ici, c'est simplement la largeur et la largeur que je pourrais, disons, la mettre
‫à 100 et maintenant créons une autre colonne, qui sera également de 100 de large.
‫Maintenant, cela ne suffit pas.
‫Nous devons également avoir des rangées, sauf que nous ne voulons avoir qu'une seule pièce.
‫Commençons donc par une seule ligne.
‫Et je vais d'abord créer un bouton.
‫Et ce bouton va dire quelque chose comme, bonjour, et il devrait être dans la grille,
‫cette colonne zéro.
‫Maintenant, je crée un deuxième bouton, qui devrait être la grille, celui de la colonne.
‫Maintenant, si nous regardons notre conception maintenant, nous pouvons voir que nous avons nos deux boutons.
‫Salut.
‫Exécutons notre code juste pour voir à quoi cela ressemble.
‫Soit dit en passant, il n'y a que 100 pixels de large, comme vous pouvez le voir ici.
‫La largeur est donc limitée à 100 pixels.
‫Donc, si vous ajoutez une valeur totale ici, cela l'utilisera simplement comme pixels dans la largeur.
‫Comme vous pouvez le voir ici, c'est la largeur d'une colonne.
‫Et bien sûr, nous pourrions dire que nous pouvons facilement ajouter quelques colonnes ici.
‫Eh bien, nous pouvons le faire et nous le ferons plus tard.
‫Mais avant cela, je voudrais vous montrer quelque chose de très important.
‫Donc, si je fais glisser mon Zemel ici maintenant, c'est en fait utile car nous verrons directement la différence dans notre interface
‫utilisateur.
‫Et je veux changer la largeur de 100 à auto.
‫Et comme vous pouvez voir ce que fait auto, il ne prend automatiquement que la largeur requise pour tenir dans
‫tout le contenu qu'il y a à l'intérieur de l'élément.
‫Donc, dans notre cas, le bouton a un texte appelé Hi there, et c'est l'espace dont il a besoin ou dont il
‫a besoin.
‫Et c'est aussi la largeur de notre bouton.
‫Et comme vous pouvez le voir pour la définition de la première colonne, donc
‫la définition de la première colonne où se trouve notre bouton avec celui-ci, c'est ainsi que le ou c'est le bouton qui est modifié.
‫Comme vous pouvez le voir maintenant, il est passé à cinquante-neuf virgule cinq pixels.
‫Si j'ajoute un peu plus de texte, un peu plus de texte, vous pouvez voir qu'il s'élargit à cent cinquante-trois virgule
‫cinq pixels.
‫Vous pouvez donc facilement utiliser auto si vous voulez que tout s'intègre correctement en fonction de l'espace dont il a
‫réellement besoin.
‫Mais que se passe-t-il si je veux que les colonnes aient exactement la même largeur ?
‫Eh bien, bien sûr, je pourrais utiliser des valeurs complètes ici ou des valeurs fixes ici, mais je peux également utiliser des étoiles.
‫Et ce que Star fera, c'est que si tous, tous ont une étoile, il dira simplement, OK, prends
‫tout l'espace.
‫Et dans ce cas, c'est seulement l'espace disponible que cette colonne spécifique a, et c'est exactement le même que
‫les autres.
‫Il y a donc une attente maintenant.
‫Donc, celui-ci a un poids de un et celui-ci a également un poids de un.
‫Ils sont donc pondérés de manière égale, ce qui signifie qu'ils ne sont égaux que si nous voulons changer cela,
‫disons que je veux faire ce deuxième bouton ici, le deuxième bouton double aussi large que le premier, je peux utiliser une
‫double étoile.
‫Alors maintenant, celui-ci sera deux fois plus large que le premier.
‫Si, par exemple, je veux avoir trois cinquièmes du côté gauche et deux cinquièmes du côté droit comme largeur, je
‫peux simplement utiliser cette approche, comme vous pouvez le voir ici.
‫Donc trois fois la star et deux fois pour commencer.
‫Alors, qu'est-ce que cela additionne réellement tout cela et ensuite cela ne prend que le compte multiple de ce qui est dit ici.
‫Alors disons que nous avons trois et deux.
‫Alors ce qu'il fait, il dit, OK, maintenant c'est cinq au total.
‫Les unités qui sont disponibles et je vais prendre trois cinquièmes de ces unités et je pourrais même aller de l'avant et faire quelque chose comme 100
‫pour que vous puissiez voir que celle-ci en prend 100 et que cela n'en prendra pas une et n'en prendra que deux.
‫Donc c'est comme ça que vous pouvez jouer avec la largeur et il en va de même pour les hauteurs.
‫Alors maintenant, allons de l'avant et créons une définition de rouleau.
‫Tellement génial que les définitions de rôle et ici, nous pouvons aller de l'avant et créer nos propres définitions.
‫Donc le premier et je vais rester simple aussi, comme dans une rangée et celui-ci a besoin d'une hauteur.
‫Donc je vais juste dire, OK, je veux avoir la hauteur d'étoile.
‫Et maintenant, nous utilisons à nouveau la même chose pour la deuxième rangée.
‫Et comme vous pouvez le voir maintenant, nous avons deux rangées.
‫Donc un ici et le second en bas.
‫Et comme vous pouvez le voir, la deuxième ligne n'a pas encore de contenu.
‫Alors maintenant, changeons cela en disons, tout d'abord, en mettant ce bouton ici en bas.
‫Droit.
‫Et comment pouvons-nous faire cela?
‫Eh bien, nous utilisons simplement une grille, un point, une rangée, et nous disons que c'est un vrai.
‫Maintenant, vous pourriez vous demander, pourquoi est-ce celui-là?
‫Pourquoi ce n'est pas trop bien ?
‫Comme vous le savez probablement déjà, en programmation, nous commençons à compter avec zéro.
‫Ainsi, la première ligne est zéro, la deuxième ligne est un.
‫Alors maintenant, il y a la deuxième rangée, qui est la première rangée.
‫Maintenant, allons de l'avant et créons deux autres boutons et peut-être même changeons leurs noms en
‫quelque chose qui en dit plus sur leurs informations réelles.
‫Je vais donc le mettre dans la colonne zéro de la première ligne et celui-là, en fait, je vais
‫le remettre à zéro un.
‫Et celui-là en ajoutera un.
‫Et en fait, ce sera la première colonne et la ligne zéro comme ça.
‫Alors maintenant, nous avons tous les boutons et celui-là sera un.
‫L'un sera bouton à bouton trois et bouton quatre.
‫Super.
‫Alors maintenant, si nous commençons cela, vous verrez que, eh bien, cela compte aussi pour les Whitesell.
‫Donc un, deux, trois, quatre.
‫D'accord.
‫Maintenant, un petit défi pour vous car vous avez vu comment utiliser de superbes colonnes et lignes.
‫S'il vous plaît allez-y et faites une grille trois fois trois ici avec huit boutons.
‫Donc un, deux, huit devraient être des boutons et la neuvième position.
‫Ainsi, la position en bas à droite ou l'élément de grille doit être un bloc de texte.
‫Alors s'il vous plaît, postez une vidéo et essayez de le faire.
‫D'accord, j'espère que vous l'avez essayé, alors ce que je vais faire, c'est ajouter une autre colonne en ajoutant une définition
‫de colonne ici, et ce sera la même largeur et la même hauteur.
‫Ce sera la même hauteur.
‫Et maintenant, comme vous pouvez le voir, les boutons ont l'air un peu bizarres, mais c'est juste parce que je n'ai pas encore dézoomé.
‫Alors maintenant, nous pouvons le voir correctement.
‫Maintenant, nous avons nos boutons avec zéro un et ainsi de suite.
‫Je vais donc copier ce bouton ici et je vais également positionner une colonne.
‫Donc Rosero et la deuxième colonne.
‫Maintenant, vous pouvez, bien sûr, affirmer qu'il est plus logique de commencer par la ligne, puis d'entrer dans la colonne
‫pendant que vous pouvez le faire.
‫Mais dans mon cas, c'est l'inverse.
‫En fin de compte, ce qui compte, c'est que vous les utilisiez correctement tous les deux.
‫Nous avons maintenant les trois boutons en haut.
‫Maintenant, allons de l'avant et créons la deuxième ligne ou finalisons la deuxième ligne.
‫Et c'est aussi la colonne.
‫Et je vais copier cela plus de trois fois, en fait.
‫Deux fois suffisent.
‫Et celui-ci sera ligne pour positionner zéro et ligne pour positionner un ou colonne un.
‫Maintenant, bien sûr, nous devons changer les valeurs.
‫Donc un, deux, trois, quatre, cinq, six, sept et huit.
‫Et comme je l'ai dit en bas à gauche, j'aimerais avoir un bloc de texte.
‫Ainsi, le bloc de texte a la même approche avec les grains.
‫Vous devez avoir une colonne et une ligne.
‫Je vais donc simplement dire que ce sera la colonne deux et la ligne de la grille.
‫Deux aussi.
‫Alors maintenant, nous sommes en bas, à gauche ou en bas maintenant, nous pouvons sortir et lui donner du texte et je vais
‫juste dire quelque chose.
‫J'envoie un texto maintenant, vous pourriez dire, oh, je n'aime pas ça.
‫Le texte est en haut à gauche.
‫Alors que vous pouvez facilement changer cela par un ..
‫Entrez quelque chose comme l'alignement horizontal et utilisez le centre ici.
‫Alors maintenant, il est centré horizontalement.
‫Zoomons pour que vous puissiez voir.
‫D'accord.
‫Assez d'un pour le centrer verticalement également.
‫J'utilise simplement l'alignement vertical et j'utilise également le centre ici.
‫Alors maintenant, comme vous le voyez, le bouton est parfaitement centré et nous pouvons même changer la taille de la police simplement
‫parce que nous le pouvons.
‫Et agrandissons un peu, comme 32.
‫Et maintenant, nous pouvons voir que nous avons une grille trois fois trois avec huit boutons et un texte.
‫Maintenant, vous pouvez aller de l'avant et aligner tous les types d'éléments dans votre fenêtre ici et votre fenêtre principale dans
‫votre grille.
‫C'est la beauté de l'utilisation des grilles.
‫Et comme vous l'avez vu, vous pouvez empiler les choses.
‫Vous pouvez créer un panneau empilé avec plusieurs grilles.
‫Et en plus, vous avez un texte entre les deux, quelque chose comme ça.
‫Vous n'êtes donc pas limité à utiliser un seul élément ici.
‫Comme vous pouvez le voir, nous pourrions aller de l'avant et disons mettre cela dans un panneau de pile de panneaux empilés comme ça.
‫Je vais donc faire glisser la grille.
‫Comme vous pouvez le voir maintenant, il se plaint car la fenêtre principale de Zemel ne connaît que la première.
‫Il ne verra donc le panneau empilé que si nous vérifions maintenant notre apparence.
‫En fait, arrêtons-le pour que nous puissions voir comment il dit balisage inversé.
‫Donc, si nous prenons toute la grille à l'intérieur de notre panneau de pile, comme vous pouvez le voir, elle est là et elle la prend.
‫Donc, en bas, il y a beaucoup d'espace.
‫Donc ici, nous pourrions ajouter un autre bouton.
‫Juste pour que vous voyiez que c'est possible et que celui-ci sera là pour avoir une hauteur de cent.
‫Et maintenant, comme vous pouvez le voir, tout s'empile en haut.
‫Et même si nous avons cette hauteur qu'ils sont tous de la même hauteur, ce texte avait tellement besoin
‫d'espace qu'il l'ignore.
‫La taille de la police est donc trop grande.
‫Donc si on remonte à 16, c'est encore trop gros.
‫Si nous allons à, disons, 12.
‫Maintenant, ça y ressemble plus.
‫Donc, chaque fois que vous utilisez de vraies définitions pour cette histoire, vous devez être prudent.
‫Si un élément a besoin de plus d'espace qu'il n'y en a, il débordera.
‫D'accord.
‫Cela fait donc deux grilles.
‫Je vais revenir sur la belle grille standard que nous avions là-bas.
‫Et généralement, ce que je recommande toujours après avoir vu quelque chose comme ça et après avoir appris quelque chose comme
‫ça, s'il vous plaît allez-y et jouez avec.
‫Jouez simplement avec différents types d'éléments.
‫Vous en avez déjà vu, et nous examinerons beaucoup plus de contrôles plus tard.
‫Donc, ceux que nous avons utilisés jusqu'à présent sont principalement des boutons, n'est-ce pas.
‫Et des blocs de texte.
‫Mais nous utiliserons différents beaux contrôles dans les futures vidéos.
‫Alors je vous verrai là-bas.