swift 带有.aspectFill的UICollectionView UI图像正在更改约束

tquggr8v  于 2023-01-25  发布在  Swift
关注(0)|答案(2)|浏览(127)

我有一个非常简单的集合视图,其中包含图像,我的Cell类如下所示:

class ImageListCell: UICollectionViewCell {
    @IBOutlet weak var btnDelete: UIButton! {
        didSet {
            btnDelete.layer.cornerRadius = btnDelete.frame.height / 2
        }
    }
    @IBOutlet weak var imageView: UIImageView!
    
    @IBAction func btnDeleteTap(_ sender: Any) {
        print("Delete image")
    }
}

单元格的imageView约束在顶部和尾部边缘有一些填充:

如果我将ImageListCell背景设置为红色,将imageView背景设置为绿色,则如下所示:

完全正确!
然而,如果我所做的只是添加一个图像到imageView的约束得到所有愚蠢的?

这只发生在.aspectFill中,如果我将其更改为.scaleToFill,它会工作,但图像都被拉伸。

我确保我没有调整单元格大小或任何东西,并关闭了集合视图上的Estimated Size
有人知道为什么.aspectFill会覆盖我的约束吗?

gdx19jrr

gdx19jrr1#

你的问题中有几处似乎不正确。
你所指的内容模式的值是.aspectFit.aspectFill。在Swift代码中没有这样的值。这些值是.scaleAspectFit.scaleAspectFill。在情节串连图板中,视图的“内容模式”属性可以是“方面适合”、“方面填充”等。
因为你是在故事板中设置单元格的,所以我将引用故事板属性设置。我所描述的一切都适用于集合视图单元格中的UIImageView插座。
您显示的第一个屏幕截图(您声称为.aspectFit)只有在您将“内容模式”设置为“方面填充”时才会出现(不是你声称的“宽高比适合”),并且你关闭了“剪裁到边界”设置。设置了“宽高比填充”,宽图像将正确地填充图像视图的高度(这就是为什么你仍然可以看到顶部的红色边框,但是图像的左边和右边会溢出到图像视图之外(这就是为什么你看不到右边的红色边框)。如果选中了“剪切到边界”,右侧红色边框将可见。集合视图单元格本身会剪切其所有内容,以防止溢出的图像溢出单元格的框架。
你展示的第二张截图,你声称是.aspectFill,将是将“内容模式”设置为“缩放以填充”,而不是“纵横比填充”的结果。无论是否选中“剪辑到边界”,结果都是一样的。“缩放以填充”根据需要扭曲图像,以完全填充图像视图的高度和宽度。
根据您的描述,您想将“内容模式”设置为“宽高比”。虽然“宽高比”并不真正需要,但启用“剪裁到边界”也无妨。这将显示整个图像,带有适当的绿色边框,并且没有失真。
tl;dr -你的限制很好。你并没有在第一张图片中将图片视图的内容模式设置为“Aspect Fit”。你只是将其设置为“Aspect Fill”并且“Clip to Bounds”关闭。
如果要在代码中执行此操作,则需要:

imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true // optional for .scaleAspectFit
xxe27gdn

xxe27gdn2#

  • 您的约束 * 没有任何 * 变化。图像视图完全在您放置它的位置。
  • 在第一个带图像的图片中,.aspectFit的行为 * 完全符合预期:* 图像视图中图像外部周围没有空白,图像也没有失真。如果您不喜欢图像从右侧“泄漏”的事实,那只是因为您忘记将图像视图的clipsToBounds设置为true
  • 第二张有像的图片不是你所说的.aspectFill,而是.scaleToFill,两者有很大的不同,所以你对现象的陈述甚至是不正确的。.scaleToFill会扭曲图像;.aspectFill不会这样做(但它会显示图像视图的绿色背景)。

相关问题