缩小时如何使 UIImageView 以 Scrollview 为中心?

Posted

技术标签:

【中文标题】缩小时如何使 UIImageView 以 Scrollview 为中心?【英文标题】:How to make a UIImageView centered in a Scrollview when zoom out? 【发布时间】:2015-11-08 12:59:07 【问题描述】:

只是想找出一种方法来制作一个普通的 iPhone 照片查看器,但我无法进行缩放。

    myimageview = UIImageView()
    myimageview.translatesAutoresizingMaskIntoConstraints = false
    myimageview.image = UIImage(named: "1")
    scrollview = UIScrollView()
    scrollview.delegate = self
    scrollview.backgroundColor = UIColor.brownColor()
    scrollview.minimumZoomScale = self.view.frame.width/myimageview.image!.size.width
    scrollview.maximumZoomScale = 1.0
    scrollview.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(scrollview)
    scrollview.addSubview(myimageview)
    let views = ["scrollview":scrollview,"myimageview":myimageview]
    //add scrollview constraints
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollview]|", options: [], metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollview]|", options: [], metrics: nil, views: views))
    scrollview.contentSize = myimageview.image!.size
    //add contentview:myimageview constraints
    let imagesize = myimageview.image!.size
    //let dd = (self.view.frame.height-imagesize.height*self.view.frame.width/imagesize.width)/2
    scrollview.addConstraint(NSLayoutConstraint(item: myimageview, attribute: .CenterY, relatedBy: .Equal, toItem: scrollview, attribute: .CenterY, multiplier: 1.0, constant: 0))
    scrollview.addConstraint(NSLayoutConstraint(item: myimageview, attribute: .Left, relatedBy: .Equal, toItem: scrollview, attribute: .Left, multiplier: 1.0, constant: 0))

    scrollview.addConstraint(NSLayoutConstraint(item: myimageview, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: myimageview.image!.size.width))
    scrollview.addConstraint(NSLayoutConstraint(item: myimageview, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: myimageview.image!.size.height))

所以基本上,我得到了一个滚动视图和一个图像视图,并将它添加到 uiscrollview 的子视图中。我手动设置了滚动视图的内容大小并设置了缩放。我还添加了 viewForZoomingInScrollView 委托函数。缩放效果很好。

问题: 缩小时,我希望图像显示在屏幕中间(uiscrollview),但现在它在顶部。正如您在下面看到的,图片在顶部,我希望它位于屏幕中间。似乎CenterY 不起作用。没有发现错误。我粘贴的代码在 ViewDidLoad 函数中。

【问题讨论】:

【参考方案1】:

好吧,我发现,2 年后,自动布局仍然无法解决这个问题,你必须手动编写它。很伤心。

var myimageview:UIImageView!
var scrollview:UIScrollView!

override func viewDidLoad() 
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    myimageview = UIImageView()
    //myimageview.translatesAutoresizingMaskIntoConstraints = false
    myimageview.image = UIImage(named: "1")
    myimageview.frame = CGRectMake(0, 0, myimageview.image!.size.width, myimageview.image!.size.height)
    scrollview = UIScrollView()
    scrollview.delegate = self
    scrollview.backgroundColor = UIColor.brownColor()
    scrollview.minimumZoomScale = self.view.frame.width/myimageview.image!.size.width
    scrollview.maximumZoomScale = 1.0
    scrollview.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(scrollview)
    scrollview.addSubview(myimageview)
    let views = ["scrollview":scrollview,"myimageview":myimageview]
    //add scrollview constraints
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollview]|", options: [], metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollview]|", options: [], metrics: nil, views: views))
    scrollview.contentSize = myimageview.image!.size



func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? 
    // center the image as it becomes smaller than the size of the screen
    return myimageview


func scrollViewDidZoom(scrollView: UIScrollView) 
    let boundsSize = self.scrollview.bounds.size
    var contentsFrame = self.myimageview.frame

    if (contentsFrame.size.width < boundsSize.width) 
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0
     else 
        contentsFrame.origin.x = 0.0
    

    if (contentsFrame.size.height < boundsSize.height) 
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0
     else 
        contentsFrame.origin.y = 0.0
    

    myimageview.frame = contentsFrame;

【讨论】:

以上是关于缩小时如何使 UIImageView 以 Scrollview 为中心?的主要内容,如果未能解决你的问题,请参考以下文章

每次我在前端放大/缩小时,如何以编程方式检查 Altair 图表的放大/缩小功能

我怎样才能使它在查看器放大和缩小时不会调整 Edit2D 线的大小?

iPhone 编程:如何使 UIImageView 中的 UIImage 以实际大小显示?

uiimageview 保留滚动视图缩放的位置

当浏览器放大或缩小时,如何保持绝对定位的元素响应?

如何在放大时显示全文并在缩小时截断它