使用 Swift、自动布局和 SnapKit 自动制作带有 UIImageView 缩放内容的 UIScrollView

Question

我在 Interface Builder 中设置了一个具有以下视图结构的视图控制器：

- UIView
   * UIScrollView
      * UIImageView

我想将图像分配给 UIImageView，这样滚动视图（及其内容大小）将采用与图像相同的宽度并自动根据图片纵横比计算内容大小高度。（这使得图像可以在 UIScrollView 内垂直滚动。）

我正在使用 Swift 和 Interface Builder + SnapKit 来管理自动布局约束。

Answer 1

我设法通过以下方式使用 SnapKit 进行约束：

在 Interface Builder 中，select 视图控制器并通过 selecting Editor / Resolve Auto Layout Issues 创建所有缺少的约束 / 添加缺失约束
手动select所有生成的约束和select占位符/在构建时删除来自属性检查器
将 UIScrollView 和 UIImageView 插座分配给视图控制器
将图像分配给 UIImageView

然后实现视图控制器如下：

import UIKit
import SnapKit

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.snp.makeConstraints { (make) in
            make.edges.equalTo(view)
        }

        let ratio = imageView.image!.size.height / imageView.image!.size.width
        imageView.snp.makeConstraints { (make) in
            make.top.equalTo(0.0)
            make.bottom.equalTo(scrollView.snp.bottom)
            make.width.equalTo(view.snp.width)
            make.height.equalTo(scrollView.snp.width).multipliedBy(ratio)
        }
    }
}

使用 Swift、自动布局和 SnapKit 自动制作带有 UIImageView 缩放内容的 UIScrollView

Making UIScrollView with an UIImageView scale content automatically using Swift, autolayout and SnapKit

uiscrollview

uiimageview

autolayout

swift

snapkit