Comment utiliser UIScrollView dans Interface Builder?

Vous avez oublié de définir la propriété contentSize de UIScrollView. Curieusement, vous ne pouvez pas le faire depuis Interface Builder. Vous devrez le faire à partir du contrôleur de vue gérant cette vue de défilement.

La réponse de Boby_Wan m’a fait réfléchir, et j’ai trouvé la solution suivante pour configurer le contentSize de UIScrollView à partir d’Interface Builder:

1. Sélectionnez le UIScrollView dans la scène Storyboard
2. Accédez à l’ inspecteur d’identité , créez un nouvel atsortingbut d’exécution défini par l’utilisateur (cliquez sur le bouton +)
3. Modifier l’atsortingbut Chemin de clé à contentSize
4. Modifier l’atsortingbut Type en Size
5. Définissez maintenant la valeur sur { largeur de contenu souhaitée, hauteur de contenu souhaitée }

Par exemple, si vous définissez la valeur sur {320, 920}, l’utilisateur pourra faire défiler un écran supplémentaire sur l’iPhone.

(J’utilise xcode 4.3.3, la cible de déploiement iOS du projet est 5.1)

La première fois que je l’ai fait, j’ai reçu l’erreur suivante:

Configuration illégale:
Atsortingbuts d’exécution définis par l’utilisateur de type taille avec les versions Xcode antérieures à 4.3
MainStoryboard.storyboard

Si vous aussi vous obtenez cette erreur, il est simple à corriger: sélectionnez le Storyboard dans le navigateur de projet et affichez l’ Inspecteur de fichiers . Recherchez / développez la section du document Interface Builder et vous trouverez une liste déroulante pour le développement . Assurez-vous que ceci est défini sur Xcode 4.3

Avec Autolayout (iOS6 +), vous pouvez éviter de définir contentSize . Définissez les contraintes suivantes à la place:

1. Épinglez le haut de la vue de défilement au haut de son enfant le plus haut.
2. Et épinglez le bas au bas de son enfant le plus bas.

Vous pouvez le faire en utilisant uniquement Interface Builder, accédez à Identity Inspector (le troisième onglet Inspecteur) et ajoutez un nouvel atsortingbut User Defined Runtime avec

• Chemin de clé: contentSize
• Type: Taille
• Valeur: {largeur, hauteur}

Il existe maintenant un moyen de faire défiler UIScrollView sans quitter Storyboard :

1. Sélectionnez le UIScrollView dans le storyboard, accédez à l’ inspecteur de taille et modifiez la valeur inférieure (ou toute autre valeur à modifier) ​​dans la section Content Insets à la hauteur de la zone de contenu.
2. Maintenant, accédez à l’ inspecteur d’identité et créez un nouvel atsortingbut d’exécution défini par l’utilisateur (en cliquant sur le bouton +) et nommez-le contentSize . Peu importe le type ou la valeur que vous remplissez (vous pouvez même laisser leur valeur par défaut).

Cela fera fonctionner correctement UIScrollView , même si je ne sais pas pourquoi la deuxième étape est nécessaire (j’ai découvert par hasard). 🙁

Une des approches que j’ai employées dans le passé est de faire glisser la vue de défilement de son contenu contenant la vue dans le générateur d’interface, et de définir sa taille réelle en fonction de la taille du contenu.

Ce qui n’est pas nécessairement évident dans le générateur d’interfaces, c’est que vous pouvez avoir des vues non associées stockées dans le nib, mais qui ne font pas partie de la vue principale du nib.

Dans la vue où vous voulez que la scrollview soit active, placez un UIView simple, que vous utilisez comme espace réservé. (c’est simplement pour que vous puissiez concevoir visuellement son emplacement. Si vous utilisez uniquement la vue entière, vous pouvez ignorer cette étape et utiliser le deuxième extrait de code fourni à la fin de cette réponse).

vous pouvez ensuite remplir la vue de défilement avec des contrôles, en la définissant visuellement comme vous le souhaitez. donnez à la fois l’espace réservé et les propriétés scrollview à l’intérieur de votre contrôleur de vue pour pouvoir y accéder lors de l’exécution.

à l’exécution, dans – (void) viewDidLoad

 scrollView.contentSize = scrollView.frame.size; scrollView.frame = placeholder.frame; [placeholder.superview addSubView:scrollView]; [placeholder removeFromSuperview]; 

alternativement (si vous n’avez pas utilisé d’espace réservé):

 CGRect f = self.view.frame; scrollView.contentSize = f.size; f.origin.x = 0; f.origin.y = 0; scrollView.frame = f; [self.view addSubView:scrollView]; 

Enfin, si vous “perdez” votre vue de défilement dans le générateur d’interface (il est possible de la fermer pour qu’elle disparaisse de la grid de conception), ne paniquez pas. il suffit de cliquer dessus dans la liste d’objects à gauche de la grid de conception.

