如何将 UICollectionView 项目的大小调整为具有集合视图高度的正方形大小？

Posted 2023-03-13

【中文标题】如何将 UICollectionView 项目的大小调整为具有集合视图高度的正方形大小？

【英文标题】：How to resize UICollectionView item to a square size with the height of the collection view?

【发布时间】：2017-03-18 17:12:02

【问题描述】：

一个集合视图被放置在屏幕的上部。集合视图是水平的，只有一行。

该行可以包含多个集合视图单元格。

里面的每个单元格都有 UIImageView。 UIImageView 旨在包含一个 UIImage。

UIImage 是一张照片。照片的大小可能不同，但在集合视图单元格内，它必须以 1:1 的纵横比平方。

问题在于将集合视图单元格设为正方形大小，其中正方形的边应等于集合视图的高度。并且 UIImageView 应该占据集合视图单元格的整个空间，使 UIImage 平方。

UIImageView 的约束设置比例为 1:1；以及集合单元格的顶部、前导和底部。

收集单元的大小以编程方式计算：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 

    let size = collectionView.bounds.size.height

    return CGSize(width: size, height: size)

我在调试器中收到以下错误：

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
    "<NSAutoresizingMaskLayoutConstraint:0x6180000968f0 h=--& v=--& UIView:0x7f8c3f61e940.width == 217   (active)>",
    "<NSAutoresizingMaskLayoutConstraint:0x618000096990 h=--& v=--& UIView:0x7f8c3f61e940.height == 100   (active)>",
    "<NSLayoutConstraint:0x618000096030 UIImageView:0x7f8c3f61eae0.width == UIImageView:0x7f8c3f61eae0.height   (active)>",
    "<NSLayoutConstraint:0x618000096120 H:[UIImageView:0x7f8c3f61eae0]-(0)-|   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x618000096170 V:[UIImageView:0x7f8c3f61eae0]-(0)-|   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x6180000961c0 H:|-(0)-[UIImageView:0x7f8c3f61eae0]   (active, names: '|':UIView:0x7f8c3f61e940 )>",
    "<NSLayoutConstraint:0x618000096210 V:|-(0)-[UIImageView:0x7f8c3f61eae0]   (active, names: '|':UIView:0x7f8c3f61e940 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x618000096030 UIImageView:0x7f8c3f61eae0.width == UIImageView:0x7f8c3f61eae0.height   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

如何让它发挥作用？

【问题讨论】：

这样用户界面就会如您所愿。而你唯一的问题是约束冲突？

里面的cell和imageView之间有没有填充？？？

@hasan83 约束 <0x618000096030 uiimageview:0x7f8c3f61eae0. uiimageview:0x7f8c3f61eae0.height>

【参考方案1】：

您不需要纵横比约束和右约束。一个就够了。但是，从逻辑上讲，如果您同时拥有两者，那么如果您的尺寸计算正确，它们就不应该发生冲突。

你的计算看起来不错。因此，可能会影响您的计算的是（页眉大小、页脚大小、间距插图）

可能会影响此的另一件事是重新加载集合视图数据 在 uiview 完成布局之前打开 viewDidLoad。

【讨论】：

除了单元格大小设置为 0 之外，我什么都设置了。

有时冲突发生在视图最终布局之前。您可以进行调试以检查所有值是否符合预期。并删除您不需要的纵横比约束。您正在设置单元格的大小，它将负责通过顶部、机器人、左侧、右侧控件调整图像视图的大小。

我已经去掉了纵横比，现在错误变成了：UICollectionViewFlowLayout的行为没有定义，因为：item height必须小于UICollectionView减去section的高度插入顶部和底部值，减去内容插入顶部和底部值。

从 viewDidLoad 移除重新加载解决了这个问题。谢谢！