iOS => UIScrollView

Créer un UIScrollView

Créez une instance de UIScrollView avec un CGRect tant CGRect .

Rapide

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

Objectif c

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

Défilement Afficher la taille du contenu

La propriété contentSize doit être définie sur la taille du contenu défilant. Ceci spécifie la taille de la zone déroulante. Le défilement est visible lorsque la zone défilante, c.-à-d. contentSize est plus grande que la taille de l'image UIScrollView .

Avec Autolayout:

Lorsque le contenu de la vue de défilement est configuré avec autolayout, il doit être explicitement dimensionné verticalement et horizontalement et les 4 arêtes doivent être épinglées à la vue de défilement contenant. De cette façon, contentSize est calculé automatiquement en fonction du contenu de la vue de défilement et est également mis à jour lorsque la disposition du contenu est modifiée.

Manuellement:

Rapide

scrollview.contentSize = CGSize(width: 640, height: 800)

Objectif c

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView avec mise en forme automatique

Étapes simples pour utiliser scrollview avec autolayout.

Créer un nouveau projet avec une application à vue unique
Sélectionnez le viewcontroller par défaut et changez sa taille d'écran en iPhone-4inch à partir de l'inspecteur d'attributs.
Ajoutez une vue de défilement à la vue de votre viewcontroller comme suit et définissez la couleur d'arrière-plan sur bleu

Ajoutez des contraintes comme indiqué ci-dessous image

Qu'est-ce que cela va faire, il suffit de coller tous les bords de scrollview à la vue de viewcontroller

Scénario 1:

Maintenant, disons que notre contenu est énorme, et nous voulons qu'il défile horizontalement aussi bien que verticalement.

Pour ça,

Ajoutez un UIView à la vue de défilement du cadre (0,0,700,700). Donnez-lui une couleur de fond orange pour l'identifier différemment.

Vient ensuite la partie importante, il faut la faire défiler horizontalement et verticalement.

Sélectionnez la vue orange et ajoutez les contraintes suivantes

Laissez-moi vous expliquer ce que nous avons fait dans l'étape ci-dessus.

Nous avons fixé la hauteur et la largeur à 700.
Nous définissons un espace à scrollview = 0 qui indique à la vue de défilement que le contenu est défilable horizontalement.
Nous définissons l'espace du bas sur scrollview = 0 qui indique à la vue de défilement que le contenu est défilable verticalement.

Maintenant, lancez le projet et vérifiez.

Scénario 2: considérons un scénario où nous savons que la largeur du contenu sera identique à la largeur de défilement, mais que la hauteur est supérieure à celle de scrollview.

Suivez les étapes pour faire défiler le contenu verticalement.

Supprimez la contrainte de largeur dans le cas ci-dessus.
Modifiez la largeur de la vue orange pour qu'elle corresponde à la largeur de la vue de défilement.
Faites glisser Ctrl depuis la vue orange pour faire défiler la vue et ajouter une contrainte de largeur égale .

Et fait!!! Il suffit de lancer et de vérifier s'il défile verticalement

Scénario 3:

Maintenant, nous voulons faire défiler uniquement horizontalement et non verticalement.

Suivez les étapes pour faire défiler horizontalement le contenu.

