【问题标题】:Is it possible to define a range constraint for the same layout anchor on iOS?是否可以在 iOS 上为相同的布局锚定义范围约束?
【发布时间】:2019-10-27 19:51:00
【问题描述】:

我想在UICollectionView 的每个单元格中显示一个图像。图像应与屏幕具有相同的宽度,但它们的高度将取决于它们的大小。我想确保图像被限制在宽高比范围内(例如 1.91 到 4/5)。存储在服务器上的图像可以是任意宽高比;因此,它们不受约束。当在UICollectionViewCell 中显示时,如果它们小于或大于边界框范围(即 1.91 到 4/5),则它们应按比例缩放以填充。

例如,如果图像的纵横比为 2:1,则应将其限制为 1.91:1。如果它的纵横比为 1:2,则应将其限制为 4:5。我想使用新的UICollectionViewCompositionalLayout

对于这项工作,最初我想到的是预先计算高度并将它们存储在数据模型中,并据此更新视图高度。请参阅 View height constraints are not set correctly as I scroll UICollectionView up and down,但我对这种方法有疑问。

我的初学者问题是,是否可以为同一个锚定义两个约束来定义一个范围?

_imageContainer.heightAnchor.constraintGreaterThanOrEqualToAnchor(_imageContainer.widthAnchor, multiplier: 4.0/5).active = true
_imageContainer.heightAnchor.constraintLessThanOrEqualToAnchor(_imageContainer.widthAnchor, multiplier: 1.91).active = true

上述代码的目标是定义一个范围约束。第二个约束是否会覆盖第一个约束以使第一个约束不再有效?其次,对于上述关于在不同高度显示图像的问题,推荐的方法是什么?

【问题讨论】:

    标签: ios xamarin uicollectionview nslayoutconstraint aspect-ratio


    【解决方案1】:

    是的,就像谷歌在他们的图像 API 中所做的那样,并将图像尺寸存储在您的数据库中。

    查看他们自定义的路线搜索 api

    customsearch/v1

    返回

    @"pagemap.cse_thumbnail.width"
    @"pagemap.cse_thumbnail.height"
    

    一旦你有了这些值,然后在 UICollectionView 的 delgate 方法中,特别是sizeForItemAtIndexPath,你从服务器查询中提取那些存储的值,然后将单元格的大小标准化为等于屏幕总宽度的宽度高度调整以适应。

    您可以使用这样的函数以标准化方式获取单元格的大小

    static CGFloat CustomFloatCalc(CGFloat value) {
       CGFloat scale = [UIScreen mainScreen].scale;
       return floor(value * scale) / scale;
    }
    

    类似这样的:

         CGFloat itemHeight = 0;
         if (itemSize.height > 0 && itemSize.width > 0) {
            itemHeight = CustomFloatCalc(itemSize.height * itemWidth / itemSize.width);
         }
    

    现在您可以在 sizeForItemAtIndexPath 中即时计算图像的值,但这样做会增加设备上的内存和 CPU 负载。最好像 Google 一样将值存储在后端。

    祝你好运

    【讨论】:

    • 我相信sizeForItemAtIndexPath属于流布局委托,但我使用UICollectionViewCompositionalLayoutsizeForItemAtIndexPath 在我的情况下仍然有效吗?
    • 是的,应该做同样的事情
    • 谢谢。就像您建议的那样,我将图像尺寸保存在数据库中。我无法使约束更改起作用。 sizeForItemAtIndexPath 也不起作用。但是,我找到了另一种解决方法。见stackoverflow.com/a/58585722/246392
    • @user246392 你好,如果找到解决方法,有时间你可以在答案中更新它并记得稍后标记它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-07-19
    • 1970-01-01
    • 2017-02-02
    • 1970-01-01
    • 1970-01-01
    • 2014-08-09
    • 1970-01-01
    相关资源
    最近更新 更多