如何使 scrollView 滚动 ImageView 直到中心？

Posted 2023-03-16

【中文标题】如何使 scrollView 滚动 ImageView 直到中心？

【英文标题】：How to make scrollView to scroll ImageView until the center?

【发布时间】：2016-01-22 12:37:16

【问题描述】：

抱歉标题，我只是不知道如何调用它。

我想让我的 scrollView 能够从顶部或底部滚动到中心的圆圈，就像 LinkedIn 那样：

因此，您可以在此处滚动图像直到中心的圆圈。我该如何改进我的代码以实现这一目标？

我的代码是：

scrollView!.delegate = self
    imageView.frame = CGRectMake(0, 0, (scrollView?.frame.width)!, (scrollView?.frame.height)!)

    if let validImage = self.avatarImage 
        self.imageView.image = validImage
        imageView.contentMode = .ScaleAspectFill
        imageView.frame = avatarImageFrame!
    
    imageView.userInteractionEnabled = true

    scrollView?.addSubview(imageView)

    scrollView?.contentSize = (avatarImage?.size)!
    let scrollViewFrame = scrollView?.frame
    let scaleWidth = (scrollViewFrame?.size.width)! / (scrollView?.contentSize.width)!
    let scaleHeight = (scrollViewFrame?.size.height)! / (scrollView?.contentSize.height)!

    let minScale = min(scaleHeight, scaleWidth)

    scrollView?.minimumZoomScale = minScale
    scrollView?.maximumZoomScale = 1
    scrollView?.zoomScale = minScale

    centerScrollViewContents()


func centerScrollViewContents() 
    let boundsSize = scrollView?.bounds.size
    var contentsFrame = imageView.frame

    if contentsFrame.size.width < boundsSize?.width 
        contentsFrame.origin.x = ((boundsSize?.width)! - contentsFrame.size.width) / 2
     else 
        contentsFrame.origin.x = 0
    

    if contentsFrame.size.height < boundsSize?.height 
        contentsFrame.origin.y = ((boundsSize?.height)! - contentsFrame.size.height) / 2
     else 
        contentsFrame.origin.y = 0
    

    contentsFrame.size.height = UIScreen.mainScreen().bounds.height
    imageView.frame = contentsFrame


func scrollViewDidZoom(scrollView: UIScrollView) 
    centerScrollViewContents()

【问题讨论】：

您是否试图将圆圈包含在图像的边界内或试图使图像的中心与圆圈的中心对齐？

@originaluser2 现在我无法将图像向下滚动到圆圈的上角。但在第二张图片中，这是可能的。看，在第二张图片中，图片的角在圆的角上

【参考方案1】：

有很多方法可以实现这一点。可能最适合滚动视图的方法是将滚动视图的框架设置为与圆的框架相同。内容大小仍应与背景（或者在您的情况下为图像）相同，并且当您第一次进入屏幕时，应设置内容偏移量，以使图像位于中心。

到目前为止，您可以想象在圆圈后面有一个小的滚动视图，但背景的其余部分丢失了。要解决此问题，您需要做的就是禁用默认设置为 true 的滚动视图上的绑定剪辑。所以将“剪辑子视图”设置为 false。

现在您已经可以看到整个图像并且弹跳是正确的，可以始终将图像保持在圆圈内，但还缺少一件事。由于滚动视图实际上非常小，您可以看到您可能无法在其框架之外与它进行交互。这是一种自然行为，可以通过覆盖名为hitTest 的方法来更改。此方法将返回一个应该收集交互的视图。所以我们需要对滚动视图的父视图进行子类化：

无论您在界面构建器或代码中的哪个位置执行此操作，我都希望您有一些视图（将其称为背景），其中包含滚动视图（小视图）和叠加层（带有圆圈的视图）。背景必须是子类并具有对滚动视图的引用。然后像这样简单地覆盖命中测试方法：

override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? 
    var myFrame = frame
    myFrame.origin = CGPointZero // maybe this should be commented out

    if CGRectContainsPoint(myFrame, point) 
        return scrollView
     else 
        return super.hitTest(point, withEvent: event)
    

通过这样做，滚动视图可以从背景中的任何位置进行交互，整个图像在背景上可见，图像将始终在圆圈内。

祝你好运。