Paginer UIScrollView par incréments inférieurs à la taille de trame

Question

J'ai une vue de défilement qui est la largeur de l'écran mais seulement environ 70 pixels de haut. Il contient de nombreuses icônes 50 x 50 (avec un espace autour d'elles) parmi lesquelles je souhaite que l'utilisateur puisse choisir. Mais je veux toujours que la vue de défilement se comporte de manière paginée, s'arrêtant toujours avec une icône au centre exact.

Si les icônes avaient la largeur de l'écran, ce ne serait pas un problème car la pagination de UIScrollView s'en occuperait. Mais parce que mes petites icônes sont bien inférieures à la taille du contenu, cela ne fonctionne pas.

J'ai déjà vu ce comportement dans une application appelée AllRecipes. Je ne sais juste pas comment faire.

Comment faire fonctionner la pagination par icône?

Answer 1

Essayez de faire en sorte que votre défilement soit inférieur à la taille de l'écran (dans le sens de la largeur), mais décochez la case "Clip Subviews" dans IB. Ensuite, superposez une vue transparente, userInteractionEnabled = NO au-dessus (à pleine largeur), qui remplace hitTest: withEvent: pour retourner votre vue de défilement. Cela devrait vous donner ce que vous cherchez. Voir cette réponse pour plus de détails.

Answer 2

Il existe également une autre solution qui est probablement un peu meilleure que de superposer la vue de défilement à une autre vue et de remplacer hitTest.

Vous pouvez sous-classer UIScrollView et remplacer son pointInside. Ensuite, la vue de défilement peut répondre aux touches en dehors de son cadre. Bien sûr, le reste est le même.

@interface PagingScrollView : UIScrollView {

    UIEdgeInsets responseInsets;
}

@property (nonatomic, assign) UIEdgeInsets responseInsets;

@end


@implementation PagingScrollView

@synthesize responseInsets;

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    CGPoint parentLocation = [self convertPoint:point toView:[self superview]];
    CGRect responseRect = self.frame;
    responseRect.Origin.x -= responseInsets.left;
    responseRect.Origin.y -= responseInsets.top;
    responseRect.size.width += (responseInsets.left + responseInsets.right);
    responseRect.size.height += (responseInsets.top + responseInsets.bottom);

    return CGRectContainsPoint(responseRect, parentLocation);
}

@end

Answer 3

Je vois beaucoup de solutions, mais elles sont très complexes. Un moyen beaucoup plus simple d'avoir de petites pages tout en conservant la zone de défilement est de réduire le défilement et de déplacer le scrollView.panGestureRecognizer à votre vue parent. Ce sont les étapes:

1. Réduisez la taille de scrollView

2. Assurez-vous que votre vue de défilement est paginée et ne coupe pas la sous-vue

3. Dans le code, déplacez le geste de défilement de la vue de défilement vers la vue du conteneur parent qui est pleine largeur:

    override func viewDidLoad() {
        super.viewDidLoad()
        statsView.addGestureRecognizer(statsScrollView.panGestureRecognizer)
    }

Answer 4

La réponse acceptée est très bonne, mais elle ne fonctionnera que pour la classe UIScrollView et aucun de ses descendants. Par exemple, si vous avez beaucoup de vues et que vous convertissez en UICollectionView, vous ne pourrez pas utiliser cette méthode, car la vue de collection supprimer les vues qui, selon elle, ne sont "pas visibles" "(donc même s'ils ne sont pas coupés, ils disparaîtront).

Le commentaire à ce sujet mentionne scrollViewWillEndDragging:withVelocity:targetContentOffset: est, à mon avis, la bonne réponse.

Ce que vous pouvez faire, c'est que dans cette méthode déléguée, vous calculez la page/l'index actuel. Ensuite, vous décidez si la vitesse et le décalage cible méritent un mouvement "page suivante". Vous pouvez vous rapprocher assez du comportement pagingEnabled.

note: Je suis généralement un développeur RubyMotion ces jours-ci, donc quelqu'un s'il vous plaît vérifier ce code Obj-C pour l'exactitude. Désolé pour le mélange de camelCase et snake_case, j'ai copié et collé une grande partie de ce code.

