web-dev-qa-db-fra.com

effet de défilement de la parallaxe iOS (comme dans l'application Yahoo News Digest)

Je voudrais savoir comment implémenter le défilement parallaxe similaire à l'application Yahoo News Digest. Dans lequel lorsque l'utilisateur fait défiler horizontalement l'image d'arrière-plan défile à une vitesse différente avec la pagination activée.

Peut-être qu'ils le font avec un ScrollView avec une vue en arrière-plan. Pas tout à fait sûr. Astuce pour mettre en œuvre un tel défilement serait formidable. J'ai vérifié des questions similaires mais je n'ai pas trouvé la réponse que je cherchais.

iosyahooparallax
15
Tharindu Madushanka

Je l'ai déjà fait avec 2 vues de défilement.

Vous avez la vue de défilement du détail principal, puis la vue de défilement de la parallaxe derrière (ou où que vous soyez).

Ensuite, vous devenez le délégué du détail scrollview.

Dans la méthode scrollView:didScroll, vous pouvez ensuite ajuster le défilement de la vue de parallaxe.

Si vous ne faites que l'axe x, alors vous voulez quelque chose comme ça ...

CGFloat detailMaxOffset = self.detailScrollView.contentSize.width - CGRectGetWidth(self.scrollView.frame);

CGFloat percentage = self.detailScrollView.contentOffset.x / maxOffset;

CGFloat parallaxMaxOffset = self.parallaxScrollView.contentSize.width - CGRectGetWidth(self.parallaxScrollView.frame);

[self.parallaxScrollView setContentOffset:CGPointMake(percentage * parallaxOffset, 0);

Cela définira le «pourcentage» de décalage du contenu des vues de défilement sur les mêmes.

Pour obtenir l'effet de parallaxe, il vous suffit de rendre différente la contentSize de chaque scrollview.

Si la taille du contenu de la vue de défilement parallaxe est supérieure à celle de la vue de défilement détaillée, elle défilera plus rapidement. Si la taille du contenu est plus petite, le défilement sera plus lent.

21
Fogmeister

Voici la réponse. Je le sous-classe à partir de uitableview afin que les données puissent être réutilisables et je l’enveloppe dans une vue. https://github.com/michaelhenry/MHYahooParallaxView

Merci, Kel

11
Michael Henry

100% de travail et barrage facile

Prenez une vue sur imageview exactement la taille de la vue image. Par défaut alpha pour le jeu de vues 0.

//MARK: Scroll View Delegate methods
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

  NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

CGFloat scrollY = _mainScrollView.contentOffset.y;
CGFloat height = _alphaView.frame.size.height;

CGFloat alphaMonitor = scrollY/height;

_alphaView.alpha = alphaMonitor;
}
0
Mr.Javed Multani

Swift 3

Voici comment j'ai obtenu un effet de parallaxe dans Swift 3 pour un défilement vertical dans une application tvOS.

Dans ViewDidLoad ():

    parallaxScrollView.delegate = self
    detailScrollView.delegate = self

Et suivant: 

override func viewDidLayoutSubviews() {
        self.detailScrollView!.contentSize = CGSize(width: 1920, height: 2700)
        self.parallaxScrollView?.contentSize = CGSize(width: 1920, height: 3000)
    }


//// THE SCROLL VIEW

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    // Parallax effect
    let detailMaxOffset = self.detailScrollView.contentSize.height - self.detailScrollView.frame.height;
    let percentage = self.detailScrollView.contentOffset.y / detailMaxOffset
    let parallaxMaxOffset = self.parallaxScrollView.contentSize.height - self.parallaxScrollView.frame.height;
    let parallaxOffset = CGPoint(x:0,y:(percentage * parallaxMaxOffset))
    self.parallaxScrollView.setContentOffset((parallaxOffset), animated: false)

}
0
Peter Wiley