Make CollectionView Cell horizontal cell bigger than others

Question

I have a collectionView and want to make the center cell is bigger than other cells and when move to previous or next cell make it bigger in center

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    if collectionView == self.collectionView {
        return slidData.count
    } else {
        return categoryData.count
    }
}

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

        cell.categoryName.text = slidData[indexPath.row].imageTitle
        cell.detail.text = slidData[indexPath.row].imageContent
        cell.pics = slidData[indexPath.item]

        return cell
    } else{
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "categoryCell", for: indexPath) as! CategoryCell

        cell.categoryName.text = categoryData[indexPath.row].depName
        cell.pics = categoryData[indexPath.item]

        return cell
    }
}

score 1 · Accepted Answer · answered Oct 16 '18 at 17:50

You need to save the selected indexPath like this:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    selectedIndexPath = indexPath 
}

Your collection view must confirm UICollectionViewDelegateFlowLayout. Then in sizeForItemAt method resize your cell:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    if indexPath == selectedIndexPath {
        return CGSize(width: 200, height: 90)
    } else {
        return CGSize(width: 180, height: 80)
    }
}

score 0 · Answer 2 · answered Oct 16 '18 at 16:53

0

Basically you want a Carousel animation.

Take a look into this library and either use full of it or take help from the code.

answered Oct 16 '18 at 16:53

Deepak

348
4
14

score 0 · Answer 3 · answered Apr 10 '20 at 07:55

You can achieve this by using ScrollViewDidScroll(_:) method and find the center cell and enlarge it. I wrote clear comments on the code below, if you want to go into details check-out my article about this:

https://medium.com/@sh.soheytizadeh/zoom-uicollectionview-centered-cell-swift-5-e63cad9bcd49

func setFocusedCellStyle(_ scrollView: UIScrollView) {
        guard scrollView is UICollectionView else { return }
        // get the centerPoint
        let centerPoint = CGPoint(x: self.collectionView.frame.size.width / 2 + scrollView.contentOffset.x, y: self.collectionView.frame.size.height / 2 + scrollView.contentOffset.y)
        // get the indexPath for the cell at center
        if let indexPath = self.collectionView.indexPathForItem(at: centerPoint), self.centerCell == nil {
            // centerCell is instance variable of type: YourCell
            self.centerCell = (self.colorPickerCollectionView.cellForItem(at: indexPath) as! CustomCollectionViewCell)

            UIView.animate(withDuration: 0.2) {
                // Choose desired scale value
                self.transform = CGAffineTransform(scaleX: 1.58, y: 1.58)
            }
        }

        if let cell = self.centerCell { // center cell is global variable
            let offsetX = centerPoint.x - cell.center.x // get to current position of the cell
            // when cell is 15 pixels away from the center to the sides
            // reset the cell size.
            if offsetX < -15 || offsetX > 15 {
                UIView.animate(withDuration: 0.2) {
                     self.transform = CGAffineTransform.identity
                }
                self.centerCell = nil // set this to nil so next cell in the center will enter the above scope
            }
        }
    }

Make CollectionView Cell horizontal cell bigger than others

3 Answers3

Linked