- (void) scrollViewWillEndDragging:(UIScrollView *)scrollView
         withVelocity:(CGPoint)velocity
         targetContentOffset:(inout CGPoint *)targetOffset
{
    CGFloat x = targetOffset->x;
    int index = [self convertXToIndex: x];
    CGFloat w = 300f;  // this is your custom page width
    CGFloat current_x = w * [self convertXToIndex: scrollView.contentOffset.x];

    // even if the velocity is low, if the offset is more than 50% past the halfway
    // point, proceed to the next item.
    if ( velocity.x < -0.5 || (current_x - x) > w / 2 ) {
      index -= 1
    } 
    else if ( velocity.x > 0.5 || (x - current_x) > w / 2 ) {
      index += 1;
    }

    if ( index >= 0 || index < self.items.length ) {
      CGFloat new_x = [self convertIndexToX: index];
      targetOffset->x = new_x;
    }
} 

Answer 5

- (void) scrollViewWillEndDragging:(UIScrollView *)scrollView
         withVelocity:(CGPoint)velocity
         targetContentOffset:(inout CGPoint *)targetOffset
{
    static CGFloat previousIndex;
    CGFloat x = targetOffset->x + kPageOffset;
    int index = (x + kPageWidth/2)/kPageWidth;
    if(index<previousIndex - 1){
        index = previousIndex - 1;
    }else if(index > previousIndex + 1){
        index = previousIndex + 1;
    }

    CGFloat newTarget = index * kPageWidth;
    targetOffset->x = newTarget - kPageOffset;
    previousIndex = index;
} 

kPageWidth est la largeur que vous voulez que votre page soit. kPageOffset est si vous ne voulez pas que les cellules soient alignées à gauche (c'est-à-dire si vous voulez qu'elles soient alignées au centre, définissez-la sur la moitié de la largeur de votre cellule). Sinon, il devrait être nul.

Cela permettra également de faire défiler une seule page à la fois.

Answer 6

Jetez un œil au -scrollView:didEndDragging:willDecelerate: méthode sur UIScrollViewDelegate. Quelque chose comme:

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    int x = scrollView.contentOffset.x;
    int xOff = x % 50;
    if(xOff < 25)
        x -= xOff;
    else
        x += 50 - xOff;

    int halfW = scrollView.contentSize.width / 2; // the width of the whole content view, not just the scroll view
    if(x > halfW)
        x = halfW;

    [scrollView setContentOffset:CGPointMake(x,scrollView.contentOffset.y)];
}

Ce n'est pas parfait - la dernière fois que j'ai essayé ce code, j'ai eu un comportement moche (sautant, si je me souviens bien) en revenant d'un parchemin élastique. Vous pouvez peut-être éviter cela en définissant simplement la propriété bounces de la vue de défilement sur NO.

Answer 7

J'ai essayé la solution ci-dessus qui superposait une vue transparente avec pointInside: withEvent: surchargé. Cela a plutôt bien fonctionné pour moi, mais est tombé en panne pour certains cas - voir mon commentaire. J'ai fini par implémenter la pagination moi-même avec une combinaison de scrollViewDidScroll pour suivre l'index de la page actuelle et scrollViewWillEndDragging: withVelocity: targetContentOffset et scrollViewDidEndDragging: willDecelerate pour s'accrocher à la page appropriée. Remarque, la méthode de fin sera uniquement disponible sur iOS5 +, mais est assez pratique pour cibler un décalage particulier si la vélocité! = 0. Plus précisément, vous pouvez dire à l'appelant où vous souhaitez que la vue de défilement atterrisse avec animation s'il y a de la vélocité dans un direction particulière.

Answer 8

Comme je ne semble pas encore autorisé à commenter, je vais ajouter mes commentaires à la réponse de Noah ici.

J'ai réussi à atteindre cet objectif grâce à la méthode décrite par Noah Witherspoon. J'ai contourné le comportement de saut en n'appelant tout simplement pas le setContentOffset: méthode lorsque la vue de défilement dépasse ses bords.

         - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
         {      
             // Don't snap when at the edges because that will override the bounce mechanic
             if (self.contentOffset.x < 0 || self.contentOffset.x + self.bounds.size.width > self.contentSize.width)
                 return;

             ...
         }

J'ai également constaté que j'avais besoin d'implémenter le -scrollViewWillBeginDecelerating: méthode dans UIScrollViewDelegate pour intercepter tous les cas.

Answer 9

Voici ma réponse. Dans mon exemple, un collectionView qui a un en-tête de section est le scrollView que nous voulons lui faire avec un effet isPagingEnabled personnalisé, et la hauteur de la cellule est une valeur constante.

var isScrollingDown = false // in my example, scrollDirection is vertical
var lastScrollOffset = CGPoint.zero

func scrollViewDidScroll(_ sv: UIScrollView) {
    isScrollingDown = sv.contentOffset.y > lastScrollOffset.y
    lastScrollOffset = sv.contentOffset
}

