129 votes

Comment utiliser UIScrollView dans Storyboard

J'ai une vue par défilement avec un contenu de 1 000 pixels de haut et j'aimerais pouvoir le disposer pour faciliter la conception sur le story-board. Je sais que cela peut être fait par programme, mais je veux vraiment pouvoir le voir visuellement. Chaque fois que je mets une vue défilante sur un contrôleur de vue, elle ne défilera pas. Est-il possible de le faire fonctionner comme je le souhaite ou dois-je le faire dans le code?

149voto

Alex Reynolds Points 1931

Je vais répondre à ma propre question car je viens de passer 2 heures pour trouver la solution et StackOverflow permet à ce QA style.

Début à la fin, ici, est de savoir comment le faire fonctionner dans la table de montage séquentiel.

1: aller à vous-vue-contrôleur et cliquez sur Attribute Inspector.

2: modifier la Taille d' Freeform , au lieu de les Déduire.

3: Aller à la vue principale sur la table de montage séquentiel, pas votre scrollview, mais plutôt le haut niveau de la vue.

4: Cliquez sur Size Inspector , et de l'afficher à la taille désirée. J'ai changé ma hauteur à 1000.

Maintenant, vous allez voir que vous storyboard a votre point de vue de l'installation de sorte que vous pouvez voir la totalité de la hauteur de votre faites défiler jusqu'à la conception.

5: Déposer sur une scrollview et de l'étirer, de sorte qu'il prend de la vue. Vous devriez maintenant avoir une scrollview avec la taille de 320,1000 assis sur une vue dans votre vue-contrôleur.

Maintenant nous avons besoin de faire défiler et de la nécessité de faire apparaître le contenu correctement.

6: Cliquez sur votre scrollview et cliquez sur Identity Inspector.

7: Ajouter un User Defined runtime attribute avec chemin d'accès clé de contentSize alors le type de la TAILLE et de la mettre dans votre taille du contenu. Pour moi, c'est (320, 1000).

Puisque nous voulons voir notre ensemble de défilement de la vue sur le storyboard nous avons tendu et il a un cadre de 320,1000 mais pour que cela fonctionne dans notre application, nous avons besoin de changer l'image de ce qui le visible scrollview sera.

8: Ajouter un runtime attribute avec chemin d'accès clé frame de Type RECT et 0,0,320,416.

Maintenant, quand nous exécutons notre application, nous aurons une visible scrollview a un cadre de 0,0,320, 416 et pouvez faire défiler vers le bas pour 1000. Nous sommes en mesure à la disposition de nos sous-vues et des images et autres joyeusetés dans le Storyboard juste la façon dont nous voulons qu'ils apparaissent. Ensuite, notre runtime attributs assurez-vous de l'afficher correctement. Tout cela sans 1 ligne de code.

43voto

Raja Rao Points 598

Voici les étapes qui ont travaillé pour moi sur iOS 7 et XCode 5.

  1. Faites glisser un ViewController (il est livré avec UIView "Affichage").

    1.1 Sélectionner "View Controller" et sélectionnez "Fichier Inspecteur" et décochez l'option "mise en page Automatique".

  2. Faites glisser un ScrollView (comme enfant de ViewController de UIView "Affichage")
  3. Sélectionnez le ScrollView et ouvert d'Identité "Inspecteur".
  4. Entrez "contentSize" pour le chemin d'accès clé. Sélectionnez "Taille" pour le Type. Et Entrez {320, 1000} pour la valeur.

    Remarque: l'Étape 4 est tout simplement dire que la barre de défilement, contient un peu de contenu dont la taille est 320x1000 unités. Le choix de contentSize va faire scroller travail.

  5. Sélectionnez Vue-Contrôleur, Sélectionnez "Attributs de l'Inspecteur", puis sélectionnez Libre à partir de la Taille.

    Remarque: l'étape 5 va nous permettre de modifier la taille de la "Vue" que le point de vue du contrôleur est livré avec.

  6. Sélectionnez "Affichage", puis sélectionnez "Taille de l'Inspecteur".

  7. Mettre la Largeur à 320 et la hauteur à 1000.

Note: 5, 6 et 7 est purement pour nous de voir étiré ou élargie, vue à l'intérieur de StoryBoard. Remarque: assurez-vous de désélectionner "Mise en page Automatique" à la Vue-Contrôleur.

Votre point de Vue de la hiérarchie devrait ressembler à: hierarchy

13voto

Whasssaaahhh Points 736

