J'essaye d'animer la cellule de la vue de collection en cliquant comme ceci,
J'ai essayé du code mais il ne donne pas une animation parfaite, ceci est mon 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)
}
}
}
Ceci est me donnant ce résultat,
Comment puis-je obtenir cette animation parfaite en cliquant sur la cellule de vue de la collection?
3 Réponses :
Je pense que vous pouvez définir la hauteur de cellule pour l'élément sélectionné, cela vous aidera.
juste augmenter la hauteur de la cellule? @Rakesh
Oui, vous pouvez essayer simplement d'augmenter la taille de l'élément sélectionné et réinitialiser la taille de l'élément sera plus petite que la cellule sélectionnée. ou vous pouvez ajouter la même taille de cellule pour tous et vous pouvez mettre à l'échelle une sous-vue pour l'élément sélectionné. dans la cellule pour la ligne à l'indexpath.
Comment faire ça, pouvez-vous expliquer par le code? Rakesh
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)
}
}
vous devez donc mettre à l'échelle la cellule sélectionnée dans cellforrowatindexpath
Pour faire apparaître la cellule, vous devez changer la zPosition de la cellule. Par exemple:
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
}
}
Veuillez suivre le lien pour voir le résultat
Le code fonctionne bien mais je suis confronté à un problème avec votre code lorsque je touche la cellule, il se déplace vers le haut et son rayon de coin disparaît et il prend la forme d'un carré comme la capture d'écran que je joins en question. @bohdans
@JunaidKhan Je ne vois pas le problème que vous avez décrit. Veuillez ouvrir un lien que j'ai joint.
Quelle est la taille de la cellule et la taille de la vue placée dans la vue de collection? J'ai la hauteur de ma cellule attachée à la vue de la collection et la hauteur et la largeur de la vue sont attachées à la cellule. @bohdans
peut-être que l'article vous aidera stackoverflow.com/questions/46098693 /…
J'ai suivi le lien, c'est ce que je veux, mais lorsque j'ai appliqué cette animation, je reçois un problème lors de la sélection d'une cellule. la taille de la cellule augmente mais ne couvre pas la bordure de la cellule comme indiqué dans ma deuxième image. @Bogdan Sasko