xcode 当超出UICollectionView宽度时,UICollectionViewCell移动到下一行

pgx2nnw8  于 2023-03-31  发布在  其他
关注(0)|答案(2)|浏览(200)

我想做一个不定的UICollectionViewCell,一旦它超过了UICollectionView的宽度,它就移动到另一行。

正如你所看到的,单元格的每个宽度都会根据里面的内容调整大小。下一个单元格将水平移动,然后如果超过宽度,它会创建另一行。
下面是我的UICollectionView

var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.backgroundColor = .white
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.backgroundColor = MSColorFoundation.msClear
    return collectionView
}()

下面是我的UICollectionViewLayoutDelegate:

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

    let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout

    let totalSpace = (flowLayout?.sectionInset.left ?? 0.0)
    + (flowLayout?.sectionInset.right ?? 0.0)
    + ((flowLayout?.minimumInteritemSpacing ?? 0.0) * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))

    return CGSize(width: size, height: 60)
}
wrrgggsh

wrrgggsh1#

这听起来像是你想实现一个UICollectionView,其中的单元格从左到右流动,当它们超过集合视图的宽度时会换行到下一行。这可以使用UICollectionViewFlowLayout来实现,这是UIKit提供的内置布局类。
若要创建从左到右排列单元格并换行到下一行的UICollectionViewFlowLayout,可以将滚动方向设置为水平,并根据需要调整minimumInteritemSpacing和minimumLineSpacing属性。在此处输入代码

class MyCollectionViewController: UICollectionViewController {
    // Set up the collection view flow layout
    let flowLayout = UICollectionViewFlowLayout()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Configure the flow layout
        flowLayout.scrollDirection = .horizontal
        flowLayout.minimumInteritemSpacing = 10
        flowLayout.minimumLineSpacing = 10
        collectionView.collectionViewLayout = flowLayout

        // Register your custom UICollectionViewCell subclass
        collectionView.register(MyCustomCell.self, forCellWithReuseIdentifier: "MyCustomCell")
        }

        // Implement the UICollectionViewDataSource methods to provide the data for your cells
        override func numberOfSections(in collectionView: UICollectionView) -> Int {
            return 1
        }

        override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // Return the number of items in your data source
        return myData.count
        }

        override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCustomCell", for: indexPath) as! MyCustomCell

            // Configure the cell with data from your data source
            cell.configure(with: myData[indexPath.item])

            return cell
        }
    }

在自定义UICollectionViewCell子类中,可以设置autoresizingMask属性,以允许单元格在集合视图宽度更改时根据需要调整自身大小

class MyCustomCell: UICollectionViewCell {
    let label = UILabel()

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

    // Set up the cell's subviews
    label.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(label)
    NSLayoutConstraint.activate([
        label.topAnchor.constraint(equalTo: contentView.topAnchor),
        label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
        label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
    ])

    // Configure the label's appearance
    label.textAlignment = .center
    label.textColor = .white
    label.backgroundColor = .blue
}

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

func configure(with text: String) {
    label.text = text
}

override func layoutSubviews() {
    super.layoutSubviews()

    // Allow the cell to resize itself as needed when the collection view width changes
    contentView.autoresizingMask = [.flexibleWidth]
}
}
igetnqfo

igetnqfo2#

从你的代码来看,sizeForItemAt函数总是以一种方式创建单元格,你的集合视图总是有3个单元格在一行中。我建议你省略你的sizeForItemAt函数并创建一个简单的Xib单元格。在你的Xib中取一个标签,然后给予你的标签一个前导和尾随常量,然后将Xib注册到你的集合视图中。这将使您的每个单元格自动依赖于其标签,并从其标签推断其宽度。

相关问题