dimanche 30 décembre 2012

Ajouter des bordures à vos containers !


Vous vous rappelez peut être d'une époque, fort , fort lointaine, ou pour faire des cadres arrondis en HTML ou d'autre langage  c’était tout simplement la galère. En effet, vu que les cadres changent de dimension, l'image de fond se redimensionne proportionnellement, changeant l'aspect des bords. La solution pour pallier à ce problème était de découper l'image en 9 slices, et de les positionner comme il faut. Bref c’était la galère..  Aujourd'hui avec cascade, fini les ennuies, car tout se fait automatiquement. Voila comment faire un container avec des bords :

1. Dessiner votre images et sauvegarder là. Vous pouvez faire un carré,un rectangle, tout ce que vous voulez.


2. Depuis Momentics IDE, ouvrez votre image , et cliquer sur le bouton "add/remove 9 slices". 
Vous pouvez aussi éditer les slices à la main en déplaçant les guides.  Bref quand c'est fait, sauvegardez.

3. Si vous avez fait tout ce que j'ai dit , Vous devriez voir apparaître un nouveau fichier appelé : nom_image.png.amd. Ouvez le juste par curiosité , vous devriez voir ce code : 

#RimCascadesAssetMetaData version=1.0
source: "cascades_images_nineslice_fixed.png"
sliceMargins: 15 15 15 15

Vous avez deviné , c'est la définition  du 9 slices images! Et vous voyez ce fichier .amd, c'est celui là que vous allez utiliser dans votre code à la place du fichier .png. 

4. On va par exemple, créer un Container , dans un fichier BorderContainer.qml 


Reste plus qu'à l'utiliser , et le tour est joué  !




Aucun commentaire:

Enregistrer un commentaire