如何计算单元格与不同移动尺寸的纵横比？

Question

我需要帮助，如何计算位于 tableView 单元格中的视图的纵横比：此视图应以该纵横比显示不同的设备 (17. 10)。 我有一个包含一定数量单元格的表格。 我将任意表格的单元格长度设置为 226.0. 这样做是为了显示单元格之间 24 点的任意距离。 （无故事板）

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 226.0
}

在单元格内，我有一个与 (17:10) 高度匹配的视图。 我使用 SnapKit 作为约束。

 cellView.snp.makeConstraints { make in
      make.top.equalTo(self.contentView.snp.top)
      make.leading.equalTo(self.contentView.snp.leading)
      make.trailing.equalTo(self.contentView.snp.trailing
      make.height.equalTo(self.contentView.snp.width).multipliedBy(10.0 / 17.0)
}

为了进行测试，我使用的是 iPhone SE（第 3 代），在运行应用程序后，宽高比仅适用于单元格之间距离为 24 点的 model。 如果你运行其他模拟器模型，比如iphone 14 pro max，细胞就会粘在一起。 我如何计算才能使不同模型的单元格之间的距离始终保持 24 个点？

编辑

SE 3rd Gen 模拟器结果

正如您在屏幕截图中看到的，此模拟器对应于 17:10 的纵横比，并且其他单元格之间的距离为 24 点。 但是如果你运行一个更大的 model 的模拟器，那么细胞就会粘在一起。

Answer 1

你想让单元格设置自己的高度，所以......

完全摆脱这个：

//func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
//    return 226.0
//}

像这样配置您的单元格 class：

class AspectCell: UITableViewCell {
    
    let cellView = UIView()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    private func commonInit() {
        cellView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(cellView)
        
        cellView.snp.makeConstraints { make in
            // use Priority of Required-1 to avoid autolayout complaints
            make.top.bottom.equalTo(self.contentView).inset(12.0).priority(.init(999.0))
            make.leading.trailing.equalTo(self.contentView).inset(12.0)
            make.height.equalTo(self.contentView.snp.width).multipliedBy(10.0 / 17.0)
        }

        cellView.backgroundColor = .systemRed
        cellView.layer.cornerRadius = 12
    }
    
}

这是一个基本的表格视图 controller 来查看结果：

class AspectTableViewController: UITableViewController {
    
    let colors: [UIColor] = [
        .systemRed, .systemGreen, .systemBlue,
        .systemYellow, .green, .blue,
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.separatorStyle = .none
        tableView.register(AspectCell.self, forCellReuseIdentifier: "aspectCell")
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let c = tableView.dequeueReusableCell(withIdentifier: "aspectCell", for: indexPath) as! AspectCell
        c.cellView.backgroundColor = colors[indexPath.row % colors.count]
        return c
    }
    
}

Output：

---

编辑-澄清约束优先级......

在单元格（和其他视图）中使用动态大小限制时，一个非常常见的情况是我们最终得到一个不太有效的值。

例如，在 iPhone 14 Pro 上运行，每边有 12 个点的cellView ：

• 单元格的实际宽度为393
• cellView子视图的实际宽度为369 (393 - 24)
• 369.0 x 10.0 / 17.0 = 217.05882352941177

自动布局将向调试控制台打印警告，因为它无法将高度设置为217.05882352941177 ...它将使用217 。

通过给 Bottom 约束一个 less-than-required 的优先级，我们告诉自动布局如果它使用217我们没问题（即它不是 required ）。

这是一个更好的 makeConstraints 块（我们不需要降低顶部约束的优先级）。 而且，上面的代码使用了contentView宽度而不是cellView宽度，所以它不是 17:10 的纵横比：

    cellView.snp.makeConstraints { make in
        // 12-points on each side
        make.leading.trailing.equalTo(self.contentView).inset(12.0)

        // 12-points from the top
        make.top.equalTo(self.contentView).inset(12.0)

        // proportional height (17:10)
        make.height.equalTo(cellView.snp.width).multipliedBy(10.0 / 17.0)

        // use Priority of Required-1 to avoid autolayout complaints
        make.bottom.equalTo(self.contentView).inset(12.0).priority(.init(999.0))
    }