时间戳

首页 > 解决方案 > UICollectionViewCompositionLayout 与包含固定比例 UIImageView 的自动调整单元格

ios - UICollectionViewCompositionLayout 与包含固定比例 UIImageView 的自动调整单元格

问题描述

目标是为UICollectionViewCompositionalLayout包含固定纵横比的全宽单元格配置一个UIImageView（加上下面的一些其他视图，包括可变高度UILabels 和UIStackViews），并让单元格正确地自动调整大小。我的天真尝试不起作用，我不知道为什么。我在这里介绍的简单案例在运行时给了我一堆约束错误。

我抄写了这个答案的代码，但它看起来很简单：

    override func viewDidLoad() {
        super.viewDidLoad()

        let size = NSCollectionLayoutSize(
            widthDimension: NSCollectionLayoutDimension.fractionalWidth(1),
            heightDimension: NSCollectionLayoutDimension.estimated(100)
        )
        let item = NSCollectionLayoutItem(layoutSize: size)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 10
        
        let layout = UICollectionViewCompositionalLayout(section: section)

        collectionView.collectionViewLayout = layout
    }

约束如下所示： 在此处输入图像描述

一旦我滚动，我就会得到这些约束错误：

2021-01-21 20:29:18.311491+0100 CompositionalLayoutDynamicHeight[96399:2597528] [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. 
(
    "<NSLayoutConstraint:0x6000020a82d0 UIImageView:0x138818600.width == 1.33333*UIImageView:0x138818600.height   (active)>",
    "<NSLayoutConstraint:0x6000020a8460 V:|-(0)-[UIImageView:0x138818600]   (active, names: '|':UIView:0x13881c4d0 )>",
    "<NSLayoutConstraint:0x6000020a84b0 H:[UIImageView:0x138818600]-(0)-|   (active, names: '|':UIView:0x13881c4d0 )>",
    "<NSLayoutConstraint:0x6000020a8500 V:[UIImageView:0x138818600]-(0)-|   (active, names: '|':UIView:0x13881c4d0 )>",
    "<NSLayoutConstraint:0x6000020a8550 H:|-(0)-[UIImageView:0x138818600]   (active, names: '|':UIView:0x13881c4d0 )>",
    "<NSLayoutConstraint:0x6000020a85a0 'UIIBSystemGenerated' CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280.leading == UIView:0x13881c4d0.leading   (active)>",
    "<NSLayoutConstraint:0x6000020a85f0 'UIIBSystemGenerated' H:[UIView:0x13881c4d0]-(0)-|   (active, names: '|':CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280 )>",
    "<NSLayoutConstraint:0x6000020a8640 'UIIBSystemGenerated' CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280.top == UIView:0x13881c4d0.top   (active)>",
    "<NSLayoutConstraint:0x6000020a8690 'UIIBSystemGenerated' V:[UIView:0x13881c4d0]-(0)-|   (active, names: '|':CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280 )>",
    "<NSLayoutConstraint:0x6000020a60d0 'UIView-Encapsulated-Layout-Height' CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280.height == 292.667   (active)>",
    "<NSLayoutConstraint:0x6000020a6120 'UIView-Encapsulated-Layout-Width' CompositionalLayoutDynamicHeight.CollectionViewCell:0x13881c280.width == 390   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x6000020a82d0 UIImageView:0x138818600.width == 1.33333*UIImageView:0x138818600.height   (active)>

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

似乎 AutoLayout 正在创建UIView-Encapsulated-Layout-Height与纵横比约束相冲突的约束——但为什么不只是调整大小以适应它呢？

标签： iosuicollectionviewautolayoutinterface-builderuicollectionviewlayout

解决方案

在为 Collection 视图（和 Table 视图）布局 UI 元素时，自动布局会进行多次“传递”。

通常，特别是在使用可变大小的单元格内容时，自动布局会在通过约束时抛出警告。

消除该警告的最简单方法可能是使您的纵横比约束Priority小于必需。

如果将其设置为Default High (750)，则表示允许自动布局“破坏”它而不抛出警告（但仍将应用它）。

推荐阅读