Swift - 在CollectionView中设置不同宽度的单元格之间的固定间距

时间:2018-03-05 18:14:18

标签: ios swift uicollectionview

我有一个集合视图,可以显示用户技能。

 lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .white
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.keyboardDismissMode = .interactive
        collectionView.delegate = self
        collectionView.isScrollEnabled = false
        collectionView.dataSource = self
        collectionView.register(cvcSkills.self, forCellWithReuseIdentifier: self.skillsId)
        return collectionView
    }()

每个技能都在一个单元格中,其宽度根据单词的长度设置(如图所示)

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

    var width:CGFloat = 0

        // Width size calculated depending on the size of the text
        let skill = skills[indexPath.row]
        if let name = skill.name {

            let size: CGSize = name.size(withAttributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 14.0)])
            width = size.width + 30
        }
    }
    return CGSize(width: width, height: 40)
}

current view

正如你所看到的,由于某些原因,这些细胞之间的间距是任意的,我似乎无法使它们彼此之间的距离相等。

我试过设置这样的插图(这是我当前的代码,显示在图像中):

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsetsMake(0, 5, 0, 5)
    layout.invalidateLayout()
    collectionView.collectionViewLayout = layout

我还尝试将minimumInteritemSpacingminimumLineSpacing设置为不同的值,但我仍然在每个单元格之间保持不同的大小空间。

关于如何让这些细胞与每个细胞分开10个的任何想法。

1 个答案:

答案 0 :(得分:1)

正如Fogmeister建议的那样,您需要创建自己的自定义流程布局以支持此需求。

但是,如果您需要,我有一个支持上述要求的流式布局,即尝试vertical类型(还有其他类型)。

https://github.com/varunpm1/VPCollectionViewLayout

虽然我分享了它,但我建议您仔细阅读代码并自行尝试。使用自定义流布局很有趣。