在forEach循环中的2个对象之间设置恒定宽度

问题描述

我希望我的快速代码将每个imageview间距为视图控制器宽度的5％。所以imageview a是宽度的前10％，然后是5％的间隙，然后是宽度为10％，然后是5％的另一个imageview。您可以在下图中看到我要的内容。现在我的代码没有在smith + = self.view.widthAnchor * 0.05的错误下编译。所有代码都在下面。

    import UIKit

class ViewController: UIViewController {
    var Box1 = UIImageView();var Box2 = UIImageView();var Box3 = UIImageView()
    override func viewDidLoad() {
        super.viewDidLoad()
        var smith : Double = 0
        [Box1,Box2,Box3].forEach{
            view.addSubview($0)
            $0.backgroundColor = .red
            $0.translatesAutoresizingMaskIntoConstraints = false
            
        
            $0.leadingAnchor.constraint(equalTo: self.view.leadingAnchor,constant: CGFloat(smith)).isActive = true
            $0.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

            $0.heightAnchor.constraint(equalTo: self.view.heightAnchor,multiplier: 0.1).isActive = true
            $0.widthAnchor.constraint(equalTo: self.view.widthAnchor,multiplier: 0.1).isActive = true
            
            
            smith += self.view.widthAnchor * 0.05

        }
        print(smith)
    }
    
    
}

解决方法

有很多方法可以做到这一点。使用哪种方法将取决于您打算对应用程序做些什么以及这些图像视图。

一种简单的方法是使用UIStackView。

由于每个图像视图的宽度均为视图宽度的10％，因此我们希望它们之间的间距为视图宽度的5％：

10% + 5% + 10% + 5% + 10% == 40%

因此我们知道堆栈视图应为视图宽度的40％，其分布设置为Equal Spacing。

这是示例代码：

class BoxesViewController: UIViewController {
    let box1 = UIImageView()
    let box2 = UIImageView()
    let box3 = UIImageView()
    
    let stackView = UIStackView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // stack view properties
        stackView.axis = .horizontal
        stackView.alignment = .fill
        stackView.distribution = .equalSpacing
        
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(stackView)
        
        [box1,box2,box3].forEach {
            
            stackView.addArrangedSubview($0)
            
            $0.backgroundColor = .red
            
            // make the image views square (1:1 ratio ... height == width)
            $0.heightAnchor.constraint(equalTo: $0.widthAnchor).isActive = true
            
            // each image view is 10% of the width of the view
            $0.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 0.10).isActive = true
            
        }
        
        // we want spacing between the image views to be 5% of teh width of the view
        // so...
        //  10% + 5% + 10% + 5% + 10% == 40%
        stackView.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 0.40).isActive = true
        
        // let's constrain the stack view 20-pts from the top (respecting safe area)
        stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor,constant: 20.0).isActive = true
        // zero pts from leading
        stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor,constant: 0.0).isActive = true
        
    }
}

结果：

并且，如果我们旋转设备，我们仍然可以获得10％的图像视图和5％的间距：