Annuler toutes les modifications pour obtenir des contraintes comme ci-dessous (c.-à-d. Restaurer les contraintes d'origine qui ont atteint le défilement vertical et horizontal )

Vérifiez l'image de la vue orange, qui devrait être (0,0,700,700)
Supprimer la contrainte de hauteur de la vue orange.
Modifiez la hauteur de la vue orange pour qu'elle corresponde à la hauteur de défilement.
Tout en maintenant la touche Ctrl enfoncée, faites glisser la vue orange pour faire défiler la vue et ajouter une contrainte de hauteur égale .

Et fait!!! Il suffit de lancer et de vérifier s'il défile verticalement

Défilement du contenu avec mise en forme automatique activée

Ce projet est un exemple autonome entièrement réalisé dans Interface Builder. Vous devriez pouvoir le parcourir en 10 minutes ou moins. Ensuite, vous pouvez appliquer les concepts que vous avez appris à votre propre projet.

Ici, j'utilise juste UIView s mais ils peuvent représenter n'importe quelle vue que vous aimez (c.-à-d. Bouton, étiquette, etc.). J'ai également choisi le défilement horizontal car les captures d'écran du storyboard sont plus compactes pour ce format. Les principes sont les mêmes pour le défilement vertical.

Concepts clés

UIScrollView ne doit utiliser qu'une seule sous-vue. Ceci est un 'UIView' qui sert de vue de contenu pour contenir tout ce que vous souhaitez faire défiler.
Rendre la vue du contenu et le parent de la vue de défilement avoir des hauteurs égales pour le défilement horizontal. (Largeurs égales pour le défilement vertical)
Assurez-vous que tout le contenu défilable a une largeur définie et est épinglé de tous les côtés.

Lancer un nouveau projet

Il ne peut s'agir que d'une application à vue unique.

Storyboard

Dans cet exemple, nous allons faire un défilement horizontal. Sélectionnez le View Controller, puis choisissez Freeform dans l'inspecteur de taille. Faites la largeur 1,000 et la hauteur 300 . Cela nous donne juste la place dans le storyboard pour ajouter du contenu qui défile.

Ajouter une vue de défilement

Ajoutez un UIScrollView et épinglez les quatre côtés à la vue racine du contrôleur de vue.

Ajouter une vue de contenu

Ajoutez un UIView tant que sous-vue à la vue de défilement. Ceci est la clé. N'essayez pas d'ajouter beaucoup de sous-vues à la vue de défilement. Ajoutez simplement un seul UIView . Ce sera votre affichage de contenu pour les autres vues que vous souhaitez faire défiler. Épinglez la vue de contenu à la vue de défilement sur les quatre côtés.

Hauteurs égales

Désormais, dans la structure du document, la commande clique à la fois sur la vue du contenu et sur la vue parente de la vue de défilement afin de les sélectionner toutes les deux. Ensuite, définissez les hauteurs comme étant égales (contrôlez </ kbd faites glisser de l’affichage de contenu vers l’affichage de défilement>). C'est aussi la clé. Comme nous faisons défiler horizontalement, la vue du contenu de la vue de défilement ne saura pas à quelle hauteur elle doit être, sauf si nous la configurons de cette manière.

Remarque:

Si nous faisions défiler le contenu verticalement, nous définirions la largeur de la vue de contenu comme étant égale à la largeur du parent de la vue de défilement.

Ajouter du contenu

Ajoutez trois UIView s et donnez-leur toutes les contraintes. J'ai utilisé 8 marges de points pour tout.

Contraintes:

Vue verte: épinglez les bords supérieur, gauche et inférieur. Faites la largeur 400.
Vue rouge: épinglez les bords supérieur, gauche et inférieur. Faites la largeur 300.
Vue violette: épinglez les quatre bords. Faites la largeur quel que soit l'espace restant (268 dans ce cas).

La définition des contraintes de largeur est également la clé pour que la vue de défilement connaisse la largeur de son affichage de contenu.

Fini

C'est tout. Vous pouvez exécuter votre projet maintenant. Il devrait se comporter comme l'image défilante en haut de cette réponse.

Une étude plus approfondie

Activer / Désactiver le défilement

La propriété scrollEnabled stocke une valeur Boolean qui détermine si le défilement est activé ou non.
Si la valeur de cette propriété est true / YES, le défilement est activé, sinon pas.La valeur par défaut est true

Rapide

scrollview.isScrollEnabled = true

Objectif c

scrollview.scrollEnabled = YES;

Zoom avant / arrière UIImageView

Créer une instance UIScrollView

let scrollview = UIScrollView.init(frame: self.view.bounds)

Et puis définissez ces propriétés:

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate

Pour effectuer un zoom avant ou arrière sur l'image, vous devez spécifier la quantité de zoom avant et arrière que l'utilisateur peut utiliser. Nous faisons cela en définissant les valeurs des propriétés minimumZoomScale et maximumZoomScale de la vue de minimumZoomScale . Les deux sont définis sur 1.0 par défaut.

Et zoomScale à 1.0 qui spécifie le facteur de zoom pour le zoom minimum et maximum.

Pour prendre en charge le zoom, vous devez définir un délégué pour votre vue défilement. L'objet délégué doit être conforme au protocole UIScrollViewDelegate . Cette classe de délégué doit implémenter la méthode viewForZoomingInScrollView() et renvoyer la vue pour zoomer.

Modifiez votre ViewController comme indiqué

class ViewController: UIViewController, UIScrollViewDelegate

Ajoutez ensuite la fonction de délégué suivante à la classe.

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

Maintenant, créez une instance UIImageView

Faire de cette variable une variable de classe

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

Et puis l'ajouter à scrollview

scrollView?.addSubview(imageView)

Référence

Détection du moment où UIScrollView a fini de défiler avec les méthodes déléguées

scrollViewDidEndDecelerating: indique au délégué que la vue de défilement a cessé de ralentir le mouvement de défilement.

Objectif c:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

Rapide:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

Restreindre le sens du défilement

Vous pouvez restreindre les instructions que l'utilisateur peut faire défiler à l'aide du code suivant:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

Chaque fois que l'utilisateur fait défiler l'axe des x, le décalage du contenu de scrollView est remis à 0.
Vous pouvez évidemment changer les x s en y s et verrouiller ainsi la direction pour être horizontale uniquement.

Vous devez également vous assurer de placer ce code dans la méthode déléguée scrollViewDidScroll(_ scrollView: UIScrollView) . Sinon, vous ne pourrez pas le faire fonctionner.

Veillez également à avoir importé UIScrollViewDelegate dans votre déclaration de classe, comme ceci:

class ViewController: UIViewController, UIScrollViewDelegate

... et définissez le délégué de scrollView sur une méthode comme viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

iOS
UIScrollView

Recherche…

Créer un UIScrollView

Défilement Afficher la taille du contenu

ScrollView avec mise en forme automatique

Défilement du contenu avec mise en forme automatique activée

Concepts clés

Lancer un nouveau projet

Storyboard

Fini

Une étude plus approfondie

Activer / Désactiver le défilement

Zoom avant / arrière UIImageView

Maintenant, créez une instance UIImageView

Détection du moment où UIScrollView a fini de défiler avec les méthodes déléguées

Objectif c:

Rapide:

Restreindre le sens du défilement