水平滚动与ios的视差背景

Question

我正面临着创建介绍视图的挑战,比如"Cleanio"应用程序(https://itunes.apple.com/fr/app/cleanio-pressing-la-demande/id885856031?mt=8).
这是它的样子:

因此,背景和叠加层是独立移动的,而不是以相同的速度移动.
有没有人有一个起点如何实现？

Answer 1

是的.

你需要的是两个UIScrollView.这些都应该是主视图的子视图(彼此不包含在内).

底部有一个图像,顶部有内容.

给他们打电话imageScrollView和contentScrollView.

成为代表contentScrollView.

内容看起来像这样......

contents:    [---page 1---][---page 2---][---page 3---][---page 4---]
image:       [------------the image------------]
screen:      [---screen---]

关键是图像小于所有页面并且大于屏幕.

滚动视图的帧与屏幕的宽度相同.此图表仅用于显示内容宽度而不是帧宽度.

因此,屏幕保持原样,两个滚动视图在其上移动.

现在是视差部分......

- (CGFloat)maxOffsetForScrollView:(UIScrollView *)scrollView
{
    CGFloat contentWidth = scrollView.contentSize.width;
    CGFloat frameWidth = CGRectGetWidth(scrollView.frame);

    return contentWidth - frameWidth;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // this is the delegate method for the content scroll view.
    // I'm only doing horizontal stuff here, you can do vertical too if you want

    CGFloat maximumContentOffset = [self maximumOffsetForScrollView:self.contentScrollView];
    CGFloat currentOffset = self.contentScrollView.contentOffset.x;

    CGFloat percentageOffset = currentOffset/maximumContentOffset;

    CGFloat maximumImageOffset = [self maximumContentOffsetForScrollView:self.imageScrollView];
    CGFloat actualImageOffset = maximumImageOffset * percentageOffset;

    [self.imageScrollView setContentOffset:CGPointMake(actualImageOffset, 0)];
}

这将从内容视图中获取百分比偏移量,并将图像视图偏移相同的百分比偏移量.

结果是视差效应.您可以通过更改图像和内容的相对大小来使其更快或更慢.更多页面(或更小的图像)=更慢的视差.