Dans Xcode 4.5 à l’aide d’Autolayout, je n’ai pas de section Content Insets dans mon inspecteur de taille. J’ai donc dû l’append sous les atsortingbuts d’exécution définis par l’utilisateur, puis cela a fonctionné correctement.

Ce que vous ajoutez dans “Atsortingbuts d’exécution définis par l’utilisateur” est keyPath == contentInset qui est de type “Rect” (UIEdgeInsets, qui a la même entrée qu’un Rect) et est défini comme {top, left}, {bottom, right}. ContentSize définit uniquement la région de la fenêtre de défilement. contentInset définit la zone de défilement.

J’espère que cela aide quelqu’un dans la même situation.

Bon nombre des réponses ci-dessus sont trompeuses ou dépassées. À partir de 2017 (peut-être beaucoup plus tôt), le générateur d’interface prend en charge les vues défilantes avec un contenu de taille automatique. L’astuce est que XCode donne une signification spéciale non standard aux contraintes entre la scrollview et le contenu à l’intérieur. Ces contraintes “internes” n’affecteront pas réellement la taille du contenu comme vous vous en doutez.

Cela signifie que vous pouvez, par exemple, placer votre défilement au bas de la vue principale avec une marge de zéro et afficher le contenu de votre scrollview au bas de la vue de défilement avec une marge nulle, mais le contenu ne sera pas réellement étiré. Au lieu de cela, le contenu aura sa taille auto-déterminée (plus bas) et ce sera aussi la taille de la zone de défilement dans la vue de défilement.

Pensez-y comme ceci – Il existe une asymésortinge dans la liaison des contraintes à une vue de défilement: Les contraintes de la vue de défilement au monde “extérieur” (parent) déterminent la taille et la position de la vue de défilement comme d’habitude. Mais les contraintes “à l’intérieur” de la vue de défilement définissent réellement la taille et la position de la zone de défilement de la vue de défilement, en la liant au contenu.

Cela n’est absolument pas évident car lorsque vous définissez les contraintes, XCode suggérera toujours l’espacement actuel et il se peut que vous ne changiez jamais intentionnellement les contraintes d’entrée et de sortie d’une manière qui est en conflit. Mais vous pouvez et ils ont la signification décrite ci-dessus: l’un contrôle la disposition de défilement et l’autre contrôle la taille de la zone de contenu défilante.

Je suis tombé par hasard sur ce sujet et en voyant comment cela semblait fonctionner, je suis arrivé à cet article qui l’explique complètement et cite la source de documents Apple pour cela:

https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/

Une dernière information critique sur la taille autodéterminée du contenu: vous pouvez avoir l’impression que vous êtes dans un piège parce que vous taillez normalement votre contenu à la largeur de la vue parent, mais dans ce cas, le parent est la vue de défilement et comme décrit ci-dessus – la contrainte n’affectera pas la taille de votre contenu. La réponse ici est de vous rappeler que vous pouvez contraindre des éléments à des éléments qui ne sont pas directement voisins dans votre hiérarchie de vues: par exemple, vous pouvez définir la largeur de votre vue de contenu à la largeur de la vue principale pour toi.

Si vous cliquez sur l’icône Propriétés d’un View Controller dans Interface Builder, vous pouvez définir une taille “Freeform” en mésortingques simulées et modifier la taille de la vue principale pour obtenir la taille de contenu souhaitée.

De cette façon, vous pouvez créer le contenu de votre ScrollView comme s’il s’agissait d’une grande vue. Comme il ne s’agit que d’une mesure simulée, votre View Controller sera redimensionné aux limites de la fenêtre lorsqu’il est chargé.

La configuration d’un UIScrollView via Interface Builder n’est pas intuitive. Voici ma liste de contrôle pour le configurer:

1. Sélectionnez le fichier XIB de UIViewController. Dans “Inspecteur d’identité” du générateur d’interface, remplacez UIView par le type de classe UIScrollView.

2. Sous “File Inspector”, décochez Autolayout

3. Sous “Inspecteur des atsortingbuts”, changez la taille en Freeform. Vous pouvez ensuite étirer la vue de défilement manuellement ou vous pouvez spécifier une largeur et une hauteur personnalisées sous “Inspecteur de taille”.

4. Dans “Identity Inspector”, ajoutez un nouvel atsortingbut d’exécution défini par l’utilisateur appelé “contentSize” de type “Size” et remplacez-le par une valeur telle que {320, 1000}. Vous ne pouvez plus définir ce programme par programmation et avez donc besoin de cette étape pour que l’affichage du défilement sache que le contenu de la vue de défilement est plus grand que la fenêtre.

Supprimez simplement la mise en forme automatique sur votre scrollview. alors le code est aussi simple que cela:

 scrollviewName.contentSize = CGSizeMake(0, 650); 

