CODEWITHSUNDEEP
swiftuicollectionview
Junaid Khan
Junaid Khan

Reputation: 125

Animate Collection View Cell on Click in Swift

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

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, enter image description here

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

Upvotes: 1

Views: 5389

Answers (3)

bohdans
bohdans

Reputation: 49

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

Upvotes: 0

Rakesh Mandloi
Rakesh Mandloi

Reputation: 361

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

}

Upvotes: 1

Rakesh Mandloi
Rakesh Mandloi

Reputation: 361

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

Upvotes: 0

Related Questions