Question

尝试使用在代码中创建的元素创建scrollView，但我将这些元素重叠在一起。 Scrollview本身就是在故事板中制作的。这是我的代码：

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView! {
        didSet {
            scrollView.backgroundColor = .yellow
        }
    }

    lazy var im: UIImageView = {
        let im = UIImageView(frame: CGRect(x: 10, y: 74, width: self.view.frame.size.width - 20, height: 200))
        im.backgroundColor = .white
        return im
    }()

    lazy var label: UILabel = {
        let l = UILabel(frame: CGRect(x: 10, y: 284, width: self.view.frame.size.width - 20, height: CGFloat.greatestFiniteMagnitude))
        l.numberOfLines = 0
        l.lineBreakMode = .byWordWrapping
        l.text = "crazy amount of text"
        l.sizeToFit()
        self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: l.frame.height + 280)
        return l
    }()


    override func viewDidLoad() {
        super.viewDidLoad()
        self.scrollView.addSubview(im)
        self.scrollView.addSubview(label)
    }
}

白色矩形是imageView！

如何防止这些元素重叠？

Answer 1

您可以将延迟变量 im 的代码更改为

lazy var im: UIImageView = {
        let im = UIImageView(frame: CGRect(x: 10, y: self.label.frame.height, width: self.view.frame.size.width - 20, height: 200))
        im.backgroundColor = .white
        return im
}()

要使图像位于顶部，您可以在 l.sizeToFit（）

之后添加 l.frame.y = self.im.frame.height

lazy var label: UILabel = {
        let l = UILabel(frame: CGRect(x: 10, y: 200, width: self.view.frame.size.width - 20, height: CGFloat.greatestFiniteMagnitude))
        l.numberOfLines = 0
        l.lineBreakMode = .byWordWrapping
        l.text = "Big Text"
        l.sizeToFit()
        l.frame.y = self.im.frame.height
        self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: l.frame.height + 280)
        return l
    }()

这将为您提供所需的结果。希望它有所帮助！

Answer 2

我找到了使用Visual Formatting Language的解决方案。在这里，我提出了完全正常的无警告代码：

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView! {
        didSet {
            scrollView.backgroundColor = .yellow
        }
    }

    lazy var label: UILabel = {
        let l = UILabel(frame: .zero)
        l.numberOfLines = 0
        l.lineBreakMode = .byWordWrapping
        l.translatesAutoresizingMaskIntoConstraints = false
        l.text = "REALLY HUGE TEXT"
        l.sizeToFit()
        return l
    }()

    lazy var im: UIImageView = {
        let im = UIImageView(frame: .zero)
        im.backgroundColor = .white
        im.translatesAutoresizingMaskIntoConstraints = false
        return im
    }()


    override func viewDidLoad() {
        super.viewDidLoad()
        self.scrollView.addSubview(im)
        self.scrollView.addSubview(label)
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        configureSizes()
    }

    fileprivate func configureSizes() {
        let metrics = ["elementWidth" : self.view.frame.size.width - 20, "imageHeight" : 220]

        scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[v1(imageHeight)]-10-[v2]-10-|", options: [], metrics: metrics, views: ["v1" : im, "v2" : label]))
        scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[v1(elementWidth)]-10-|", options: [], metrics: metrics, views: ["v1" : im]))
        scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[v2(elementWidth)]-10-|", options: [], metrics: metrics, views: ["v2" : label]))
    }
}

在这里，您将在顶部看到空白的白色矩形 - imageView，在imageView之后，您会发现多行标签，如果需要，可以拉伸滚动视图的内容大小。

希望有人会发现这有用并节省您的时间：）

滚动视图中的重叠元素

2 个答案: