UICollectionViewCell 动态宽度和固定高度答案

【问题标题】：UICollectionViewCell dynamic width and fixed heightUICollectionViewCell 动态宽度和固定高度
【发布时间】：2018-03-20 16:39:05
【问题描述】：

我需要制作椭圆形的 UICollectionView 单元格，其中高度是固定的，但宽度是动态的，并且它也有限制，如果文本长于该长度，则文本应该滚动。任何可用于此或需要使用 UICollectionView 创建自己的第三方选项。请指导。

下面是我想要实现的图像。在开始之前我想知道我应该寻找第三方还是使用 UICollectionView 自己制作。我有很短的时间来完成这就是为什么要避免在搜索时询问自己要遵循哪个方向。请指导。

【问题讨论】：

你可以得到String的宽度，据此你可以设置宽度的大小，所以你必须使用sizeforitem方法，你必须包括UIcollectionFlowlayoutdelegate
看看这个 repo github.com/riteshhgupta/TagCellLayout
@BhupatBheda 这似乎很有用，但我正在开发 swift 4，它可能不支持它，因为它有 1 年的历史提交。
这么简单的事情你肯定不需要第三方库。
好吧，那么请采纳我的第一个建议，我希望它会起作用！@iphone 6 或者你也可以看看这个codentrick.com/create-a-tag-flow-layout-with-uicollectionview

标签： ios gridview uicollectionview ios11 xcode9

【解决方案1】：

您可以使用 UICollectionViewFlowLayout 和 Auto Layout 来实现这一点。

使用容器视图创建 UICollectionViewCell。
使用自动布局固定此容器视图的单元格边缘
为这个容器视图添加一个 UILabel 并将它固定到容器视图的所有边缘（给它一个背景颜色以区别于单元格背景）
在 UICollectionViewCell 子类中，您需要圆角容器视图，例如self.containerView.layer.cornerRadius = self.containerView.height / 2
在 UICollectionViewFlowLayoutDelegate 方法中，estimatedSizeForItem 返回单元格的近似大小（自动布局将计算实际大小。）

要记住的重要一点是您的单元格需要有足够的约束，以便自动布局引擎可以根据内容计算实际的高度和宽度。

编辑：如果您想要一个固定的高度，请确保您的标签只能有一行。或者添加一个高度约束。

【讨论】：

实际上 op 要求的是动态宽度而不是动态高度！
为什么这个解决方案不适用于动态宽度...？我已经编辑得不那么模棱两可了，但解决方案是一样的。
你写过自动布局可以计算实际高度！这就是我指出的原因！现在您编辑的答案很好！
我找到了一个有用的库。感谢您的支持。

【解决方案2】：

最后，我找到了一个库 TagListView，它可以通过 cocoapods 进行安装，并具有大量自定义和 swift 4 支持。

【讨论】：

【解决方案3】：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

  let nw = intersts[indexPath.row]

    let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
    let size = CGSize(width: 250, height: 1500)

    let estimatedFrame = NSString(string: nw).boundingRect(with: size, options: options, attributes: [NSAttributedStringKey.font : UIFont.systemFont(ofSize: 17)], context: nil)
    let attributes = [NSAttributedStringKey.font : UIFont.systemFont(ofSize: 17)]

    let yourLabelSize: CGSize = nw.size(withAttributes:attributes )
    var width1 = yourLabelSize.width + 30
    if width1 < 30 {
        width1 = 30
    }

    return CGSize(width: estimatedFrame.width+20, height: estimatedFrame.height+20)
}

【讨论】：

【解决方案4】：

我只是扩展或实现@Tim 答案。因此，在按照他的回答中所述构建单元格之后，然后使用下面的示例代码指定单元格的宽度和高度以灵活，即类似于他描述的内容

    let collectionViewLayout = UICollectionViewFlowLayout()
    collectionViewLayout.scrollDirection = .horizontal
    let itemWidth = Constants.myCollectionViewItemWidth
    let itemHeight = Constants.myCollectionViewItemHeight
    collectionViewLayout.estimatedItemSize = CGSize(width: itemWidth, height: itemHeight)
    myCollectionView.collectionViewLayout = collectionViewLayout

【讨论】：