【问题标题】:UICollectionViewCompositionLayout with auto-sizing cells containing a fixed ratio UIImageViewUICollectionViewCompositionLayout 具有包含固定比例 UIImageView 的自动调整大小的单元格
【发布时间】:2021-04-26 07:59:34
【问题描述】:

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

我抄袭了this answer 的代码,但看起来很简单:

    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 约束,但为什么不只是调整大小以适应它呢?

【问题讨论】:

  • 我们刚刚遇到了另一个非常相似的情况,并且再次修复了将NSCollectionLayoutSize(... heightDimension:) 中的高度估计值更改为over 估计值。如果低估,我们会在运行时违反约束。如果是高估,一切都很好。
  • 这里有同样的问题,但在水平轴上。高估无济于事。它不断打破我的限制......我希望能够将自动大小的视图与固定大小的视图混合在一起。

标签: ios uicollectionview autolayout interface-builder uicollectionviewlayout


【解决方案1】:

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

通常,尤其是在使用可变大小的单元格内容时,自动布局会在通过约束时引发警告。

消除该警告的最简单方法可能是为您的纵横比约束提供一个小于必需的Priority

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

【讨论】:

  • 这确实适用于我上面的简化案例,但真正的布局要复杂得多,我不得不将一堆视图的高度约束设置为“必需”并设置适当的内容拥抱和压缩在一堆地方的阻力——似乎自动布局会尽其所能满足约束除了缩小或扩大单元格,除非它被requireds强制。
  • hmmm...一般来说,这不应该是必需的。如果你想分享你的实际布局,也许我可以给你一些让事情变得更简单的提示。
  • 对我不起作用,因为 UIView-Encapsulated-Layout-Width 有一个固定值,因此我的默认高或什至 999 优先级约束将失去它
  • @DonMag 多么令人困惑的行为。谢谢你的解释。降低比例起到了作用。我敢肯定,即使一切设置正确,有些人也会尝试修复他们的限制数小时。 (((
【解决方案2】:

我在具有动态项目宽度的水平滑块上遇到了同样的问题。我在我的案例中找到了解决方案,这对我来说似乎是一个错误。

有两个函数可以创建NSCollectionLayoutGroup。使用另一个为我修复了它。

这打破了我的限制:

let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitem: item, count: 1)

这不是:

let group = NSCollectionLayoutGroup.horizontal(layoutSize: size, subitems: [item])

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-31
    • 1970-01-01
    • 2017-05-09
    相关资源
    最近更新 更多