UIScrollView pagination horizontale comme les onglets Mobile Safari

Mobile Safari vous permet de changer de page en entrant une sorte de vue de pagination horizontale UIScrollView avec un contrôle de page en bas.

J'essaie de reproduire ce comportement particulier où un UIScrollView à défilement horizontal montre une partie du contenu de la vue suivante.

L'exemple fourni par Apple: PageControl montre comment utiliser un UIScrollView pour la pagination horizontale, mais toutes les vues occupent toute la largeur de l'écran.

Comment obtenir un UIScrollView pour afficher du contenu de la vue suivante comme le fait Safari mobile?

Un UIScrollViewavec la pagination activée s'arrêtera à des multiples de sa largeur (ou hauteur) de cadre. La première étape consiste donc à déterminer la largeur souhaitée de vos pages. Faites que la largeur du UIScrollView. Ensuite, définissez les tailles de votre sous-vue, quelle que soit la taille dont vous avez besoin, et définissez leurs centres en fonction de multiples de la UIScrollViewlargeur de.

Ensuite, puisque vous voulez voir les autres pages, bien sûr, mis clipsToBoundsà NOcomme mhjoy déclaré. La partie astuce consiste maintenant à le faire défiler lorsque l'utilisateur commence le glissement en dehors de la plage du UIScrollViewcadre de. Ma solution (lorsque j'ai dû le faire très récemment) était la suivante:

Créez une UIViewsous - classe (c'est-à-dire ClipView) qui contiendra les UIScrollViewet ses sous-vues. Essentiellement, il devrait avoir le cadre de ce que vous supposeriez UIScrollViewqu'il aurait dans des circonstances normales. Placez le UIScrollViewau centre du ClipView. Assurez-vous que le ClipView's clipsToBoundsest défini sur YESsi sa largeur est inférieure à celle de sa vue parent. En outre, le ClipViewnécessite une référence au UIScrollView.

La dernière étape consiste à remplacer - (UIView *)hitTest:withEvent:à l'intérieur du fichier ClipView.

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
  return [self pointInside:point withEvent:event] ? scrollView : nil;
}

Cela élargit fondamentalement la zone tactile de la UIScrollViewau cadre de la vue de son parent, exactement ce dont vous avez besoin.

Une autre option serait de sous UIScrollView-classer et de remplacer sa - (BOOL)pointInside:(CGPoint) point withEvent:(UIEvent *) eventméthode, mais vous aurez toujours besoin d'une vue de conteneur pour effectuer le découpage, et il peut être difficile de déterminer quand retourner en YESfonction uniquement du UIScrollViewcadre de.

REMARQUE: vous devriez également jeter un oeil à hitTest: withEvent: modification de Juri Pakaste si vous rencontrez des problèmes avec l'interaction de l'utilisateur de sous-vue.

La ClipViewsolution ci-dessus a fonctionné pour moi, mais j'ai dû faire une -[UIView hitTest:withEvent:]implémentation différente . La version d'Ed Marty ne fonctionnait pas avec les vues de défilement verticales que j'ai à l'intérieur de l'horizontale.

La version suivante a fonctionné pour moi:

-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent*)event
{
    UIView* child = nil;
    if ((child = [super hitTest:point withEvent:event]) == self)
        return self.scrollView;     
    return child;
}

Définissez la taille du cadre de scrollView comme la taille de vos pages serait:

[self.view addSubview:scrollView];
[self.view addGestureRecognizer:mainScrollView.panGestureRecognizer];

Vous pouvez maintenant effectuer un panoramique self.viewet le contenu de scrollView défilera.
Utilisez également scrollView.clipsToBounds = NO;pour éviter de couper le contenu.

J'ai fini par utiliser le UIScrollView personnalisé moi-même car c'était la méthode la plus rapide et la plus simple qui me semblait. Cependant, je n'ai vu aucun code exact, donc je pensais partager. Mes besoins étaient pour un UIScrollView qui avait un petit contenu et donc le UIScrollView lui-même était petit pour obtenir l'effet de pagination. Comme le message l'indique, vous ne pouvez pas faire glisser votre doigt. Mais maintenant vous pouvez.

Créez une classe CustomScrollView et une sous-classe UIScrollView. Ensuite, tout ce que vous avez à faire est d'ajouter ceci dans le fichier .m:

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
  return (point.y >= 0 && point.y <= self.frame.size.height);
}

Cela vous permet de faire défiler d'un côté à l'autre (horizontal). Ajustez les limites en conséquence pour définir votre zone tactile de balayage / défilement. Prendre plaisir!

J'ai fait une autre implémentation qui peut renvoyer le scrollview automatiquement. Il n'est donc pas nécessaire d'avoir un IBOutlet qui limitera la réutilisation dans le projet.

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if ([self pointInside:point withEvent:event]) {
        for (id view in [self subviews]) {
            if ([view isKindOfClass:[UIScrollView class]]) {
                return view;
            }
        }
    }
    return nil;
}

