动态 UICollectionView 单元格框架

Question

现在，我遇到了一个问题。

我设法将单元格的内容视图包装到它的标签上，但是有些间距不适合设计。单元格之间有一些可用空间

这是我的代码

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 4
}

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

    let hastag = Hastag.fetchHastag()[indexPath.row]

    let approximateWidth = view.frame.width - 20
    let size = CGSize(width: approximateWidth, height: 28)
    let attribute = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)]

    let estimatedFrame = NSString(string: hastag.hastag).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attribute, context: nil)

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

}

下面是结果

这就是我想要实现的，它会是这样的

更新

这是我收集视图数据源和委托的完整代码。 Hastag.hastag 是字符串类型

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return Hastag.fetchHastag().count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hastagCell", for: indexPath) as! HastagCollectionViewCell

    cell.hastag = Hastag.fetchHastag()[indexPath.row]

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 4
}

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

    let hastag = Hastag.fetchHastag()[indexPath.row]

    let approximateWidth = view.frame.width - 20
    let size = CGSize(width: approximateWidth, height: 28)
    let attribute = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)]

    let estimatedFrame = NSString(string: hastag.hastag).boundingRect(with: size, options: .usesLineFragmentOrigin, attributes: attribute, context: nil)

    return CGSize(width: estimatedFrame.width + 16, height: 26)

}

Answer 1

您可以使用AlignedCollectionViewFlowLayout，它不是一个库，只有一个文件。只需将此文件添加到您的项目中，然后从您的UICollectionView xib 中将流布局设置为AlignedCollectionViewFlowLayout。这是非常容易使用。请检查以下链接。

https://github.com/mischa-hildebrand/AlignedCollectionViewFlowLayout

Answer 2

您可以使用NSString 的size(withAttributes:) 函数为您提供具有特定字体和大小的字符串的CGSize。

假设Hastag.hastag 是String 我认为以下应该可行：

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let hastag = Hastag.fetchHastag()[indexPath.row]
        let title = hastag.hastag as NSString
        let titleSize = title.size(withAttributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 12)])
        return CGSize(width: titleSize.width + 20, height: 26)
    }
}

注意您的ViewController 必须实现UICollectionViewDelegateFlowLayout 协议，并且您必须将ViewController 设置为delegate 才能使UICollectionView 起作用。

希望对您有所帮助。

Answer 3

经过几次尝试，我终于放弃了自定义单元格大小，而是使用库TagListView