J'utilise Comme vous pouvez voir la vue jolie Bon sur les iPhone 8 et 11 Pro Max. Cependant sur l'iPhone SE c'est assez mauvais. Je ne comprends pas vraiment pourquoi parce qu'il y aurait assez d'espace pour mettre en place tous les points de vue comme dans l'iPhone 8 ?? Pour une raison quelconque, je pense que les boutons Ma question est de savoir comment je peux résoudre ce problème? Quelles sont les meilleures pratiques? Rétrécissement du Voici comment je limite le mise en page automatique code> tout au long de l'application de toute ma part de manière programmatique, mais je me suis vraiment lutté pour que mon application soit bonne sur tous les appareils (surtout en difficulté avec l'iPhone SE). Voici un exemple de mon StartViewController CODE> (SE, 8 & 11 PRO Max): 
p> code> et Les étiquettes code> sont plus grandes (pourraient être une illusion). P> FontSisez CODE>? Faire des boutons code> plus petit? Quelle est la meilleure façon d'obtenir une mise en page dynamique qui fonctionne pour chaque iPhone? Apparemment, j'utilise la mise en page automatique pas de la meilleure façon ... p> Vues code> de l'image: P> //MARK: setupViews
func setUpViews(){
view.addSubview(backgroundImage)
view.addSubview(willkommenLabel)
view.addSubview(textLabel)
view.addSubview(emailButton)
emailButton.addSubview(emailImage)
view.addSubview(oderLabel)
view.addSubview(lineLeft)
view.addSubview(lineRight)
view.addSubview(facebookButton)
facebookButton.addSubview(facebookLogo)
view.addSubview(googleButton)
googleButton.addSubview(googleLogo)
view.addSubview(appleButton)
appleButton.addSubview(appleLogo)
view.addSubview(documentsLabel)
backgroundImage.topAnchor.constraint(equalTo: view.topAnchor, constant: -20).isActive = true
backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 20).isActive = true
backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -20).isActive = true
backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 20).isActive = true
willkommenLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 80).isActive = true
willkommenLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
willkommenLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
textLabel.topAnchor.constraint(equalTo: willkommenLabel.bottomAnchor, constant: 30).isActive = true
textLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
emailButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
emailButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
emailButton.topAnchor.constraint(equalTo: textLabel.topAnchor, constant: 100).isActive = true
emailButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
emailImage.centerYAnchor.constraint(equalTo: emailButton.centerYAnchor).isActive = true
emailImage.leadingAnchor.constraint(equalTo: emailButton.leadingAnchor, constant: 10).isActive = true
emailImage.heightAnchor.constraint(equalToConstant: 25).isActive = true
emailImage.widthAnchor.constraint(equalToConstant: 25).isActive = true
oderLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
oderLabel.bottomAnchor.constraint(equalTo: emailButton.bottomAnchor, constant: 40).isActive = true
oderLabel.widthAnchor.constraint(equalToConstant: 60).isActive = true
lineLeft.centerYAnchor.constraint(equalTo: oderLabel.centerYAnchor).isActive = true
lineLeft.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
lineLeft.trailingAnchor.constraint(equalTo: oderLabel.leadingAnchor).isActive = true
lineRight.centerYAnchor.constraint(equalTo: oderLabel.centerYAnchor).isActive = true
lineRight.leadingAnchor.constraint(equalTo: oderLabel.trailingAnchor).isActive = true
lineRight.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
facebookButton.leadingAnchor.constraint(equalTo: emailButton.leadingAnchor).isActive = true
facebookButton.trailingAnchor.constraint(equalTo: emailButton.trailingAnchor).isActive = true
facebookButton.bottomAnchor.constraint(equalTo: oderLabel.bottomAnchor, constant: 55 + 10).isActive = true
facebookButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
facebookLogo.centerYAnchor.constraint(equalTo: facebookButton.centerYAnchor).isActive = true
facebookLogo.leadingAnchor.constraint(equalTo: facebookButton.leadingAnchor, constant: 10).isActive = true
facebookLogo.heightAnchor.constraint(equalToConstant: 25).isActive = true
facebookLogo.widthAnchor.constraint(equalToConstant: 25).isActive = true
googleButton.leadingAnchor.constraint(equalTo: emailButton.leadingAnchor).isActive = true
googleButton.trailingAnchor.constraint(equalTo: emailButton.trailingAnchor).isActive = true
googleButton.bottomAnchor.constraint(equalTo: facebookButton.bottomAnchor, constant: 55 + 10).isActive = true
googleButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
googleLogo.centerYAnchor.constraint(equalTo: googleButton.centerYAnchor).isActive = true
googleLogo.leadingAnchor.constraint(equalTo: googleButton.leadingAnchor, constant: 10).isActive = true
googleLogo.heightAnchor.constraint(equalToConstant: 25).isActive = true
googleLogo.widthAnchor.constraint(equalToConstant: 25).isActive = true
appleButton.leadingAnchor.constraint(equalTo: emailButton.leadingAnchor).isActive = true
appleButton.trailingAnchor.constraint(equalTo: emailButton.trailingAnchor).isActive = true
appleButton.bottomAnchor.constraint(equalTo: googleButton.bottomAnchor, constant: 55 + 10).isActive = true
appleButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
appleLogo.centerYAnchor.constraint(equalTo: appleButton.centerYAnchor).isActive = true
appleLogo.leadingAnchor.constraint(equalTo: appleButton.leadingAnchor, constant: 10).isActive = true
appleLogo.heightAnchor.constraint(equalToConstant: 25).isActive = true
appleLogo.widthAnchor.constraint(equalToConstant: 25).isActive = true
documentsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
documentsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
documentsLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -5).isActive = true
}
3 Réponses :
En réalité, ce dépotez sur la manière dont vous utilisez la mise en page à regarder dans chaque appareil, de sorte que si vous souhaitez une hauteur fixe pour tous les éléments, vous devriez envelopper tous les éléments de ScrollView qui feront défiler pour les petits appareils et agir si ce n'est pas existant dans de grands appareils. , ou si vous devez créer des éléments à l'écran dans tous les périphériques, vous devez effectuer des contraintes de hauteur proportionnelles à la hauteur de l'écran
J'utilise un ScrollView pour cela dans un autre ViewController . Mais pour le premier écran, une vision de Scrollie est très inintuciante à mon avis. Alors, quelles sont les règles UI ici? Il suffit de faire les boutons et les étiquettes plus petits ?? Et comment puis-je faire les fontsize de manière dynamique?
C'est une chose de design, mais je préfère que je préfère l'accumuler au lieu de le faire défiler, vous pouvez utiliser Scalfont pour adapter la propriété de la marque / bouton Vous pouvez créer une extension de fonction VC qui a détecté un périphérique de courant et renvoyer une taille de police que vous utilisez. Lors de la création de tous les éléments
Donnez ceci un essai.
Il utilise quelques hauteurs de pourcentage (sur la base de votre mise en page d'origine sur un écran iPhone 8). P>
Je n'ai changé aucun de votre code existant. Il suffit d'ajouter le texte suivant à p> devrait Soyez clair des commentaires où vous voudrez peut-être effectuer des ajustements ... mais j'espère que cela vous fera vous rapprocher de votre objectif - et vous trouverez peut-être quelques conseils pour une utilisation future: P> Func code> et de modifier votre appel de: p> func setupViewsDon(){
// setting these properties here, so I don't have to change your original initialization
willkommenLabel.numberOfLines = 1
willkommenLabel.adjustsFontSizeToFitWidth = true
willkommenLabel.minimumScaleFactor = 0.5
textLabel.numberOfLines = 2
textLabel.adjustsFontSizeToFitWidth = true
textLabel.minimumScaleFactor = 0.5
// prevent willkommenLabel from being compressed or streched
willkommenLabel.setContentHuggingPriority(.required, for: .vertical)
willkommenLabel.setContentCompressionResistancePriority(.required, for: .vertical)
// prevent oderLabel from being compressed or streched
oderLabel.setContentHuggingPriority(.required, for: .vertical)
oderLabel.setContentCompressionResistancePriority(.required, for: .vertical)
// prevent documentsLabel from being compressed or streched
documentsLabel.setContentHuggingPriority(.required, for: .vertical)
documentsLabel.setContentCompressionResistancePriority(.required, for: .vertical)
view.addSubview(backgroundImage)
view.addSubview(willkommenLabel)
view.addSubview(textLabel)
view.addSubview(emailButton)
emailButton.addSubview(emailImage)
view.addSubview(oderLabel)
view.addSubview(lineLeft)
view.addSubview(lineRight)
view.addSubview(facebookButton)
facebookButton.addSubview(facebookLogo)
view.addSubview(googleButton)
googleButton.addSubview(googleLogo)
view.addSubview(appleButton)
appleButton.addSubview(appleLogo)
view.addSubview(documentsLabel)
backgroundImage.topAnchor.constraint(equalTo: view.topAnchor, constant: -20).isActive = true
backgroundImage.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 20).isActive = true
backgroundImage.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -20).isActive = true
backgroundImage.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 20).isActive = true
// add a layout guide for percentage top spacing
let topSpaceGuide = UILayoutGuide()
view.addLayoutGuide(topSpaceGuide)
// based on iPhone 8 ... 80-pts from top
// will be shorter on smaller devices, taller on larger devices
topSpaceGuide.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
topSpaceGuide.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 80.0 / 667.0).isActive = true
willkommenLabel.topAnchor.constraint(equalTo: topSpaceGuide.bottomAnchor).isActive = true
willkommenLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
willkommenLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
// textLabel top constrained to willkommenLabel bottom
textLabel.topAnchor.constraint(equalTo: willkommenLabel.bottomAnchor, constant: 0).isActive = true
textLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
// textLabel height = a percentage of view height using 100-pts based on an iPhone 8
// priority = .defaultHigh so it can be compressed if needed (on smaller devices)
let c = textLabel.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 100.0 / 667.0)
c.priority = .defaultHigh
c.isActive = true
// set email button height
emailButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
// set other button heights equal to emailButton
facebookButton.heightAnchor.constraint(equalTo: emailButton.heightAnchor).isActive = true
googleButton.heightAnchor.constraint(equalTo: emailButton.heightAnchor).isActive = true
appleButton.heightAnchor.constraint(equalTo: emailButton.heightAnchor).isActive = true
// add the logo images to the buttons, and make their heights relative to button heights
// in case you want to change the button heights
for (btn, img) in [(emailButton, emailImage), (facebookButton, facebookLogo), (googleButton, googleLogo), (appleButton, appleLogo)] {
btn.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
btn.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
btn.addSubview(img)
img.centerYAnchor.constraint(equalTo: btn.centerYAnchor).isActive = true
img.leadingAnchor.constraint(equalTo: btn.leadingAnchor, constant: 10).isActive = true
img.heightAnchor.constraint(equalTo: btn.heightAnchor, multiplier: 0.5).isActive = true
img.widthAnchor.constraint(equalTo: img.heightAnchor).isActive = true
}
emailButton.topAnchor.constraint(equalTo: textLabel.bottomAnchor, constant: 20).isActive = true
oderLabel.topAnchor.constraint(equalTo: emailButton.bottomAnchor, constant: 15).isActive = true
facebookButton.topAnchor.constraint(equalTo: oderLabel.bottomAnchor, constant: 15).isActive = true
googleButton.topAnchor.constraint(equalTo: facebookButton.bottomAnchor, constant: 10).isActive = true
appleButton.topAnchor.constraint(equalTo: googleButton.bottomAnchor, constant: 10).isActive = true
// make sure appleButton stays above documentsLabel
appleButton.bottomAnchor.constraint(lessThanOrEqualTo: documentsLabel.topAnchor, constant: -20.0).isActive = true
// horizontal arrangement of oderLabel and left/right lines
oderLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
oderLabel.widthAnchor.constraint(equalToConstant: 60).isActive = true
lineLeft.centerYAnchor.constraint(equalTo: oderLabel.centerYAnchor).isActive = true
lineLeft.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
lineLeft.trailingAnchor.constraint(equalTo: oderLabel.leadingAnchor).isActive = true
lineRight.centerYAnchor.constraint(equalTo: oderLabel.centerYAnchor).isActive = true
lineRight.leadingAnchor.constraint(equalTo: oderLabel.trailingAnchor).isActive = true
lineRight.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
// documentsLabel stay at bottom
documentsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
documentsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
documentsLabel.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -5).isActive = true
}
Désolé j'étais très occupé et je viens de voir cette réponse maintenant. C'est parfait!! Grand travail, vraiment apprécié. Exactement ce que je cherchais. Je vais passer par le code et vous faire savoir si je ne suis pas clair :)
J'ai créé une chambre: chat.stackoverflow.com/rooms/213371/roomfor-chris -et-donma g
Si vous souhaitez que votre conception fonctionne parfaitement dans tous les périphériques, vous devez éviter de définir des valeurs constantes autant que vous le pouvez, à moins que ce soit nécessaire, vous définissez ici des hauteurs et des pavés numéros fixes, essayant de les définir liés à la taille de l'écran, Par exemple, vous pouvez ici définir tous les boutons dans une vue et définir la hauteur de la moitié de l'écran. pour les boutons. Donc, vous auriez tous les boutons de manière égale et non codée dur, ainsi que la vue dynamique des boutons liés à l'écran de l'écran de l'appareil qui exécute l'application
La conception de l'interface utilisateur n'est pas aussi facile que l'on pourrait penser. C'est pourquoi de très bons concepteurs sont payés très bon argent . On dirait que vous avez trop d'espace au-dessus de votre étiquette "Willkommen ..."; Vous voudrez peut-être activer "AutoshRink" sur votre étiquette "Werde Mitglied ..."; Vous voudrez peut-être que les boutons soient un peu plus courts sur des appareils plus petits; usw.