Conception de l'interface utilisateur 9 tranches

Lors de la création d'une interface utilisateur avec des bords et des coins personnalisés, vous devrez souvent rendre des éléments à différents ratios d'aspect et les entourer visuellement de texte localisé ou d'autres contenus de dimensions inconnues.Cela vous permet de créer des éléments d'interface de différentes tailles sans déformer les bords ou les coins.

>

>

Dans l'approche 9 tranches, une image (une seule contenud'image Roblox) est divisée internement en neuf sous-images, chacune avec des règles de mise à l'échelle différentes.

Éditeur de studio

La configuration des tranches est possible en définissant directement les propriétés Enum.ScaleType et les tranches sur une balise ou un bouton d'image, mais l'éditeur intégré de 9 tranches de Studio est plus intuitif.

Ouverture de l'éditeur

Pour ouvrir l'éditeur visuel 9 tranches dans Studio :

1. Sélectionnez un ImageLabel ou ImageButton avec un ID de ressource valide entré dans son champ image .

1. Définissez la propriété ScaleType à tranche .

1. Cliquez sur la propriété Centre de tranche qui apparaît, puis cliquez sur le … dans la colonne.

1. Dans la fenêtre qui s'ouvre, 4 lignes rouges superposent l'image, représentant les bords des tranches. La taille de l'image source est également affichée.

Définir les décalages

Dans Studio, faites glisser les lignes rouges pour définir les décalages à partir des bords gauche, droite, supérieur et inférieur de l'image .

Lorsque vous redéfinissez les lignes de trascendant, l'élément d'interface utilisateur se met automatiquement à jour pour afficher le resultats.

>

>

>

>