Développement iOS
  1. Développement iOS
  3. Centre 4 images avec contraintes autolayout
Intereting Posts
Taille de l'application mobile sur l'Apple Store Apple avec bitcode activé Impossible de supprimer ou de modifier le certificate .p12 dans la console Firebase Rotation de périphérique dans un UIViewController spécifique dans UITabBarController et UINavigationController Enregistrez le son et jouez-le avec la hauteur modifiée CLLocationManager ne surveille les régions que la première fois que l'application est exécutée après l'installation UITableView et UIView avec keyboardWillShow xCode 6 beta 7: storyboard ajoute de l'espace supplémentaire sur les côtés droit et gauche iOS Lire l'écran video noir? Que signifient "Dirty" et "Resident" par rapport à la memory virtuelle? Données de base. Problème NSPredicate utilisant des littéraux constants comme noms de propriétés Comment utiliser AWS iOS SDK pour supprimer un dossier et tous ses objects dans le compartiment latéral? Comment appeler queryForTable pour recharger des données à partir du nuage d'parsing dans PFQueryTableViewController? Variable globale NSMuteableArray utilisant la class Singleton La position de l'image UIButton dépend du cadre de titleLabel dupliquer des symboles pour l'architecture armv7

Centre 4 images avec contraintes autolayout

Je suis nouveau sur autolayout et je suis bloqué sur la façon de centrer ces 4 images dans tous les différents appareils, comme sur les images. J'ai essayé d'appliquer les contraintes configurées automatiquement, mais alors il aura cette distance et cela ne rentre pas sur tous les appareils. Donc, ma question est de savoir quelles contraintes dois-je appliquer sur toutes les images différentes pour que toute l'image soit cinput à la même distance?

Voici à quoi ressemble ma cellule dans storyBoard:

entrez la description de l'image ici

image des options de contrainte sur l'image 1:

entrez la description de l'image ici

image dans le simulateur:

entrez la description de l'image ici

/// MON ESSAI ////

Ici vous pouvez voir les contraintes que j'ai ajoutées et le résultat?

entrez la description de l'image ici

résultat:

entrez la description de l'image ici

Votre approche est presque correcte, il manque simplement des contraintes de taille pour les images.

Si vous souhaitez resize dynamicment les images et garder l'espace entre elles constant, placez des contraintes sur les images pour que la largeur soit >=20 (ou toute autre valeur, dépend de vos besoins) et une contrainte pour conserver les proportions. Puis ctrl-faites glisser de UIImageView1 à UIImageView2 et définissez une contrainte pour des largeurs égales . Répétez cela de UIImageView1 à UIImageView3 et de UIImageView1 à UIImageView4 .

entrez la description de l'image ici

Si vous voulez que les images conservent toujours leur taille fixe et que des espaces de taille dynamic les séparent, vous avez besoin d'une autre approche:

L'astuce ici est de placer 3 UIViews vides entre les UIImageViews afin qu'il ressemble à ceci:

entrez la description de l'image ici

  • Définir des contraintes en haut pour toutes les vues
  • Définir les contraintes à gauche et à droite pour UIImageView1 et 4
  • Définir des contraintes pour toutes les UIImageViews à la même largeur
  • Définir des contraintes pour tous les UIViews entre les UIImageViews à la même largeur
  • Définir des contraintes pour toutes les distances entre les vues à 0
  • Définissez les contraintes de largeur pour les UIViews sur >= 0

De cette façon, les UIViews vides entre les UIImageViews seront redimensionnés dynamicment et de même largeur.

J'espère que vous avez l'idée.

Pour la première image, ajoutez un espace initial à la vue supérieure et pour la dernière image, ajoutez un espace arrière à la vue supérieure et ajoutez un espacement vertical entre la première et la seconde, deuxième et troisième, troisième et quasortingème position horizontale au centre du conteneur.

Les objects de votre storyboard nécessitent au less 4 contraintes par object .

Quand il y a des lignes orange autour de l'object UIImageView comme cela apparaît dans votre question, cela signifie qu'une contrainte est manquante ou conflictuelle et peut souvent signifier que l'image ne s'affiche pas à l'exécution comme vous l'attendez.

Dans un premier time, je vous recommand de sélectionner tous les objects et d'effacer les contraintes, puis de recommencer.

Bien que ce ne soit pas exactement la même chose, voici un lien vers une réponse qui explique les contraintes de layout automatique un peu plus en détail. Une fois que vous le comprenez, la layout automatique peut être très puissante.

>> Lien vers un problème de layout automatique similaire – iOS CustomTableViewCell: les éléments ne s'alignent pas correctement <<

J'espère que ça aide

Si vous voulez que les images conservent toujours leur taille fixe et les espaces de taille dynamic entre eux, alors vous devez d'abord faire glisser les quatre UIView dans votre set StoryBoard. Contraindre en haut à gauche et en haut pour tous les UIViews. (faites glisser d'un UIView à un autre et réglez sa largeur égale répétez ce travail pour tous les UIViews).

Image sur les mises en page

Deuxièmement, vous devez faire glisser vos images dans ces UIViews et définir leur hauteur de contrainte et leur centre horizontal dans le conteneur et le centre verticalement dans le conteneur.

Dans la dernière définition de la couleur de fond de tous les UIViews par défaut (blanc), vous obtenez le résultat, il va travailler …. je l'assure.

Capture d'écran de Xcode