Animate Collection View Cell on Click in Swift

Question

i'm trying to animate the cell of collection view on click like this,

I have tried some code but it isn't giving perfect animation, this is my code

 func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    UIView.animate(withDuration: 0.8) {
        if let cell = self.subCategoryCollectionView.cellForItem(at: indexPath) as? LawyerSubCategoryCVC {
            cell.transform = .init(scaleX: 1.5, y: 1.5)
        }
    }
}

This is giving me this result,

How can i get that perfect animation on click of collection view cell?

maybe the article will help you https://stackoverflow.com/questions/46098693/zoom-in-uicollectionviewcell-on-didselectitemat — bohdans, Apr 25 '19 at 21:38
i have follow the link this is what is want but when i applied this animation i'm getting an issue on selecting a cell. the cell size increases but don't covers the border of cell as shown in my second image. @Bogdan Sasko — Junaid Khan, Apr 26 '19 at 10:21

score 1 · Answer 1 · answered Apr 26 '19 at 13:27

import UIKit
extension UIColor {
    static var random: UIColor {
        return UIColor(red: .random(in: 0...1),
                       green: .random(in: 0...1),
                       blue: .random(in: 0...1),
                       alpha: 1.0)
    }
}
class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout{

@IBOutlet weak var collectionView: UICollectionView!
var selectedIndex = 2
override func viewDidLoad() {
    super.viewDidLoad()
 }


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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath)
    cell.contentView.backgroundColor = UIColor.random
    return cell
}

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    self.selectedIndex =  indexPath.row
    collectionView.reloadData()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let noOfCellsInRow = 4

    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

    let totalSpace = flowLayout.sectionInset.left
        + flowLayout.sectionInset.right
        + (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))

    let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
    if selectedIndex == indexPath.row {
        return CGSize(width: size, height: size + 40)
     }
    return CGSize(width: size, height: size)
}

}

so you have to scale selected cell in cellforrowatindexpath – Rakesh Mandloi Apr 29 '19 at 05:03 — Rakesh Mandloi, Apr 29 '19 at 05:03

score 0 · Answer 2 · answered Apr 26 '19 at 03:11

0

I think you can set cell height for selected item it will help you.

answered Apr 26 '19 at 03:11

Rakesh Mandloi

361
2
11

just increase the height of cell? @Rakesh – Junaid Khan Apr 26 '19 at 09:45
Yes, you can try just increate selected item size and reset item size will be smaller than the selected cell. or you can add the same cell size for all and you can scale a subview for selected item. in cell for row at indexpath. – Rakesh Mandloi Apr 26 '19 at 11:46
How to do that bro can you explain through code? Rakesh – Junaid Khan Apr 26 '19 at 12:08

bohdans · Answer 3 · 2019-04-28T10:00:18.227

0

For bring cell up you should change cell zPosition. For example:

class MyCell: UICollectionViewCell {
    override var isSelected: Bool {
        didSet {
            UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseOut, animations: {
                self.layer.zPosition = self.isSelected ? 1 : -1
                self.transform = self.isSelected ? CGAffineTransform(scaleX: 1.2, y: 1.2) : CGAffineTransform.identity
            }, completion: nil)
        }
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        layer.borderWidth = 1
        layer.cornerRadius = 4
        layer.borderColor = UIColor.clear.cgColor

        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowRadius = 4
        layer.shadowColor = UIColor.black.cgColor
        layer.masksToBounds = false
    }
}

Please follow the link for see result

edited Apr 28 '19 at 10:00

answered Apr 27 '19 at 11:47

bohdans

49
1
4

Code is working fine but i'm facing one issue with your code when i tap the cell it moves upside and its corner radius get vanish and it get shape of square like the screen shot i attach in question. @bohdans – Junaid Khan Apr 27 '19 at 21:33
@JunaidKhan I don't see issue which you described. Please open a link that I have attached. – bohdans Apr 28 '19 at 10:03
What is the size of cell and size of view u placed in collection view? I have my cell height attached to the collection view and view height and width is attached to the cell. @bohdans – Junaid Khan Apr 28 '19 at 15:46

Animate Collection View Cell on Click in Swift

3 Answers3