如何设置动态宽度 UICollectionViewCell

Posted 2023-03-11

【中文标题】如何设置动态宽度 UICollectionViewCell

【英文标题】：How to Set Dynamic Width UICollectionViewCell

【发布时间】：2017-08-10 08:41:05

【问题描述】：

我构建了一个 ios 应用程序，并将 Collection View 与 Collection View Cell 结合使用。我已经将 Collection View 约束设置为主视图。但是，但是，如果我运行该应用程序，它会给出不同的结果。甚至，在 iPhone 5 版本中，内容与屏幕宽度重叠。

请看下面的截图

集合视图的内容与屏幕大小重叠。请与下面的 iPhone 7 和 7plus 版本进行比较

这是 iPhone 7p 版本

我已经尝试为上、左、下、右设置特定约束，但它没有给出任何结果。这是我的视图控制器故事板

我搜索了整个网站，但我只找到了如何设置动态高度，而不是宽度。我只想设置动态宽度，因为内容高度是恒定的。谁能给我一些建议？

注意：这是我的收藏视图代码（可能有人想看）

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
    let screenSize: CGRect = UIScreen.main.bounds


    return CGSize(width: collectionPromo.bounds.size.width, height: collectionPromo.collectionViewLayout.collectionViewContentSize.height);

我尝试设置该代码的动态宽度（我在互联网上找到的）

注意：这不是图像视图内容模式的问题，因为重叠的是整个内容（包括标签），而不仅仅是图像视图 这是我的收藏视图代码

public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellPromo", for: indexPath)

    var labelPromo = cell.viewWithTag(3) as! UILabel
    labelPromo.text = list[indexPath.row].Period

    var imagePromo = cell.viewWithTag(2) as! UIImageView
    let promimg = try? UIImage(data: Data(contentsOf: URL(string: list[indexPath.row].ImageUrl)!))
    imagePromo.image = promimg!
    imagePromo.contentMode = UIViewContentMode.scaleAspectFit
    //imagePromo.layer.masksToBounds = true
    imagePromo.clipsToBounds = true


    cell.layer.masksToBounds = false
    cell.layer.borderColor = UIColor.white.cgColor
    cell.layer.borderWidth = 5.0
    //cell.layer.contentsScale = UIScreen.main.scale
    cell.layer.shadowOpacity = 0.25
    cell.layer.shadowRadius = 5.0
    cell.layer.shadowOffset = CGSize.zero
    cell.layer.shadowPath = UIBezierPath(rect: cell.bounds).cgPath
    cell.layer.shouldRasterize = true
    cell.layer.backgroundColor = UIColor.white.cgColor


    return cell

【问题讨论】：

图像视图有什么限制？

看故事板（右侧部分）

我认为你为 iphone 7 固定了 collectionview 的宽度，所以它在 iphone 5 中溢出

@PhuDuy 如何使其动态化？我只是设置了上下左右约束

@christ2702 您尝试将视图更改为 iphone 5，我发现您的图像中存在与宽度相关的约束

【参考方案1】：

使用 collectionView 方法设置 CollectionView 的边缘。 Collection View 自动计算其动态宽度。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets

    return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

或者你可以使用这个。

但尝试将以下代码放入 viewDidLoad() 中：

collectionView!.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

这将为 collectionView 的每一侧添加填充。

【参考方案2】：

您可以为图像视图添加背景颜色。并在方面适合它。您需要在应用中添加非纵向模式的图像。您还需要添加约束，以便没有图像扩展边界。

简单的建议是调试它在特定设备上伸展的原因？ 遵循三个步骤 1) 使用背景颜色

2) 对图像视图的约束

3) 使用图像纵横比

    Try this - let IS_OS_8_OR_LATER = 
    Float(UIDevice.currentDevice().systemVersion) >= 8.0

   let IS_IPHONE = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiom.Phone

   let IS_STANDARD_IPHONE_6 = (IS_IPHONE && 
   UIScreen.mainScreen().bounds.size.height == 667.0 && IS_OS_8_OR_LATER && 
    UIScreen.mainScreen().nativeScale == UIScreen.mainScreen().scale)

let IS_ZOOMED_IPHONE_6 = (IS_IPHONE && 
UIScreen.mainScreen().bounds.size.height == 568.0 && IS_OS_8_OR_LATER && 
 UIScreen.mainScreen().nativeScale > 
UIScreen.mainScreen().scale)

let IS_STANDARD_IPHONE_6_PLUS = (IS_IPHONE && 
UIScreen.mainScreen().bounds.size.height == 736.0 )

let IS_ZOOMED_IPHONE_6_PLUS = (IS_IPHONE && 
UIScreen.mainScreen().bounds.size.height == 667.0  && IS_OS_8_OR_LATER && 
UIScreen.mainScreen().nativeScale < UIScreen.mainScreen().scale)

if IS_ZOOMED_IPHONE_6_PLUS 
    //do something

【讨论】：

iPhone 7plus 版本，集合视图单元格左右两侧的额外空间

它的简单问题布局与图像方面问题。只需尝试添加更多约束并使用方面填充和拟合。

更新我的答案请检查

我已经尝试过您的建议，但没有给出不同的结果。因为图片下方的 UILabel 也是重叠的。请记住，我不仅使用图像视图，还使用集合视图单元格

我确定这是自动布局问题。但是如果你相信你已经完成了最后一件事，我建议你是这段代码