Clip last UICollectionViewCell if their total width is greater the UICollectionView width

Question

I have a scenario where I have a horizontal scrolling collection view has a number of X cells. The default width of the cell is 71 points.

Depending on the value of X, I might have less cells when their total width is less than the width of the collection view, which is fine. Bun if their total width (cell count * 71) is larger than the width of the collectionView, show a number of cells Y that fit perfectly and half of the next one, so the user knows is horizontally scrollable.

This is what I have now

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if dataSource.count * 71 <= collectionView.bounds.width {
            return CGSize(width: 71, height: collectionView.bounds.height)
        } else {
            // if it's larger just show Y number of cells with the last one visible cut in half, so the user knows it's horizontally scrollable 
        }
    }
}

score 0 · Answer 1 · answered Jan 30 '19 at 21:13

Try to update the width of the CollectionView when dequeuing the last collection view cell, something like this:

 func dequeueReusableCell(withReuseIdentifier identifier: String, 
                     for indexPath: IndexPath) -> UICollectionViewCell {
 let cell = ....
 if cell.width < 71 {
  collectionView.width = collectionView.width - 71 +cell.width
  self.layoutIfNeeded()
 }

}

score 0 · Answer 2 · answered Jan 30 '19 at 21:34

Something like this ?

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {
    let targetWidth: CGFloat = 71
    if dataSource.count * targetWidth <= collectionView.bounds.width {
        return CGSize(width: targetWidth, height: collectionView.bounds.height)
    } else {
        let numberOfCellsToFit = Int(collectionView.bounds.width / targetWidth)
        let cellWidth = collectionView.bounds.width / (CGFloat(i) - 0.5)
        return CGSize(width: cellWidth, height: collectionView.bounds.height)
    }
}

score 0 · Answer 3 · answered Jan 31 '19 at 11:25

You can try this code:

    extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if dataSource.count * 71 <= collectionView.bounds.width {
            return CGSize(width: 71, height: collectionView.bounds.height)
        } else {
            return CGSize(width:(collectionView.bounds.width/4) * 3, height: collectionView.bounds.height)
        }
    }
}

trusk · Accepted Answer · 2019-02-01T07:39:57.667

Found my solution, thanks all for the help

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    let collectionViewWidth = self.width
    let numberOfCellsToFit = round(collectionViewWidth / cellWidth)
    let spaceBetweenCells = (collectionViewWidth - cellWidth/2) / (numberOfCellsToFit - 1)

    return (spaceBetweenCells - cellWidth)
   }

Clip last UICollectionViewCell if their total width is greater the UICollectionView width

4 Answers4