Question

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

MyView

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

我找到了解决方法。

需要一个contentView。
将contentView的顶部，左侧，底部，右侧约束相等设置为scrollView的边缘。
将contentView的宽度等于设置为view的宽度锚点
设置contentView的高度 greaterThanOrEqualTo view的高度锚点
将imageView的底部等于设置为contentView的底部锚点。
在imageView的顶部，将约束设置为具有 greaterThanOrEqualTo 的元素，以使其具有恒定的间隙并避免在较小的屏幕中元素重叠。

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

2 个答案: