UICollectionView 单元格不是并排的答案

【问题标题】：UICollectionView Cells are not side by sideUICollectionView 单元格不是并排的
【发布时间】：2018-02-10 13:44:03
【问题描述】：

我有 UICollectionView 2 行单元格。只要文本在单元格的长度但单元格不是并排的。

如何解决。

这是我的代码。

    let musicType = ["Blues", "Klasik", "Halk", "Hip-hop", "Caz", "Pop", "Rock", " Enstrümantal", "House", "Rap" , "Slow"]

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: customCellIdentifier, for: indexPath as IndexPath) as! CustomCell
        cell.nameLabel.text = musicType[indexPath.item]
        cell.sizeToFit()
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
       // let cell = collectionView.cellForItem(at: indexPath) as? CustomCell

        let text = NSAttributedString(string: musicType[indexPath.item])
        print(musicType[indexPath.item])
        print(" - ")
        print(text.size())

        let width = (text.size().width) * 2
        let height = CGFloat(40)
        return CGSize(width: width, height: height)

    }



}

class CustomCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    let nameLabel: UILabel = {
       let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        return lbl
    }()


    func setupView(){
        backgroundColor = UIColor.red
        addSubview(nameLabel)
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": nameLabel]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": nameLabel]))
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

【问题讨论】：

现在，你怎么样了？一个接一个或并排[如您问题的屏幕截图所示] ??

标签： ios swift uicollectionview cell

【解决方案1】：

添加这个方法：

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

【讨论】：

我已经让 layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() layout.sectionInset = UIEdgeInsets(top: CGFloat(screen.widthHesap(x: 449)), left: 0, bottom: CGFloat(screen.heightHesap (x: 108)), 右: CGFloat(screen.widthHesap(x: 150))) layout.scrollDirection = .horizontal layout.minimumInteritemSpacing = 10 layout.minimumLineSpacing = 10
你不应该使用 UICollectionViewFlowLayout。尝试使用自定义布局，如github.com/mokagio/UICollectionViewLeftAlignedLayout
你有什么适合 Swift 的

【解决方案2】：

我相信您只需要在 setUpViews() 函数中添加“覆盖”即可：

 class BaseCell: UICollectionViewCell {

override init(frame: CGRect) {
    super.init(frame: frame)
    setUpViews()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")

}


func setUpViews() {
    backgroundColor = .blue

}

}
class FriendCell: BaseCell {

     override func setUpViews() {

        addSubview(profileImageView)
        addSubview(dividerLineView)

        setUpContainerView()

        profileImageView.image = UIImage(named: "boy.png")


        addConstraintsWithformat(format: "H:|-12-[v0(68)]", views: profileImageView)
        addConstraintsWithformat(format: "V:[v0(68)]", views: profileImageView)

        addConstraint(NSLayoutConstraint(item: profileImageView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0))

        addConstraintsWithformat(format: "H:|-82-[v0]|", views: dividerLineView)
        addConstraintsWithformat(format: "V:[v0(1)]|", views: dividerLineView)

}

并添加类似这样的内容来尝试一下：

private func setUpContainerView() {
        let containerView = UIView()
        addSubview(containerView)

        addConstraintsWithformat(format: "H:|-90-[v0]|", views: containerView)
        addConstraintsWithformat(format: "V:[v0(50)]|", views: containerView)
        addConstraint(NSLayoutConstraint(item: containerView, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0))



    }

【讨论】：

我正在尝试，但我得到了错误——方法没有覆盖其超类中的任何方法
首先您需要创建一个继承自 UICollectionViewCell 的类并添加 setUpViews() 函数。然后你想使用那个“BaseCell”作为你正在显示的单元格的超类。这样您就可以覆盖 setUpViews() 函数。希望这会有所帮助！
好的....我添加了更多代码。尝试将 UIView 添加到单元格的内容中，然后首先编辑这些约束。这是通过 setUpContainerView() 函数完成的。
完整示例和代码在这里letsbuildthatapp.com/course/Facebook-Chat-Messenger

【解决方案3】：

请使用自定义布局对齐collectionview单元格

使用下面的库::https://github.com/mokagio/UICollectionViewLeftAlignedLayout

使用以下代码设置集合视图布局

    let layout = UICollectionViewLeftAlignedLayout.init()
    self.collectionView.collectionViewLayout = layout

【讨论】：