// 实现 isPagingEnabled 效果
func scrollViewWillEndDragging(_ sv: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let realHeaderHeight = headerHeight + collectionViewLayout.sectionInset.top
    guard realHeaderHeight < targetContentOffset.pointee.y else {
        // make sure that user can scroll to make header visible.
        return // 否则无法手动滚到顶部
    }

    let realFooterHeight: CGFloat = 0
    let realCellHeight = cellHeight + collectionViewLayout.minimumLineSpacing
    guard targetContentOffset.pointee.y < sv.contentSize.height - realFooterHeight else {
        // make sure that user can scroll to make footer visible
        return // 若有footer，不在此处 return 会导致无法手动滚动到底部
    }

    let indexOfCell = (targetContentOffset.pointee.y - realHeaderHeight) / realCellHeight
    // velocity.y can be 0 when lifting your hand slowly
    let roundedIndex = isScrollingDown ? ceil(indexOfCell) : floor(indexOfCell) // 如果松手时滚动速度为 0，则 velocity.y == 0，且 sv.contentOffset == targetContentOffset.pointee
    let y = realHeaderHeight + realCellHeight * roundedIndex - collectionViewLayout.minimumLineSpacing
    targetContentOffset.pointee.y = y
}

Answer 10

C'est la seule vraie solution au problème.

import UIKit

class TestScrollViewController: UIViewController, UIScrollViewDelegate {

    var scrollView: UIScrollView!

    var cellSize:CGFloat!
    var inset:CGFloat!
    var preX:CGFloat=0
    let pages = 8

    override func viewDidLoad() {
        super.viewDidLoad()

        cellSize = (self.view.bounds.width-180)
        inset=(self.view.bounds.width-cellSize)/2
        scrollView=UIScrollView(frame: self.view.bounds)
        self.view.addSubview(scrollView)

        for i in 0..<pages {
            let v = UIView(frame: self.view.bounds)
            v.backgroundColor=UIColor(red: CGFloat(CGFloat(i)/CGFloat(pages)), green: CGFloat(1 - CGFloat(i)/CGFloat(pages)), blue: CGFloat(CGFloat(i)/CGFloat(pages)), alpha: 1)
            v.frame.Origin.x=CGFloat(i)*cellSize
            v.frame.size.width=cellSize
            scrollView.addSubview(v)
        }

        scrollView.contentSize.width=cellSize*CGFloat(pages)
        scrollView.isPagingEnabled=false
        scrollView.delegate=self
        scrollView.contentInset.left=inset
        scrollView.contentOffset.x = -inset
        scrollView.contentInset.right=inset

    }

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        preX = scrollView.contentOffset.x
    }

    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

        let originalIndex = Int((preX+cellSize/2)/cellSize)

        let targetX = targetContentOffset.pointee.x
        var targetIndex = Int((targetX+cellSize/2)/cellSize)

        if targetIndex > originalIndex + 1 {
            targetIndex=originalIndex+1
        }
        if targetIndex < originalIndex - 1 {
            targetIndex=originalIndex - 1
        }

        if velocity.x == 0 {
            let currentIndex = Int((scrollView.contentOffset.x+self.view.bounds.width/2)/cellSize)
            let tx=CGFloat(currentIndex)*cellSize-(self.view.bounds.width-cellSize)/2
            scrollView.setContentOffset(CGPoint(x:tx,y:0), animated: true)
            return
        }

        let tx=CGFloat(targetIndex)*cellSize-(self.view.bounds.width-cellSize)/2
        targetContentOffset.pointee.x=scrollView.contentOffset.x

        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: velocity.x, options: [UIViewAnimationOptions.curveEaseOut, UIViewAnimationOptions.allowUserInteraction], animations: {
            scrollView.contentOffset=CGPoint(x:tx,y:0)
        }) { (b:Bool) in

        }

    }


}

Answer 11

Pour le problème UICollectionView (qui pour moi était une UITableViewCell d'une collection de cartes à défilement horizontal avec des "tickers" de la carte à venir/précédente), je devais juste abandonner l'utilisation de la pagination native d'Apple. La solution github de Damien a énormément fonctionné pour moi. Vous pouvez modifier la taille du tickler en augmentant la largeur de l'en-tête et en la redimensionnant dynamiquement à zéro lorsque vous êtes au premier index afin de ne pas vous retrouver avec une grande marge vierge

Answer 12

Vieux fil, mais vaut la peine de mentionner mon point de vue à ce sujet:

import Foundation
import UIKit

class PaginatedCardScrollView: UIScrollView {

    convenience init() {
        self.init(frame: CGRect.zero)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        _setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        _setup()
    }

    private func _setup() {
        isPagingEnabled = true
        isScrollEnabled = true
        clipsToBounds = false
        showsHorizontalScrollIndicator = false
    }

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        // Asume the scrollview extends uses the entire width of the screen
        return point.y >= frame.Origin.y && point.y <= frame.Origin.y + frame.size.height
    }
}

