ios - 如何通过循环 swift 5 为滚动视图内的 imageView 设置 trailingAnchor.constraint

问题描述

这就是我通过 for 循环在滚动视图中显示图像视图的方式：

func addPageController() {
        let imgArray = ["AquariumBG", "PaludariumBG", "TerrariumBG"]

        let scrollContentViewWidthAnchor = scrollContentView.widthAnchor.constraint(equalTo: headerScrollView.widthAnchor, constant:0)
        scrollContentViewWidthAnchor.isActive = true

        for (index, item) in imgArray.enumerated() {
            let imgView = UIImageView()
            imgView.contentMode = .scaleAspectFill
            imgView.image = UIImage(named: item)
            let xPos = CGFloat(index) * UIScreen.main.bounds.size.width

            scrollContentView.addSubview(imgView)
            scrollContentView.translatesAutoresizingMaskIntoConstraints = false
            scrollContentView.topAnchor.constraint(equalTo: headerScrollView.topAnchor, constant: 0).isActive = true
            scrollContentView.bottomAnchor.constraint(equalTo: headerScrollView.bottomAnchor, constant: 0).isActive = true
            scrollContentView.leadingAnchor.constraint(equalTo: headerScrollView.leadingAnchor, constant: 0).isActive = true
            scrollContentViewWidthAnchor.constant = xPos

            scrollContentView.setNeedsLayout()
            scrollContentView.layoutIfNeeded()

            imgView.translatesAutoresizingMaskIntoConstraints = false
            imgView.topAnchor.constraint(equalTo: scrollContentView.topAnchor, constant: 0).isActive = true
            imgView.bottomAnchor.constraint(equalTo: scrollContentView.bottomAnchor, constant: 0).isActive = true
            imgView.widthAnchor.constraint(equalToConstant: headerScrollView.frame.size.width).isActive = true
            imgView.leadingAnchor.constraint(equalTo: scrollContentView.leadingAnchor, constant: xPos).isActive = true
            imgView.widthAnchor.constraint(equalToConstant: headerScrollView.frame.size.width).isActive = true

            imgView.setNeedsLayout()
            imgView.layoutIfNeeded()
        }
    }

这是输出：

它完美地显示出来。现在，如果我将标题向下滑动到屏幕上（因为它是有弹性的标题），第二张图片也会与第一张图片一起显示，如下所示：

这样做的原因是因为图像视图没有trailingAnchor.constraint. 所以我的问题是，当下一个图像视图尚未创建时，是否可以在循环内设置带有图像视图的尾随锚点？如果有怎么办？任何建议将不胜感激。提前致谢。

我的故事板：

示例项目链接

标签： iosswiftconstraintsnslayoutconstraintios-autolayout

解决方案

编辑

虽然我仍然建议对 imageViews 使用堆栈视图，但这不是问题。

查看您的示例项目后，您可以使用一行代码解决问题。

在你的循环内：

    for (index, item) in imgArray.enumerated() {
        let imgView = UIImageView()

        // add this line
        imgView.clipsToBounds = true

        // continue with what you had...
        imgView.contentMode = .scaleAspectFill
        // etc...
    }

编辑结束

我建议UIStackView在您的滚动视图中放置一个，然后将您的图像视图添加为排列的子视图。

这是一个在“普通”视图中使用滚动视图的示例，但它几乎可以直接转换为在表头视图中使用它：

class ScrollHeaderTestViewController: UIViewController {

    @IBOutlet var theStackView: UIStackView!
    @IBOutlet var theScrollView: UIScrollView!

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

    func addPageController() -> Void {

        let imgArray = ["AquariumBG", "PaludariumBG", "TerrariumBG"]

        imgArray.forEach { imgName in
            if let img = UIImage(named: imgName) {
                let v = UIImageView()
                v.translatesAutoresizingMaskIntoConstraints = false
                v.contentMode = .scaleAspectFill
                v.image = img
                theStackView.addArrangedSubview(v)
                v.widthAnchor.constraint(equalTo: theScrollView.frameLayoutGuide.widthAnchor).isActive = true
            }
        }

    }

}

以下是它在情节提要中的设置方式：

滚动视图被限制在顶部/前导/尾随，高度为 150

堆栈视图的所有 4 个边都被限制到滚动视图的内容布局指南，高度等于滚动视图的框架布局指南高度。宽度被限制为 200（只是我选择的一个比视图窄的随机数），但是该约束有一个Priority of 250- 这允许它在您添加排列的子视图时自动扩展。

ios - 如何通过循环 swift 5 为滚动视图内的 imageView 设置 trailingAnchor.constraint

问题描述

解决方案

推荐阅读