使 UIScrollView 中的顶部图像在滚动视图边界上放大？

Posted 2023-03-11

【中文标题】使 UIScrollView 中的顶部图像在滚动视图边界上放大？

【英文标题】：Make Top image in UIScrollView enlarge on scroll view bounds?

【发布时间】：2015-05-31 17:57:58

【问题描述】：

我有一个 UIScroll 视图，里面有一个 UIView 作为内容视图。布局是：

self.scrollView = UIScrollView()
self.view.addSubview(self.scrollView)
self.scrollView.backgroundColor = UIColor.yellowColor()

// pin all edges to the edges of the superview (self.view)
self.scrollView.snp_makeConstraints  (make) -> Void in
  make.edges.equalTo(self.view)


// create contentView
self.contentView = UIView()
self.contentView.backgroundColor = UIColor.redColor()
self.scrollView.addSubview(self.contentView)

// pin the edges of the contentView to the scrollView
self.contentView.snp_makeConstraints  (make) -> Void in
  make.edges.equalTo(self.scrollView) 

在我的 contentView 中，顶部有一个 UIImageView，下面有一些 UILabel：

let imageView = UIImageView(...)
let labe1 = UILabel(...)
let labe2 = UILabel(...)
self.contentView.addSubView(imageView)
self.contentView.addSubView(labe1)
self.contentView.addSubView(labe2)

下面是它的样子：

当我下拉滚动视图时，滚动视图会在顶部弹跳。我希望在滚动视图反弹时图像放大。

我用UIScrollViewDelegate 做到了这一点：

   func scrollViewDidScroll(scrollView: UIScrollView) 
    let offsetY: CGFloat = scrollView.contentOffset.y
    if offsetY < -64 
      let progress:CGFloat = fabs(offsetY + 64) / 100
      self.imageView.transform = CGAffineTransformMakeScale(1 + progress, 1 + progress)
    
  

这可行，但问题是当图像被转换时，它不应该将边框覆盖到包含标签的红色区域。这是我弹跳时发生的情况：

我希望图像仍然放大但不与红色区域的边框重叠。我该怎么做？

【问题讨论】：

只需将 imageViews 的 clipsToBounds 属性设置为 true。

不，这不是那么简单，因为当您这样做时，图像不会缩放到屏幕顶部。这就是我想要的！

在这种情况下你还应该根据滚动量来修改图像的高度，但clipToBounds必须为true。

正如我所说，我不能使用 clipToBounds！

不，你可以，想一想：当你向下滚动时，imageViews的原点（图像视图的顶部）也是向下的，如果你使用clipToBounds，上面的那些部分图像视图的顶部消失了。但是如果你增加图像视图的高度（并且可能将其原点向上移动与高度增加相同的量），那么效果将与你想要的一样。

【参考方案1】：

我建议您使用分页视图调整整个 UIScrollView 的大小 - 不要忘记重置其框架以防止错误分页。

【参考方案2】：

只需添加一个空的 UIView 与图像中突出显示的一些背景颜色

或者在你的代码中

let imageView = UIImageView(...)
let labe1 = UILabel(...)
let labe2 = UILabel(...)
self.contentView.addSubView(imageView)
//add one more UIView with some background color here
self.contentView.addSubView(labe1)
self.contentView.addSubView(labe2)