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

Question

我希望我的 swift 代码 space 每个图像视图占视图控制器宽度的 5%。所以图像视图 a 是宽度的前 10%，然后是 5% 的间隙，然后是另一个宽度为 10% 的图像视图，然后是 5% 的间隙。您可以在下图中看到我在寻找什么。现在我的代码没有编译错误 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([=10=])
            [=10=].backgroundColor = .red
            [=10=].translatesAutoresizingMaskIntoConstraints = false
            
        
            [=10=].leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: CGFloat(smith)).isActive = true
            [=10=].topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true

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

        }
        print(smith)
    }
    
    
}

Answer 1

有多种方法可以做到这一点。使用哪种方法取决于您计划对您的应用和这些图像视图执行的其他操作。

一个简单的方法是使用 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([=11=])
            
            [=11=].backgroundColor = .red
            
            // make the image views square (1:1 ratio ... height == width)
            [=11=].heightAnchor.constraint(equalTo: [=11=].widthAnchor).isActive = true
            
            // each image view is 10% of the width of the view
            [=11=].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% 的间距：

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

set the constant width between 2 objects in a forEach loop

foreach

var

addition

autolayout

swift