Enforce Collectionview to Have Only 2 Rows

How do I get UICollectionView to continuously scroll horizontally instead of creating a second row?

first set your collectionView FlowLayout scrollDirection to horizontal.

let myColl:UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    let coll = UICollectionView(frame: .zero, collectionViewLayout: layout)
    return coll
}()

then Set your collectionview height constraint equal (or little bit grater) to the cell height

myColl.heightAnchor.constraint(equalToConstant: 50).isActive = true

set your cell size in here

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width-32, height: 50)
    }

Aligning collection view cells to fit exactly 3 per row

You have to implement the

UICollectionViewDelegateFlowLayout

for the spacing stuff.

Set the size of the collectionViewCells like this:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let yourWidth = collectionView.bounds.width/3.0
    let yourHeight = yourWidth

    return CGSize(width: yourWidth, height: yourHeight)
}

You can also add these functions to get your spacing of the collectionViewCells correct:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets.zero
}

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

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

I want the Collection view to show 2 Columns per Row, how do I do that? [with Swift 5 answers please]

You need not check the device size because we can use the collectionView width to calculate the width of the cell. Using the cell width you can calculate the height as per your need.

One more thing: You need to use UICollectionViewDelegateFlowLayout & confirm the delegate & implement method below

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    let padding: CGFloat =  25
    let collectionViewSize = collectionView.frame.size.width - padding
    return CGSize(width: collectionViewSize/2, height: 115)
}

How can I force number of items per row

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

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)
  }
}

How to show two columns in a CollectionView using swift4 in all devices

add this code to viewDidLoad.
change height according to you.

try this!

if let layout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout{
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 10
        layout.sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
        let size = CGSize(width:(collectionView!.bounds.width-30)/2, height: 250)
        layout.itemSize = size
}

---

Related Topics