Paginação horizontal UIScrollView como guias do Mobile Safari

O Mobile Safari permite que você alterne as páginas inserindo uma espécie de visualização de paginação horizontal UIScrollView com um controle de página na parte inferior.

Estou tentando replicar esse comportamento específico em que um UIScrollView rolável horizontalmente mostra parte do conteúdo do próximo modo de exibição.

O exemplo fornecido pela Apple: PageControl mostra como usar um UIScrollView para paginação horizontal, mas todas as visualizações ocupam toda a largura da tela.

Como faço para que um UIScrollView mostre algum conteúdo da próxima exibição como o Safari móvel faz?

Um UIScrollViewcom paginação habilitada irá parar em múltiplos de sua largura (ou altura) de quadro. Portanto, a primeira etapa é descobrir a largura que você deseja que suas páginas tenham. Faça com que seja a largura do UIScrollView. Em seguida, defina os tamanhos de sua subvisualização com o tamanho que você precisa e defina seus centros com base nos múltiplos da UIScrollViewlargura de.

Então, desde que você quiser ver as outras páginas, é claro, definir clipsToBoundsa NOcomo mhjoy afirmou. O truque agora é fazer com que ele role quando o usuário começar a arrastar fora do intervalo do UIScrollViewquadro de. Minha solução (quando tive que fazer isso muito recentemente) foi a seguinte:

Crie uma UIViewsubclasse (ou seja ClipView) que conterá as UIScrollViewsubvisões e suas. Essencialmente, deve ter a estrutura que você presumiria UIScrollViewque teria em circunstâncias normais. Coloque o UIScrollViewno centro do ClipView. Certifique-se de que o ClipView's clipsToBoundsesteja definido como YESse sua largura for menor que a de sua visualização pai. Além disso, o ClipViewprecisa de uma referência ao UIScrollView.

A etapa final é substituir - (UIView *)hitTest:withEvent:dentro do ClipView.

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

Isso basicamente expande a área de toque do UIScrollViewpara o quadro da visão de seu pai, exatamente o que você precisa.

Outra opção seria criar uma subclasse UIScrollViewe sobrescrever seu - (BOOL)pointInside:(CGPoint) point withEvent:(UIEvent *) eventmétodo; entretanto, você ainda precisará de uma visualização de contêiner para fazer o recorte, e pode ser difícil determinar quando retornar com YESbase apenas no UIScrollViewquadro de.

NOTA: Você também deve dar uma olhada no hitTest: withEvent: modificação de Juri Pakaste se estiver tendo problemas com a interação do usuário de subvisualização.

A ClipViewsolução acima funcionou para mim, mas tive que fazer uma -[UIView hitTest:withEvent:]implementação diferente . A versão de Ed Marty não conseguiu interação do usuário trabalhando com scrollviews verticais que tenho dentro do horizontal.

A seguinte versão funcionou para mim:

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

Defina o tamanho do quadro de scrollView como o tamanho das suas páginas seria:

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

Agora você pode fazer panorâmica self.viewe o conteúdo em scrollView será rolado.
Use também scrollView.clipsToBounds = NO;para evitar o corte do conteúdo.

Acabei optando pelo UIScrollView personalizado, pois era o método mais rápido e simples que me parecia. No entanto, não vi nenhum código exato, então decidi compartilhar. Minhas necessidades eram de um UIScrollView que tinha conteúdo pequeno e, portanto, o próprio UIScrollView era pequeno para atingir o efeito de paginação. Como afirma a postagem, você não pode deslizar. Mas agora você pode.

Crie uma classe CustomScrollView e uma subclasse UIScrollView. Então, tudo o que você precisa fazer é adicionar isso ao arquivo .m:

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

Isso permite que você role de um lado para o outro (horizontal). Ajuste os limites de acordo para definir sua área de toque de deslizar / rolagem. Aproveitar!

Fiz outra implementação que pode retornar o scrollview automaticamente. Portanto, não é necessário ter um IBOutlet que limitará a reutilização no projeto.

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

Tenho outra modificação potencialmente útil para a implementação de hitTest do ClipView. Não gostei de ter que fornecer uma referência UIScrollView ao ClipView. Minha implementação abaixo permite que você reutilize a classe ClipView para expandir a área de teste de impacto de qualquer coisa, e não precisa fornecer uma referência.

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

Implementei a sugestão votada acima, mas UICollectionVieweu estava usando considerava qualquer coisa fora do quadro como fora da tela. Isso fazia com que as células próximas fossem renderizadas fora dos limites apenas quando o usuário rolasse em direção a elas, o que não era o ideal.

O que acabei fazendo foi emular o comportamento de um scrollview adicionando o método abaixo ao delegado (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;
}

Isso evita a delegação da ação de furto inteiramente, o que também foi um bônus. O UIScrollViewDelegatetem um método semelhante chamado scrollViewWillEndDragging:withVelocity:targetContentOffset:que pode ser usado para paginar UITableViews e UIScrollViews.

Habilite o disparo de eventos de toque em visualizações secundárias da visualização de rolagem ao mesmo tempo em que apóia a técnica desta pergunta SO. Usa uma referência à visualização de rolagem (self.scrollView) para facilitar a leitura.

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

Adicione isso à visualização do seu filho para capturar o evento de toque:

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

(Esta é uma variação da solução do usuário 1856273. Limpo para facilitar a leitura e incorporou a correção do bug de Bartserk. Pensei em editar a resposta do usuário 1856273, mas era uma mudança muito grande para fazer.)

minha versão Pressionando o botão deitado no pergaminho - trabalho =)

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

mas apenas [[subvisualizações próprias] objectAtIndex: 0] deve ser um pergaminho

Aqui está uma resposta do Swift baseada na resposta de Ed Marty, mas também incluindo a modificação de Juri Pakaste para permitir toques nos botões, etc., dentro do scrollview.

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