如何以编程方式将ImageView与ScrollView的底部对齐？

Question

我正在尝试使用Autolayout以编程方式将背景图像对齐到适合屏幕的滚动视图的底部。 理想情况下，我希望图像始终在滚动视图的底部对齐。 当滚动视图的内容超出屏幕高度时，或者当滚动视图的内容大小小于屏幕高度且滚动视图适合整个屏幕时。

我的观点

class MyView: UIView {

    let myScrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.bounces = false
        return scrollView
    }()

    let contentView: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let myLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Hello world"
        label.font = UIFont.systemFont(ofSize: 24)
        return label
    }()

    let myImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.image = #imageLiteral(resourceName: "Mask Group 3")
        return imageView
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
        setupConstraints()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        backgroundColor = .white

        addSubview(myScrollView)

        myScrollView.addSubview(contentView)

        contentView.addSubview(myLabel)
        contentView.addSubview(myImageView)
    }

    private func setupConstraints() {
        myScrollView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        myScrollView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        myScrollView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
        myScrollView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true

        contentView.topAnchor.constraint(equalTo: myScrollView.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: myScrollView.bottomAnchor).isActive = true
        contentView.leftAnchor.constraint(equalTo: myScrollView.leftAnchor).isActive = true
        contentView.rightAnchor.constraint(equalTo: myScrollView.rightAnchor).isActive = true
        contentView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true
        // If I am setting this and when the content size go beyond the screen, it does not scroll
        // If I don't set this, there is no content size and image view will not position correctly
//        contentView.heightAnchor.constraint(equalTo: heightAnchor).isActive = true

        myLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 200).isActive = true
        myLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true

        myImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
        myImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
        myImageView.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
    }

}

MyViewController

import UIKit

class MyViewController: UIViewController {

    override func loadView() {
        view = MyView()
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: false)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

插图

Answer 1

看来还可以：

private func setupConstraints() {
        myScrollView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        myScrollView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        myScrollView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
        myScrollView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true

        contentView.topAnchor.constraint(equalTo: myScrollView.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: myScrollView.bottomAnchor).isActive = true
        contentView.leftAnchor.constraint(equalTo: myScrollView.leftAnchor).isActive = true
        contentView.rightAnchor.constraint(equalTo: myScrollView.rightAnchor).isActive = true
        contentView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true
        // If I am setting this and when the content size go beyond the screen, it does not scroll
        // If I don't set this, there is no content size and image view will not position correctly
        contentView.heightAnchor.constraint(equalToConstant: 1400).isActive = true

        myLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 200).isActive = true
        myLabel.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true

        myImageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
        myImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
        myImageView.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
        myImageView.heightAnchor.constraint(equalToConstant: 200).isActive = true

    }

如果认为您只是忘记指定图像高度，则：

myImageView.heightAnchor.constraint(equalToConstant: 200).isActive = true

Answer 2

我找到了解决方案。

1. 需要contentView 。
2. 设置contentView的上，左，下，右约束等于 scrollView的边缘。
3. 设置contentView的宽度等于 view的宽度锚点
4. 将contentView的高度设置为GreaterThanOrEqualTo，以 view高度锚点
5. 设置imageView的底部等于 contentView的底部锚点。
6. 对于imageView的顶部，将约束设置为具有GreaterThanOrEqualTo的元素，以为其提供恒定的间隙并避免在较小的屏幕中元素重叠。