Paginación horizontal UIScrollView como pestañas de Safari móvil

Mobile Safari le permite cambiar de página ingresando una especie de vista de paginación horizontal UIScrollView con un control de página en la parte inferior.

Estoy tratando de replicar este comportamiento particular en el que un UIScrollView desplazable horizontalmente muestra parte del contenido de la siguiente vista.

El ejemplo proporcionado por Apple: PageControl muestra cómo usar un UIScrollView para la paginación horizontal, pero todas las vistas ocupan todo el ancho de la pantalla.

¿Cómo obtengo un UIScrollView para mostrar algún contenido de la siguiente vista como lo hace Safari móvil?

A UIScrollViewcon la paginación habilitada se detendrá en múltiplos de su ancho (o alto) de marco. Entonces, el primer paso es averiguar qué tan amplias quieres que sean tus páginas. Que sea el ancho del UIScrollView. Luego, establezca los tamaños de su subvista por muy grandes que necesite, y establezca sus centros en base a múltiplos de la UIScrollViewanchura.

Entonces, ya que desea ver las otras páginas, por supuesto, establecidos clipsToBoundsa NOlo mhjoy declaró. La parte del truco ahora es hacer que se desplace cuando el usuario comience a arrastrar fuera del rango del UIScrollViewmarco de. Mi solución (cuando tuve que hacer esto muy recientemente) fue la siguiente:

Cree una UIViewsubclase (es decir ClipView) que contendrá las UIScrollViewsubvistas y sus. Esencialmente, debe tener el marco de lo que supondría UIScrollViewque tendría en circunstancias normales. Coloque el UIScrollViewen el centro del ClipView. Asegúrese de que el ClipView's clipsToBoundsesté configurado como YESsi su ancho es menor que el de su vista principal. Además, ClipViewnecesita una referencia a UIScrollView.

El último paso es anular - (UIView *)hitTest:withEvent:dentro del ClipView.

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

Básicamente, esto expande el área táctil del UIScrollViewal marco de la vista de su padre, exactamente lo que necesita.

Otra opción sería crear una subclase UIScrollViewy anular su - (BOOL)pointInside:(CGPoint) point withEvent:(UIEvent *) eventmétodo, sin embargo, aún necesitará una vista de contenedor para hacer el recorte, y puede ser difícil determinar cuándo regresar YESbasándose solo en el UIScrollViewmarco de.

NOTA: También debe echar un vistazo a la modificación hitTest: withEvent: de Juri Pakaste si tiene problemas con la interacción del usuario de la subvista.

La ClipViewsolución anterior funcionó para mí, pero tuve que hacer una -[UIView hitTest:withEvent:]implementación diferente . La versión de Ed Marty no logró que la interacción del usuario funcionara con las vistas de desplazamiento verticales que tengo dentro de la horizontal.

La siguiente versión funcionó para mí:

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

Establezca el tamaño del marco de scrollView como el tamaño de sus páginas:

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

Ahora puede desplazarse self.viewy el contenido de scrollView se desplazará.
También utilícelo scrollView.clipsToBounds = NO;para evitar recortar el contenido.

Terminé usando el UIScrollView personalizado yo mismo, ya que era el método más rápido y simple que me parecía. Sin embargo, no vi ningún código exacto, así que pensé que lo compartiría. Mis necesidades eran un UIScrollView que tuviera un contenido pequeño y, por lo tanto, el UIScrollView en sí era pequeño para lograr el efecto de paginación. Como dice la publicación, no se puede deslizar. Pero ahora puedes.

Cree una clase CustomScrollView y una subclase UIScrollView. Luego, todo lo que necesita hacer es agregar esto al archivo .m:

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

Esto le permite desplazarse de un lado a otro (horizontal). Ajuste los límites en consecuencia para establecer su área táctil de deslizamiento / desplazamiento. ¡Disfrutar!

He realizado otra implementación que puede devolver la vista de desplazamiento automáticamente. Por lo tanto, no necesita tener un IBOutlet que limitará la reutilización en el proyecto.

- (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;
}

Tengo otra modificación potencialmente útil para la implementación de ClipView hitTest. No me gustó tener que proporcionar una referencia UIScrollView a ClipView. Mi implementación a continuación le permite reutilizar la clase ClipView para expandir el área de prueba de impacto de cualquier cosa y no tener que proporcionarle una referencia.

- (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;
}

Implementé la sugerencia de voto positivo anterior, pero el UICollectionViewque estaba usando consideró que cualquier cosa fuera del marco fuera de la pantalla. Esto hizo que las celdas cercanas solo se mostraran fuera de los límites cuando el usuario se desplazaba hacia ellas, lo que no era ideal.

Lo que terminé haciendo fue emular el comportamiento de una vista de desplazamiento agregando el método a continuación al delegado (o 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;
}

Esto evita la delegación de la acción de deslizar por completo, lo que también fue una ventaja. El UIScrollViewDelegatetiene un método similar llamado scrollViewWillEndDragging:withVelocity:targetContentOffset:que podría ser utilizado para UITableViews de página y UIScrollViews.

Habilite el disparo de eventos de toque en las vistas secundarias de la vista de desplazamiento mientras apoya la técnica de esta pregunta SO. Utiliza una referencia a la vista de desplazamiento (self.scrollView) para facilitar la lectura.

- (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;
}

Agregue esto a la vista de su hijo para capturar el evento táctil:

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

(Esta es una variación de la solución de user1856273. Se limpió para facilitar la lectura e incorporó la corrección de errores de Bartserk. Pensé en editar la respuesta de user1856273, pero era un cambio demasiado grande para hacer).

mi versión Presionando el botón que se encuentra en el pergamino - trabajo =)

- (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;
    }

pero solo [[self subviews] objectAtIndex: 0] debe ser un desplazamiento

Aquí hay una respuesta rápida basada en la respuesta de Ed Marty, pero también incluye la modificación de Juri Pakaste para permitir toques de botones, etc.dentro de la vista de desplazamiento.

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