J'ai une autre modification potentiellement utile pour l'implémentation de ClipView hitTest. Je n'aimais pas avoir à fournir une référence UIScrollView au ClipView. Mon implémentation ci-dessous vous permet de réutiliser la classe ClipView pour étendre la zone de test de succès de quoi que ce soit, sans avoir à lui fournir une référence.

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (([self pointInside:point withEvent:event]) && (self.subviews.count >= 1))
    {
        // An extended-hit view should only have one sub-view, or make sure the
        // first subview is the one you want to expand the hit test for.
        return [self.subviews objectAtIndex:0];
    }

    return nil;
}

J'ai implémenté la suggestion de vote positif ci-dessus, mais UICollectionViewj'utilisais tout ce qui sortait du cadre de l'écran. Cela faisait que les cellules voisines n'étaient rendues hors limites que lorsque l'utilisateur faisait défiler vers elles, ce qui n'était pas idéal.

Ce que j'ai fini par faire, c'est émuler le comportement d'un scrollview en ajoutant la méthode ci-dessous au délégué (ou UICollectionViewLayout).

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{    
  if (velocity.x > 0) {
    proposedContentOffset.x = ceilf(self.collectionView.contentOffset.x / pageSize) * pageSize;
  }
  else {
    proposedContentOffset.x = floorf(self.collectionView.contentOffset.x / pageSize) * pageSize;
  }

  return proposedContentOffset;
}

Cela évite entièrement la délégation de l'action de balayage, ce qui était également un bonus. Le UIScrollViewDelegatea une méthode similaire appelée scrollViewWillEndDragging:withVelocity:targetContentOffset:qui pourrait être utilisée pour paginer UITableViews et UIScrollViews.

Activez le déclenchement d'événements de tap sur les vues enfants de la vue de défilement tout en prenant en charge la technique de cette question SO. Utilise une référence à la vue de défilement (self.scrollView) pour la lisibilité.

- (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    UIView *hitView = nil;
    NSArray *childViews = [self.scrollView subviews];
    for (NSUInteger i = 0; i < childViews.count; i++) {
        CGRect childFrame = [[childViews objectAtIndex:i] frame];
        CGRect scrollFrame = self.scrollView.frame;
        CGPoint contentOffset = self.scrollView.contentOffset;
        if (childFrame.origin.x + scrollFrame.origin.x < point.x + contentOffset.x &&
            point.x + contentOffset.x < childFrame.origin.x + scrollFrame.origin.x + childFrame.size.width &&
            childFrame.origin.y + scrollFrame.origin.y < point.y + contentOffset.y &&
            point.y + contentOffset.y < childFrame.origin.y + scrollFrame.origin.y + childFrame.size.height
        ){
            hitView = [childViews objectAtIndex:i];
            return hitView;
        }
    }
    hitView = [super hitTest:point withEvent:event];
    if (hitView == self)
        return self.scrollView;
    return hitView;
}

Ajoutez ceci à votre vue enfant pour capturer l'événement tactile:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

(Ceci est une variante de la solution de user1856273. Nettoyé pour plus de lisibilité et incorporé le correctif de bogue de Bartserk. J'ai pensé à modifier la réponse de user1856273 mais c'était un changement trop important à faire.)

ma version En appuyant sur le bouton posé sur le parchemin - travail =)

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    UIView* child = nil;
    for (int i=0; i<[[[[self subviews] objectAtIndex:0] subviews] count];i++) {

        CGRect myframe =[[[[[self subviews] objectAtIndex:0] subviews]objectAtIndex:i] frame];
        CGRect myframeS =[[[self subviews] objectAtIndex:0] frame];
        CGPoint myscroll =[[[self subviews] objectAtIndex:0] contentOffset];
        if (myframe.origin.x < point.x && point.x < myframe.origin.x+myframe.size.width &&
            myframe.origin.y+myframeS.origin.y < point.y+myscroll.y && point.y+myscroll.y < myframe.origin.y+myframeS.origin.y +myframe.size.height){
            child = [[[[self subviews] objectAtIndex:0] subviews]objectAtIndex:i];
            return child;
        }


    }

    child = [super hitTest:point withEvent:event];
    if (child == self)
        return [[self subviews] objectAtIndex:0];
    return child;
    }

mais seul [[self subviews] objectAtIndex: 0] doit être un scroll

Voici une réponse Swift basée sur la réponse d'Ed Marty, mais incluant également la modification par Juri Pakaste pour permettre les tapotements de boutons, etc. dans la vue de défilement.

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    let view = super.hitTest(point, with: event)
    return view == self ? scrollView : view
}