How can i make collectionview like this

First visible cell always scale 1 and other visible cell scale 0.8.

I want to make like this

Do you mean different image size ? Something else ?

For different image size, several solutions:

  • compute cellsize:

https://stackoverflow.com/questions/44182094/uicollectionview-with-different-cell-size

  • have same cell size and set contentMode as needed for the image

This can be done with UICollectionViewCompositionalLayout. Build the horizontal grid with the compositional layout, then set the visibleItemsInvalidationHandler on your NSCollectionLayoutSection. There, you can see the current size and current scroll offset, and you can adjust the properties on the visible items.

Check out the documentation of this property here: https://developer.apple.com/documentation/uikit/nscollectionlayoutsection/3199096-visibleitemsinvalidationhandler?language=objc

And more details here: https://developer.apple.com/documentation/uikit/nscollectionlayoutsectionvisibleitemsinvalidationhandler?language=objc

There may be a basic way to do it, using scrollViewDidScroll

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        var firstCell = UICollectionViewCell()
        var leftPos : CGFloat = maxInt // Start with very large
        
            // Which is the leftmost
         for cell in collectionView.visibleCells {
                // Restore cell drawing
                // Adjust scaling to 0.8

                let point = cell.convert(cell.frame.origin, to: self.view)
                let leftOfcell = point.x 
                let rightOfcell = point.x+ cell.frame.width
                if leftOfcell <  leftPos && cell.frame.minX > 0 {
                    leftPos = leftOfcell
                    firstCell = cell
                }
            }
            // Enlarge the firstCell
            // Adjust scaling to 1.0
        }
    }

I tested in a slightly different setup, and it seems to work correctly.

How can i make collectionview like this
 
 
Q