web-dev-qa-db-fra.com

Hauteur de contentView de UIScrollView en fonction du contenu interne à l'aide de Storyboard

Je suis en fait confronté à des difficultés pour rendre ma UIScrollView entièrement réactive en utilisant uniquement contraintes de storyboard.

Voici ma hiérarchie:

> - UIViewController
>  - UIView
>   - UIScrollView
>    - contentView
>     - module1View
>     - module2View
>     - module3View

Tous les modules sont utilisés pour afficher des graphiques. _ {Je veux qu'ils soient sensibles. Je veux que leur largeur soit égale à 100% de l'écran et que leur hauteur soit définie par un ratio ajouté à l'aide d'une contrainte. Les modules sont affichés les uns à côté des autres, comme des nouvelles dans un fil de nouvelles.

Ma question est la suivante: comment définissez-vous la hauteur contentView égale à la somme de tous les modules (module 1 + 2 + 3)?

En d'autres mots, je veux atteindre: 

  • Top of contentView = haut du module 1
  • Haut du module 2 = bas du module 1
  • Haut du module 2 = bas du module 2
  • Bas de contentView = bas du module 3

Pour réussir, je suis un tutoriel trouvé sur Internet. Voici les étapes que j'ai suivies:

  1. Définissez des contraintes UIScrollView pour définir son lieu et position _.
  2. Régler UIScrollViewhaut, bas, gauche et espacement droit au plus proche voisin de .
  3. Paramétrer la contrainte entre les modules pour les "empiler" les uns sur les autres .
  4. (JE SUIS BLOQUÉ ICI) Réglez le bas de la contentView au bas du Du module 3 pour permettre à la UIScrollview de défiler jusqu'à la fin du contenu.

J'ai essayé de forcer la hauteur de UIScrollView: Cela fonctionne mais il n'est pas réactif. Comme la hauteur du module est calculée selon un rapport, la hauteur du "module 1 + 2 + 3" varie en fonction de l'appareil.

J'ai essayé d'ajouter une contrainte du module 3 à contentView pour définir le bas du module 3 = bas de contentView. Toutes les contraintes deviennent rouges avec des avertissements partout.

Avez-vous une idée de la façon de définir la hauteur de contentView en fonction d'un contenu réactif? (Comme "envelopper le contenu d'une manière").

Merci d'avance pour votre aide !

iosobjective-cuiscrollviewxcode-storyboard
11
Tom Giraudet

J'ai pu obtenir des vues de défilement dynamiques fonctionnant entièrement à partir de storyboards, sans code, avec les étapes suivantes:

1) Dans le storyboard, ajoutez une vue de défilement et limitez ses bords aux bords de la vue principale ou de la manière appropriée.

2) Dans la vue de défilement, ajoutez un vieux UIView en tant que conteneur. Limitez-le sur les 4 bords de la vue de défilement, MAIS AUSSI ajoutez un largeur égale contrainte relative à la vue de défilement, et un hauteur égale contrainte à la vue de défilement

3) Très important: définissez une priorité basse pour la contrainte d'égale hauteur, par exemple. 250.

4) dans la vue du conteneur que vous avez ajoutée à l'étape 2, ajoutez vos 3 modules. Limitez le bord supérieur du premier module en haut de la vue du conteneur, contraignez le bord inférieur du dernier module en bas de la vue du conteneur et contraignez tous les modules intermédiaires au module précédent de la chaîne. Cela devrait vous donner votre chaîne de contraintes verticales ininterrompues à l'intérieur de la vue du conteneur. Vous devrez également ajouter les contraintes de positionnement/largeur appropriées à chaque module.

5) Construisez et courez! La taille du contenu de votre vue de défilement doit automatiquement être égale à la hauteur totale de tous les modules, plus l'espacement entre ceux-ci. Toute modification dynamique du contenu du module mettra à jour la taille du contenu de la vue de défilement via une mise en page automatique au lieu d'exiger du code explicite pour le calcul et la mise à jour.

40
Daniel Hall

Essayez de définir la hauteur de l'exécution des modules et d'ajouter une contrainte de mise en page automatique pour les modules par programme.

 #define kDeviceHeight                   [UIScreen mainScreen].bounds.size.height
 #define kDeviceWidth                    [UIScreen mainScreen].bounds.size.width

    - (void)viewDidLoad {

        [super viewDidLoad];
        [self setScrollViewHeight];

    }

    -(void)setScrollViewHeight{

        float module1_Height,module2_Height,module3_Height;// Calculate the height of modules over here and assign it to respective variables
        float viewVerticalSpacing = 5; // Provides space between two views
        float YAxis = 0;
        module1View.frame = CGRectMake(0, 0, kDeviceWidth, module1_Height);

        YAxis = YAxis + module1_Height + viewVerticalSpacing;
        module2View.frame = CGRectMake(0, YAxis, kDeviceWidth, module2_Height);

        YAxis = YAxis + module2_Height + viewVerticalSpacing;
        module3View.frame = CGRectMake(0, YAxis, kDeviceWidth, module3_Height);

        float scrollView_height = YAxis + module3_Height + viewVerticalSpacing;
        scroll_view.contentSize = CGSizeMake(kDeviceWidth, scrollView_height);
        scroll_view.frame = CGRectMake(0, 0, kDeviceWidth, kDeviceHeight);
    }
0
Komal

Pour moi, la solution de Daniel était très utile mais ne fonctionnait pas. Voici les étapes mises à jour:

1) Dans le storyboard, ajoutez une vue de défilement et limitez ses bords aux bords de la vue principale ou de la manière appropriée.

2) Dans la vue de défilement, ajoutez un vieux UIView en tant que conteneur. Limitez-le sur les 4 bords de la vue de défilement, MAIS AUSSI ajoutez une contrainte de largeur égale relative au parent (vue la plus élevée) de la vue de défilement et une contrainte de même hauteur au parent de la vue de défilement

3) Très important: définissez une priorité basse pour la contrainte d'égale hauteur, par exemple. 250.

0
Scaraux