iOS: comment aligner le centre d'une vue sur le bas d'une autre vue avec la mise en forme automatique
Je veux faire le centre de la tête imageView avec le bas du titre bleu imageView garder aligner.
Comment puis-je le faire en utilisant Autolayout?
écran 4.0inches ![[screen 4.7inches]](https://i.stack.imgur.com/JQAPs.png)
écran 4.7inches 
Il y a beaucoup de façons de le faire. Je vais juste montrer l'un des moyens.
OK, faisons ceci étape par étape.
Étape 1
Tout d'abord, pour aligner le centre de l'image ovale sur le bas de l'image rectangulaire, nous devons intégrer la vue rectangulaire à une autre vue dans laquelle nous pourrions nommer la vue Container.
Cette vue de conteneur aura les attributs ff:
- couleur de fond transparente
- la largeur est égale à la largeur de l'écran
- la hauteur sera deux fois la hauteur de la vue rectangulaire (plus tard,
saura pourquoi).
Pour les contraintes de la vue conteneur:
- Leading est égal au leader de super view
- le dernier espace en super vue est 0
- Centré horizontalement en super vue.
- définir les proportions avec soi-même.
Une fois que vous avez terminé, les contraintes ressemblent à ceci.
Étape 2
Maintenant, pour la vue d'image rectangulaire, les contraintes seraient:
- Leading est égal à celui de la vue conteneur
- L'espace supérieur dans la vue conteneur est 0
- La fin est égale à la fin de la vue conteneur.
Définir les proportions avec une vue d'image ovale
- En définissant le format d'image avec la vue d'image ovale. Le changement de taille de cette vue rectangulaire sera proportionnel au changement de taille de la vue ovale.
Il ressemblera à ceci:
Étape 3
Cette fois, les contraintes de la vue ovale:
- centré horizontalement dans la vue du conteneur
- centré verticalement également en vue du conteneur
définir les proportions avec soi
• La définition du rapport d'aspect avec self garantit que, lorsque la vue rectangulaire s'agrandit, le changement de taille de la vue ovale ne provoque pas de distorsion.
Ce sera le résultat:
Étape 4
Il y a une vue très importante à ajouter. Cette vue garantit que la vue rectangulaire aura toujours la moitié de la taille de la vue du conteneur, de sorte que le centre de la vue ovale sera toujours aligné sur le bas de la vue rectangulaire. Nous appelons donc cette vue que nous allons ajouter, la vue factice.
La vue factice aura les attributs ff:
- couleur de fond transparente
- largeur et hauteur ne devrait être que 1
Contraintes de la vue factice:
- centré verticalement dans la vue du conteneur
- centré horizontalement dans la vue du conteneur
- la largeur et la hauteur sont fixes.
- attribuer un espacement vertical avec une vue rectangulaire
Voici comment cela devrait être fait:
Très bien, si vous avez suivi les étapes ci-dessus, vous obtiendrez cet effet.
Ce sera l'aperçu des contraintes:
J'espère que ça aide. :)
Preuve que cela fonctionne!
Je l'ai couru dans le simulateur ...: D
iphone 4:
iPhone 5:
iphone 6:
iPhone 6 Plus:
Étape 1: Créez vos vues comme indiqué ci-dessous.
Étape 2: définissez les contraintes de la vue d’arrière-plan sur les trois bords.
Étape 3: Définissez votre propre ratio. Depuis, vous avez mentionné que vous ne connaissiez pas la taille.
Étape 4: Sélectionnez votre vue centrale et ajoutez les contraintes de largeur et de hauteur souhaitées.
Étape 5: Définissez la vue centrale comme centre horizontal dans la vue d'ensemble, comme illustré ci-dessous.
Étape 6: Sélectionnez maintenant les vues d’arrière-plan et centrale. Définissez la contrainte d'alignement sur "Centre vertical".
Étape 7: Maintenant, vous pouvez voir une contrainte avec un avertissement avec une constante fausse comme ci-dessous. Sélectionnez cette contrainte
Étape 8: dans l'inspecteur de connexions, sélectionnez le "deuxième élément" et modifiez-le en "bas"
Étape 9: C'est ça. S'il y a un avertissement, mettez à jour vos contraintes. Vous pouvez enregistrer différents simulateurs avec toutes les tailles d'écran.
Vous n'avez pas besoin de super vues ou d'un nouveau frère pour accomplir cela. Un moyen facile de centrer n'importe quelle vue et de la conserver en bas/haut d'une autre vue.
Cela peut vous aider. Totalement basé sur AutoLayout, aucune vue supplémentaire n'est requise.
- Définissez d’abord des contraintes sur la hauteur, la largeur et l’emplacement de l’image de couverture. (le bleu)
C'est 0.4 de hauteur totale, égale largeur de la largeur, vous pouvez voir ses contraintes.
- Ensuite, je fixe la hauteur et la largeur de l'image de l'avatar (vert) et la centre horizontalement en largeur.
Ensuite, choisissez l’image de couverture et l’image d’avatar, faites-les Aligner le bord inférieur.
Maintenant ça tourne ça.
- Dernière étape, choisissez l'option "Aligner le bas avec l'image de couverture" et réglez la constante sur la moitié de la hauteur de l'image Avatar. Terminé!
C'est la façon la plus simple que j'ai trouvée maintenant.
vous devez appliquer des restrictions de autolayout relatives à votre image et non à votre vue. Pour obtenir plus de détails https://www.raywenderlich.com/115444/auto-layout-tutorial -in-ios-9-part-2-contraintes
Tout d’abord, je placerais l’image d’arrière-plan et, d’abord, glisserez-la manuellement jusqu’à ce que vous ayez les bonnes dimensions, puis appuyez sur le bouton | o | En regardant l’icône en bas à droite de l’écran, je décocherais l’option des marges et ferais gauche à 0, en haut 0, à droite 0 et en bas devrait être un nombre plus grand (devrait générer automatiquement pour vous)
placez maintenant le 2e UIImage ... placez-le et redimensionnez-le à votre guise ... maintenant sur la même icône | o | touchez ça et donnez-lui une hauteur et une largeur ... ajoutez des contraintes ... allez maintenant à la fin du dernier à gauche (ça ressemble à deux rectangles empilés) ... tapez ça et tapez "horizontalement dans le conteneur ... MAINTENANT appuyez sur la image plus petite et maintenez le contrôle et faites glisser vers la plus grande image et laissez aller ... appuyez sur l'espacement vertical ...
LASTLY .... l'icône de l'extrême droite qui ressemble à un | o | mais a un triangle ... alors que l'une des images est sélectionnée ... appuyez sur le bas "cadres de mise à jour"