【问题标题】:How could I build a continuous parallax scroll/table view?我怎样才能建立一个连续的视差滚动/表格视图?
【发布时间】:2014-03-19 02:14:51
【问题描述】:

我希望为 iOS 构建一个连续的视差滚动视图,作为 tableView。我要重新创建的内容与this page 上显示的滚动非常相似。我见过很多“双视图”视差视图,但没有一个在功能上是连续的。

我知道这不是一个直接的问题,但我真的可以使用一些帮助来确定正确的方向。

【问题讨论】:

  • 到目前为止你尝试过什么?我建议观看一些关于滚动视图的 WWDC 视频。我可能会直接使用滚动视图而不是表格视图来控制它。
  • 我现在正在使用页脚/页眉视图来处理表格视图。由于页脚/页眉“粘”在顶部/底部,因此我可以以提供类似外观/感觉的方式对其进行设置。我主要通过使用页脚视图来尝试它,但这并不完全是我想要的。你会采用什么样的方法来使用滚动视图来获得这种效果?你会为每个照片对象使用某种容器吗?
  • 会给出一个粗略的答案...
  • 太棒了!非常感谢!

标签: ios objective-c


【解决方案1】:

有很多方法可以解决这个问题。

我可能不会使用表格视图,但我认为乍一看我会使用 UIScrollView 和 2 UIImageViewsNSArray 的图像(取决于有多少图像)。

这两个图像视图将在主view 上一个在另一个之上,然后在它们之上都是滚动视图,其中没有任何内容。滚动视图仅充当控件。

根据将有多少“页面”(即屏幕高度乘以图像数量)设置滚动视图的内容大小。

在滚动视图委托方法-(void)scrollViewDidScroll:中获取滚动视图的当前偏移量。

您可以使用此偏移量来计算topImagebottomImage(即它们将来自NSArray 的哪个索引)。

然后再次根据偏移量改变顶部UIIMageView的位置。

粗略代码

// create a topImageView and bottomImageView.
// set contentMode UIViewContentModeScaleAspectFill
// set clipsToBounds = YES
// place them both on self.view (bottom first)
// create a scrollView with a clear background.
// place it on the self.view.
// get the array of images.
// set the scrollView.contentSize = number of images * height of scrollView.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat percentageOffset = scrollView.contentOffset.y / CGRectGetHeight(scrollView.frame);

    NSInteger topPage = floorf(percentageOffset);
    CGFloat topPageOffset = percentageOffset - topPage;

    // make sure that you're not going outside of the index bounds first!!!!

    self.topImageView.image = self.images[topPage];
    self.bottomImageView.image = self.images[topPage + 1];

    // move the top image view so it looks like you are scrolling it.
    self.topImageView.frame = CGRectOffset(self.view.bounds, -self.view.bounds.height * topPageOffset, 0);
}

这会给人一种您将顶部图像向上滑动并露出底部图像的印象。它也将连续工作,因此如果您“轻弹”滚动视图,它将一个接一个地显示,直到滚动视图变慢并停止。

我认为这就是我的处理方式。

【讨论】:

  • 我要试一试,然后告诉你进展如何!再次感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-07-06
  • 1970-01-01
  • 2014-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-15
相关资源
最近更新 更多