CODEWITHSUNDEEP
iosswiftuicollectionview
Harry Blue
Harry Blue

Reputation: 4502

How can I force number of items per row

I have a collection view, I'd like to render the following layout

layout

I tried to restrict the number of cells but I am unsure how to force the different count per row as you can see in the design

class ViewController: UIViewController {

  private(set) lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: view.frame, collectionViewLayout: UICollectionViewFlowLayout())
    collectionView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
    collectionView.backgroundColor = .systemBackground
    collectionView.dataSource = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "CustomCell")
    return collectionView
  }()

  override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.backgroundColor = #colorLiteral(red: 0.1215686275, green: 0.1294117647, blue: 0.1490196078, alpha: 1)
    collectionView.contentInset = .init(top: 24, left: 24, bottom: 24, right: 24)
    view.addSubview(collectionView)
  }

}

extension ViewController: UICollectionViewDataSource {
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return (5 * 5) + 6
  }

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath)
    cell.backgroundColor = #colorLiteral(red: 0.1647058824, green: 0.1764705882, blue: 0.2117647059, alpha: 1)
    cell.layer.cornerRadius = cell.frame.width / 2
    return cell
  }
}

My attempt only renders

enter image description here

The colors aren't important only the layout.

Upvotes: 1

Views: 160

Answers (1)

nodediggity
nodediggity

Reputation: 2478

If you can define the height / width for your collection view you can calculate the position

enter image description here

class ViewController: UIViewController {

  private(set) lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.backgroundColor = .systemBackground
    collectionView.dataSource = self
    collectionView.delegate = self
    collectionView.isScrollEnabled = false
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "CustomCell")
    return collectionView
  }()

  override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.backgroundColor = #colorLiteral(red: 0.1215686275, green: 0.1294117647, blue: 0.1490196078, alpha: 1)
    collectionView.contentInset = .init(top: 24, left: 24, bottom: 24, right: 24)
    view.addSubview(collectionView)
    NSLayoutConstraint.activate([
      collectionView.heightAnchor.constraint(equalToConstant: 340),
      collectionView.widthAnchor.constraint(equalToConstant: 300),
      collectionView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
      collectionView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    ])
  }

}

extension ViewController: UICollectionViewDataSource {

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

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

    switch indexPath.item {
      case 0, 5, 42, 47: cell.backgroundColor = #colorLiteral(red: 0.1215686275, green: 0.1294117647, blue: 0.1490196078, alpha: 1)
      default: cell.backgroundColor = #colorLiteral(red: 0.1647058824, green: 0.1764705882, blue: 0.2117647059, alpha: 1)
    }
    cell.layer.cornerRadius = cell.frame.width / 2
    return cell
  }
}

extension ViewController: UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return .init(width: 28, height: 28)
  }
}

Upvotes: 1

Related Questions