Après des heures d'essais et d'erreurs, j'ai trouvé un moyen très facile de mettre le contenu dans scrollviews qui sont 'hors champ'. Testé avec XCode 5 et iOS 7. Vous pouvez le faire presque entièrement dans le plan de montage, à l'aide de 2 petites astuces/solutions de contournement :

  1. faites glisser un viewcontroller sur votre storyboard
  2. faites glisser un scrollView sur ce viewController, pour la démo, vous pouvez laisser sa taille par défaut, couvrant la totalité de l'écran
  3. maintenant vient astuce 1 : avant d'ajouter n'importe quel élément de la scrollView, faites-la glisser dans une 'vue' (Ce point de vue sera plus grand que l'écran, et contient tous les sous-éléments comme des boutons, des étiquettes, ...appelons-le"joignant la vue')
  4. définir cette joignant la vue Y de taille dans la taille de l'inspecteur, par exemple, à 800
  5. placez-y une étiquette sur l'affichage de la vue, quelque part à la position Y de 200, le nom de label de 1'
  6. astuce 2 : assurez-vous que l' enfermant vue est sélectionné (pas la scrollView !), et jeu de il Y la position, par exemple, -250, de sorte que vous pouvez ajouter un élément qui est "en dehors" de l'écran
  7. déposer dans un label, quelque part au bas de l'écran, le nom de label de 2'. Ce label est en fait hors de l'écran'
  8. réinitialisation de la position Y de l'affichage de la vue à 0, vous ne vous verrez plus de l'étiquette 2, comme il a été placé près de l'écran

jusqu'à présent pour le storyboard de travail, maintenant, vous avez besoin d'ajouter une seule ligne de code dans le viewController "viewDidLoad" la méthode pour définir la scrollViews contenu, donc il contient l'intégralité de "enveloppant". Je n'ai pas trouver un moyen de le faire dans le Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Je pense qu'Apple devrait rendre cela plus facile dans la table de montage séquentiel, dans un TableViewController vous pouvez juste faire défiler à l'écran sous forme d'un Storyboard (juste ajouter les 20 cellules, et vous verrez que vous pouvez simplement faire défiler), cela devrait être possible avec un ScrollViewController trop.

8voto

Raja Rao Points 598

L'obtention de Défilement pour travailler dans iOS7 et mise en page Automatique dans iOS 7 et XCode 5.

En plus de ceci: http://stackoverflow.com/a/22489795/1553014

Apparemment, tout ce que nous devons faire est de:

  1. Ensemble de toutes les contraintes pour faire Défiler la Vue (c'est à dire corrigé de défilement d'abord la vue)

  2. Puis réglez la distance de scrollView contrainte de l'élément le plus bas pour faire défiler la vue (ce qui est le super vue).

Remarque: l'Étape 2 va dire storyboard, lorsque le dernier morceau de contenu se trouve à l'intérieur de Défilement de la vue.

7voto

yoninja Points 893

Pour cet exemple, j'ai décoché la fonctionnalité mise en page automatique de l'Interface builder. Et, je suis encore en utilisant (pour aucune raison du tout) relativement vieux 4.6.1 version de Xcode.

Commencez avec une vue contrôleur qui a un défilement de vue (la vue principale).

1: Ajouter un Conteneur de Vue, à partir de la Bibliothèque d'Objets, de défilement de la vue. Notez qu'un nouveau-vue-contrôleur est ajouté à la table de montage séquentiel et il est lié à la vue du contrôleur avec le défilement de l'affichage.

2: Sélectionnez le conteneur de vue et, sur la Taille de l'Inspecteur, de le rendre ancrage à gauche et en haut sans auto redimensionnement.

enter image description here

3: Changer sa hauteur à 1000. (1000 est utilisé pour cet exemple. Vous devez appliquer la valeur que vous avez besoin.)

4: Sélectionnez le nouveau-vue-contrôleur et, à partir des Attributs de l'Inspecteur, de changer la Taille de forme Libre.

enter image description here

5: Sélectionnez le point de vue de la nouvelle-vue-contrôleur et, sur la taille de l'Inspecteur, modifier la hauteur pour 1000 (qui est égal au conteneur de vue de la hauteur).

6: Pour votre test plus tard, toujours sur le point de vue de la nouvelle-vue-contrôleur, ajoutez une étiquette en haut et en bas de la vue.

7: Sélectionnez le défilement de la vue à partir de la vue d'origine contrôleur. Sur l'Identité de l'inspecteur, ajouter un attribut avec le chemin d'accès clé définie à contentSize, le type d'ensemble de la Taille, et de la valeur définie sur {320, 1000} (ou votre conteneur de vue de la taille).

enter image description here

8: Exécuter sur les 4 pouces de l'iPhone Simulator. Vous devriez être capable de défilement depuis le haut de l'étiquette jusqu'au fond de l'étiquette.

9: Exécuter sur le 3,5 pouces de l'iPhone Simulator. Vous devriez être capable de défilement depuis le haut de l'étiquette jusqu'au fond de l'étiquette.

Rappelez-vous que Xcode 4.6.1 ne peut se construire que pour iOS6 et ci-dessous. L'utilisation de cette approche et de construction pour iOS6, je suis toujours en mesure d'atteindre les mêmes résultats lorsque l'application est exécutée sur iOS7.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X