De cette façon, vous pouvez a) utiliser toute la largeur de la vue de défilement pour effectuer un panoramique/balayage et b) être en mesure d'interagir avec les éléments qui se trouvent hors des limites d'origine de la vue de défilement

Answer 13

Essayez d'utiliser la propriété contentInset de scrollView:

scrollView.pagingEnabled = YES;

[scrollView setContentSize:CGSizeMake(height, pageWidth * 3)];
double leftContentOffset = pageWidth - kSomeOffset;
scrollView.contentInset = UIEdgeInsetsMake(0, leftContentOffset, 0, 0);

Il peut falloir jouer avec vos valeurs pour obtenir la pagination souhaitée.

J'ai trouvé que cela fonctionnait plus proprement par rapport aux alternatives publiées. Problème d'utilisation de scrollViewWillEndDragging: la méthode déléguée est que l'accélération pour les raccourcis lents n'est pas naturelle.

Answer 14

Raffiné Swift version de la solution UICollectionView:

• Limite à une page par coup
• Assure un accrochage rapide à la page, même si votre défilement était lent

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.decelerationRate = .fast
}

private var dragStartPage: CGPoint = .zero

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    dragStartOffset = scrollView.contentOffset
}

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    // Snap target offset to current or adjacent page
    let currentIndex = pageIndexForContentOffset(dragStartOffset)
    var targetIndex = pageIndexForContentOffset(targetContentOffset.pointee)
    if targetIndex != currentIndex {
        targetIndex = currentIndex + (targetIndex - currentIndex).signum()
    } else if abs(velocity.x) > 0.25 {
        targetIndex = currentIndex + (velocity.x > 0 ? 1 : 0)
    }
    // Constrain to valid indices
    if targetIndex < 0 { targetIndex = 0 }
    if targetIndex >= items.count { targetIndex = max(items.count-1, 0) }
    // Set new target offset
    targetContentOffset.pointee.x = contentOffsetForCardIndex(targetIndex)
}

Answer 15

Lors de la création de la vue de défilement, assurez-vous de définir ceci:

scrollView.showsHorizontalScrollIndicator = false;
scrollView.showsVerticalScrollIndicator = false;
scrollView.pagingEnabled = true;

Ajoutez ensuite vos sous-vues à la roulette avec un décalage égal à leur hauteur d'index * de la roulette. C'est pour un scroller vertical:

UIView * sub = [UIView new];
sub.frame = CGRectMake(0, index * h, w, subViewHeight);
[scrollView addSubview:sub];

Si vous l'exécutez maintenant, les vues sont espacées et, lorsque la pagination est activée, elles défilent une par une.

Alors, mettez cela dans votre méthode viewDidScroll:

    //set vars
    int index = scrollView.contentOffset.y / h; //current index
    float y = scrollView.contentOffset.y; //actual offset
    float p = (y / h)-index; //percentage of page scroll complete (0.0-1.0)
    int subViewHeight = h-240; //height of the view
    int spacing = 30; //preferred spacing between views (if any)

    NSArray * array = scrollView.subviews;

    //cycle through array
    for (UIView * sub in array){

        //subview index in array
        int subIndex = (int)[array indexOfObject:sub];

        //moves the subs up to the top (on top of each other)
        float transform = (-h * subIndex);

        //moves them back down with spacing
        transform += (subViewHeight + spacing) * subIndex;

        //adjusts the offset during scroll
        transform += (h - subViewHeight - spacing) * p;

        //adjusts the offset for the index
        transform += index * (h - subViewHeight - spacing);

        //apply transform
        sub.transform = CGAffineTransformMakeTranslation(0, transform);
    }

Les cadres des sous-vues sont toujours espacés, nous les déplaçons simplement via une transformation pendant que l'utilisateur défile.

De plus, vous avez accès à la variable p ci-dessus, que vous pouvez utiliser pour d'autres choses, comme l'alpha ou les transformations dans les sous-vues. Lorsque p == 1, cette page est entièrement affichée, ou plutôt elle tend vers 1.