动态 UICollectionView 单元格框架

Posted 2023-03-13

【中文标题】动态 UICollectionView 单元格框架

【英文标题】：Dynamic UICollectionView Cell Frame

【发布时间】：2018-07-27 04:04:38

【问题描述】：

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

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

这是我的代码

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)

【问题讨论】：

使用自定义布局'UICollectionViewLeftAlignedLayout'就可以了

你的意思是我必须使用图书馆？ @Anuraj

是的..我用过这个

有什么想法可以让我在不使用库的情况下实现它吗？ @Anuraj

@Anuraj 谢谢老兄，我终于使用了你推荐的（TagListView）库

【参考方案1】：

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

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

【讨论】：

我试过放文件，但错误太多。你能告诉我怎么做吗？

你在使用 xib 吗？您是手动创建collectionview 还是在XIB 中创建？

检查链接是否有“Setup in Interface Builder”，“Setup in code”，如果你不明白什么就问。

我正在我的故事板中创建集合视图单元格。错误来自我第一次放置文件。我的代码没有错误，但是文件（AlignedCollectionViewFlowLayout.swift）本身有很多错误

你使用的是 Swift 3 还是 4？

【参考方案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 起作用。

希望对您有所帮助。

【讨论】：

感谢您的回答，但您的代码返回的代码与我的代码相同

hmm...那么您的设置中一定有其他不同的东西...因为上述工作对我有用 :) 您能告诉我您是如何定义布局的吗？

请检查我的更新；）。在情节提要上，我为我的集合视图 8、8、16、16（顶部、底部、尾随、前导）设置了约束，以防您需要知道

@Jason 我已经更新了我的答案，确保你实现了UICollectionViewDelegateFlowLayout 并将你的视图控制器添加为delegate（参见这个很好的答案，例如：***.com/a/12925529/4063602）跨度>

好的。并且你可以看到如果你在其中放置一个断点，你的方法被调用了？

【参考方案3】：

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