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

【问题标题】：set the constant width between 2 objects in a forEach loop在 forEach 循环中设置 2 个对象之间的恒定宽度
【发布时间】：2021-02-07 15:18:14
【问题描述】：

我希望我的 swift 代码将每个 imageview 间隔视图控制器宽度的 5%。所以 imageview 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($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)
    }
    
    
}

【问题讨论】：

使用堆栈视图
我同意堆栈视图可能是最好的，但这是第二个想法 - 虽然在 viewDidLoad 中设置 most 约束效果最好（即使在自定义 init 中） - 框架（如屏幕宽度尚不可用。了解视图和视图控制器生命周期并（1）设置您的间隔 - 无论是视图还是约束的常量/乘数 - 稍后当 iOS 确定屏幕尺寸时，然后（ 2) 在生命周期内工作以更改方向...您确实意识到所有设备在横向/纵向时都有不同的宽度。
@dfd 你能提供你的建议作为答案吗？我会给你功劳的。
@RobertCrabtree 你能提供你的建议作为答案吗？我会给你的。

标签： swift foreach autolayout var addition

【解决方案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($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% 的间距：

【讨论】：