Il suffit de créer une propriété iboulet sur le fichier .h puis de synthétiser sur le fichier .m. Assurez-vous que le défilement est activé.

Oui, st3fan a raison, la propriété contentSize de UIScrollView doit être définie. Mais vous ne devez pas désactiver l’autolayout à cette fin. Vous pouvez facilement configurer contentSize de UIScrollView avec autolayout dans IB uniquement, sans aucun code.

Il est important de comprendre que lorsque vous utilisez autolayout contentSize de UIScrollView n’est pas défini directement, il est calculé en fonction des contraintes de toutes les sous-vues de UIScrollView. Et tout ce dont vous avez besoin est de fournir des contraintes appropriées pour les sous-vues pour les deux directions.

Par exemple, si vous n’avez qu’une seule sous-vue, vous pouvez définir sa hauteur et son espace de haut en bas à superview (ie scrollView dans notre cas) contentSize.height est calculé comme sum

 Vertical Space (aSubview.top to Superview.top) + aSubview.height + Vertical Space (aSubview.top to Superview.top) 

contentSize.width est calculé de la même manière à partir de contraintes horizontales.

S’il y a trop peu de contraintes pour calculer contentSize, un petit bouton rouge apparaît à proximité de l’élément View Controller Scene pour informer de l’ambiguïté de la mise en page.

S’il existe de nombreuses sous-vues, il peut s’agir d’une “chaîne” de contraintes: sous-vue de haut en bas, hauteurs et espaces entre les sous-vues et sous-vue la plus basse comme dans Danyal Aytekin .

Mais dans la pratique, dans la plupart des cas, il est plus pratique d’append une vue vide avec la taille requirejse et de définir des espaces en haut, gauche, bas, droit de scrollView à 0. Vous pouvez utiliser cette vue en tant que “vue de contenu” Sur cette page ou si vous avez déjà de nombreuses sous-vues et que vous ne voulez pas les déplacer et configurer à nouveau la disposition, vous pouvez append cette vue auxiliaire aux sous-vues existantes et la masquer.

Pour faire défiler scrollView calculé contentSize doit être supérieur à la taille scrollView.

Vous pouvez avoir UIScrollView dans StoryBoard avec Autolayouts. Fondamentalement, de quoi avez-vous besoin est:

1. Ajouter UIScrollView
2. Ajouter toutes les contraintes (comme les encarts du haut, de gauche, de droite, des bords inférieurs)
3. Ajouter un ‘conteneur’ UIView à UIScrollView
4. Si vous ne voulez que le défilement à une direction (par exemple, vertical): définissez la hauteur explicitement (pour l’instance, 600) et la largeur du lien à la largeur de UIScrollView.
5. Si vous souhaitez un défilement bidirectionnel, définissez simplement la largeur et la hauteur.

Voici une solution pour concevoir ScrollView avec un contenu plus grand que l’écran entièrement dans Storyboard (enfin, presque entièrement, vous devrez également append une seule ligne de code)

https://stackoverflow.com/a/19476991/1869369

Je trouve un moyen plus pratique.

1: Mettez à l’échelle la taille de la vue de défilement pour contenir toutes les ui qui s’y trouvent.

2: Ajouter un iboutlet de la vue de défilement.

3: Dans viewDidLoad, enregistrez le frame.size de la vue de défilement.
(par exemple, _scrollSize = _scrollView.frame.size;)

4: Dans viewWillAppear, définissez le contentSize par le CGSize que vous avez enregistré auparavant.
(par exemple, _scrollView.contentSize = _scrollSize;)

5: Fait ~

1. Ajouter UIViewController
2. Dans UIViewController ‘Atsortingbute Inspector -> la taille de l’ensemble des mésortingques simulées Freeform
3. Dans UIViewController ‘Inspecteur de taille -> View Controller’ définir la hauteur 800
4. Ajouter UIScrollView dans UIViewController
5. Ajoutez toutes les contraintes à UIScrollView (haut, gauche, droite, bas) et ajoutez l’alignement X = center
6. Ajouter UIView dans UIScrollView
7. Ajoutez toutes les contraintes à UIView (en haut, à gauche, à droite, en bas) et ajoutez l’alignement X = center. Oui, comme pour UIScrollView dans # 3, mais pour UIView
8. Ajouter une contrainte de hauteur à UIView. Par exemple 780
9. Courir

Créer un nouveau projet Xcode

Naviguez jusqu’au fichier Main.storyboard

Sélectionnez ScrollView dans la bibliothèque d’objects.

Définir le cadre pour le ScrollView.

Ajoutez une autre vue à la vue déroulante et conservez le même cadre que celui de ScrollView.

Maintenant, pour définir dynamicment sa hauteur et sa largeur, vous pouvez configurer un UIScrollView à l’aide de la mise en forme automatique dans XIB.