layout image, texte ne se positionne pas ????
Bonjour tous le monde,
Je vient vers vous, cela fait prêt de deux semaines que je galère, je refait et refait avec des tuto et des vidéo.
Je pense comprendre ce que je fait, mais là je tourne trop autour et comprend pas ce qu'il m'arrive.
J'essaie de placer mon texte, mes image dans le bon emplacement défini avant sur papier.
Et je galère ça me donne autre chose.
Même sur un autre mobile, pour info je n'est pas de compte dev Apple et j'utilise l'émulateur.
la position des mes objet son pas correcte.
Je me dit peut-être que c'est cela??? Il faut un vrais tel.
Aidez moi please,
Merci a vous,
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Euh .. pas facile de t'aider en ne connaissant rien du probléme. Peut-tu dessiner un croquis de ton objectif, ou faire une copie d'écran d'une application faisant la même chose ? C'est un positionnement en code ou par contrainte sous Storyboard ?
Pas besoin d'un vrai téléphone, l'émulateur suffit.
Tu devrais t'inscrire au MOOC du professeur Kordon, traitant justement du problème des positionnements d'objets sous iOS cette semaine-ci (Objective-C et Swift, en code ou Storyboard). C'est gratuit, en français et fort sympathique.
https://www.edx.org/course/programmation-ios-partie-i-upmcx-sorbonnex-progios1x
En tout cas, l'agencement des composants serait le même, soit sur un iBidule, soit sur le simulateur (ce n'est pas un émulateur)
Oh! merci,
je sais pas ce qu'est le plus facile un positionnement en code ou par contrainte sous Storyboard ?
Ce que j'essaie de faire c'est par contrainte sous Storyboard.
Pour les croquis les voilà ,
Cela me cache le titre, l'étoile de favoris, l'image est trop grande et le détaille est pas centrer
Essais sur iphone 7 plus en émulation
j'ose même pas dire sur un autre mobile.
Merci a toi,
On vas y aller étape par étape.
Première étape : utilisation des contraintes pour afficher une image au centre de l'écran, de la même manière sur tous les devices.
Pour commencer, je crée un projet vide et j'affiche le storyboard. Je sélectionne l'orientation portait en mode iPhone 4S. C'est toujours plus facile de partir du mode le plus petit, que de commencer en mode iPhone 7 et se demander ensuite comment réduire l'interface pour les petits devices.
Je donne un fond bleu au storyboard, en changeant la propriété Background de la vue principale. Les contrôles graphiques ayant des fonds blancs, il sera plus facile de voir leurs contours sur un fond bleu.
Je place une UIImageView au centre approximatif de l'écran.
Ensuite je charge une image dans l'UIImageView. J'ai pris celle d'une chaussure, n'ayant aucune idée de la nature de tes images. J'ai sélectionné un graphisme au hasard, avec un ratio hauteur/largeur proche de ton "croquis".
Euh. Pourquoi pas utiliser une UIStackView ou, même une UITableView ?
Première chose à faire : Il faut créer une contrainte indiquant à Xcode que le rapport hauteur/largeur de l'image est constant, pour qu'il ne s'amuse pas à la distordre dans tous les sens.
Une contrainte est une relation entre deux objets graphiques. Pour en créer une, il faut sélectionner le premier objet et tirer un trait vers le second, tout en maintenant appuyé le bouton ctrl. Un ratio hauteur/largeur est une relation d'un objet par rapport à lui-même. Je sélectionne l'UIImageView en appuyant sur la touche ctrl, je tire un trait de quelques pixels et je relâche la souris. Il s'affiche alors un petit menu. Je sélectionne "Aspect Ratio" et c'est fini. J'ai une première contrainte disant que l'image doit toujours avoir le rapport hauteur/largeur actuel.
Tu préfères fournir une solution magique clé-en-main ou expliquer le principe général, de manière à ce qu'easyd et les lecteurs suivants puissent comprendre le truc et l'adapter à leurs besoins ?
En plus, je découvre tout ça moi aussi. En parler m'aide à fixer les concepts dans ma tête.
Bah, les deux sont valable. Continues avec ton explication, pour que les autres puissent profiter
DOUBLON - A EFFACER
En examinant la liste des objets de l'interface, on peut voir la contrainte. En se basant sur la taille de l'image au moment où j'ai créé la contrainte de ratio, Xcode a fixé le rapport hauteur/largeur à 15/8. Quelque que soit les changements de taille de l'image dans l'interface, elle aura toujours le même ratio et donc la même apparence visuelle.
Le petit point rouge à gauche de la liste des objets indique qu'Xcode n'a pas assez d'informations pour savoir comment afficher l'image. Il lui faut d'autres contraintes pour déterminer la largeur et la position (x,y).
Dans ton croquis, easyd, le coté gauche de l'image image est collée sur la marge gauche de l'écran. Pour reproduire cela avec une contrainte, il faut :
(1) Sélectionner la chaussure
(2) Sélectionner la fonction "Add New Contraints" (petite icône rectangulaire en bas de l'écran). Un menu s'affiche.
(3) Sélectionner le petit trait pointillé se trouvant à gauche du petit carré. Cela veut dire "Création d'une contrainte entre l'objet et l'autre objet se trouvant à sa gauche". Dans le cas courant, le seul truc à gauche étant la marge de l'écran, cela signifie "Créer une contrainte entre la chaussure et le bord gauche".
(4) La contrainte peut prendre différentes valeurs. Pour "coller" l'image sur le bord de l'écran, elle doit avoir la valeur 0.
(5) Il faut cliquer sur le bouton "Add 1 Constraint" pour valider la création.
L'image devient alors très étrange. C'est normal, Xcode manque encore d'informations pour l'afficher correctement.
Xcode a notamment besoin de connaà®tre la largeur de l'image. Pour cela il faut créer une nouvelle contrainte "collant" son coté droit sur la marge droite de l'écran. Même procédure que pour la gauche :
- Sélection de l'image image comme précédemment
- Sélection de la fonction "Add New Contraints" comme tout à l'heure
( A ) - Sélection de la fonction "Création d'une contrainte entre l'objet et l'autre objet se trouvant à sa droite"
( B ) Distance entre les 2 objets de 0
( C ) Validation de la nouvelle contrainte
Et magique, cela .. ne marche PAS ! Normal, les choses ne fonctionnent JAMAIS du premier coup en informatique.
Le coté gauche de la chaussure est collé sur la marge gauche de l'écran, alors que le coté droit est placé directement sur le bord de l'écran.
En créant la contrainte j'ai oublié de préciser à Xcode qu'il fallait tenir compte de la marge droite de l'écran. Je dois donc effacer la contrainte pour la refaire. Il est aussi possible de l'éditer, mais je préfère garder ça pour plus tard.
Heureusement, il y a la fonction UNDO de l'éditeur pour annuler les dernières commandes. Un petit UNDO et je me retrouve dans la situation précédente. Je recommence à créer ma contrainte droite, sans faire la même erreur. Pour ça je dois :
- Sélectionner l'objet
- Ouvrir le menu "Add New Constraints"
- (1) Sélectionner la fonction "Constrain to margins" pour indiquer à Xcode qu'il doit tenir compte de la marge.
- (2) sélectionner la contrainte "objet -> objet droite"
- (3) donner une valeur de 0
- (4) Valider la nouvelle contrainte
Et c'est bon ..
A ce stade, il ne reste plus qu'une chose à faire : définir la position Y de l'image. C'est la seule information qui manque à Xcode pour déterminer tous les paramètres d'affichage de l'objet.
Pour ce faire, je sélectionne l'image, tout en appuyant sur le bouton ctrl et je tire un trait vers le fond de l'écran, c'est-à -dire vers la vue centrale de l'application. Cela indique à Xcode que je veut créer une relation (contrainte) entre l'image de la chaussure et la vue principale. Quand je relâche la souris, j'ai un petit menu. En sélectionnant la fonction "Center vertically in Container" j'indique que la position Y de l'image doit être centrée verticalement sur la vue principale de l'application. Cela suffit à Xcode pour connaà®tre la position Y d'affichage.
Voila, toutes les contraintes d'affichage sont définies, quelque soit le device. Du moins pour l'orientation portait !
En jouant avec les réglages du Storyboard, tu peux voir que la chaussure est TOUJOURS positionnée au centre de l'écran, quelque que soit le device actif. Et que ces dimensions s'adaptent à l'espace disponible.
C'est bon pour un premier jet ? Si oui, je continue demain.
Et maintenant, la suite ..
Une image centrée au milieu de l'écran ne convient peut-être pas à tes besoins. Pas grave, on peut modifier le point d'accroche de l'image pour la positionner en fonction d'un pourcentage de la taille de l'écran. Pour cela je :
- (1) sélectionne la chaussure
- (2) cherche la contrainte "chaussures.centerY = centerY" dans la liste des objets de l'interface et clique dessus
- (3) Le détail de la contrainte s'affiche à droite de l'écran,
L'inspecteur de propriété permet d'examiner la contrainte de plus prés. On voit qu'il y a deux propriétés, liées par une relation :
[chaussures.Center Y] [Equal] [Superview.Center Y]
Mais il y a aussi une constante et un multiplicateur. En fait, la formule de la contrainte est :
Chaussures.Center Y = (Superview.Center Y)*multiplier + constante
La constante étant nulle, et le multiplicateur valant 1, cela ne change rien.
Supposons que je modifie le multiplicateur par la valeur 1,5. Cela change la signification de la formule, qui deviens :
Chaussures.Center Y = (Superview.Center Y)*1.5 + 0
Superview.Center Y c'est 50% de la hauteur de l'écran, donc :
Chaussures.Center Y = 50% hauteur écran * 1,5 = 75% hauteur écran
Et hop, la chaussure est maintenant positionnée à 75% de la hauteur de l'écran, sur tous les devices :
Dans ton projet, l'image est placée plutôt vers le haut. Visuellement cela correspond a un multiplicateur d'environ 0.7 (35% de la hauteur de l'écran). Voilà ce que cela donne :
J'ajoute maintenant un Label au dessus de l'image, avec un fond blanc pour bien visualiser sa taille, par rapport à l'écran. Je le place grossièrement sur l'écran, sans trop me préoccuper d'un positionnement précis.
Je place une première contrainte sur le Label, pour le forcer à s'afficher horizontalement sur le centre de l'écran. Pour ce faire :
- Je sélectionne le label
- J'appuye sur la touche ctrl, et je tire un trait reliant le Label à n'importe quel point de l'écran. ATTENTION à ne pas terminer le trait sur la chaussure. Mon but est de créer une relation entre le Label et la vue principale, pas entre le Label et la chaussure !
- Un menu apparait. Je sélectionne la fonction "Center Horizontally in Container".
Xcode crée alors une contrainte "TITRE PRODUIT.centerX = centerX"
Passons maintenant à l'étape suivante, qui est le graal de ta quête : positionner le label au dessus de l'image, sans risque de "débordement".
(1) Je sélectionne le Label
(2) Je sélectionne la fonction "Add New Constraints" (petite icône en bas de l'écran
(3) Je clique sur la petite ligne pointillée située en dessous du contrôle pour dire que je veux "créer une contrainte entre l'objet et le truc placé en dessous (l'image en l'occurrence)."
(4) Je donne une valeur de 10 (10 points).
(5) Je valide la contrainte en cliquant sur le bouton "Add 1 Constraint"
C'est bon à ce stade. Tu peux changer de device, modifier le texte et changer la position de l'image, le label restera toujours scotché à 10 points au dessus de la chaussure.
Même chose pour le logo de la marque. Je place un label au dessus du titre du produit, puis je le centre avec une contrainte d'alignement horizontal.
Ensuite je crée une contrainte verticale, mais contrairement au titre, je "scotche" le Logo au bord haut de l'écran.
(1) Sélection du Label Logo
(A) Sélection de la fonction "Add New Constraint"
(2) Sélection de la fonction "Ajouter une contrainte entre l'objet et le truc situé AU DESSUS"
(3) je donne la valeur 0 pour bien coller le logo sur la marge haute de l'écran
(4) je vérifie que la case "Constrain to margins" soit bien cochée, pour être certain que la contrainte s'applique sur la marge haute de l'écran, et non sur son bord physique (c'est très laid sinon).
(5) Je valide la contrainte
Et c'est bon .. L'image, le titre et le logo s'alignent automatiquement, quelque soit le type de device.
Il vas avoir une différence visuelle entre l'iPhone 4/4S et les autres modèles. Les contraintes ne sont pas "magiques" et doivent s'arranger avec la différence de ratio hauteur/largeur des devices. Il y a moyen de "ruser" et de "cacher visuellement" la différence e taille. Ce sera l'objet de la prochaine leçon.
Alors easyd, cela te convient ? Cela t'aide à résoudre tes problèmes ? Je continue ?