How to modify the size of a selected CollectionViewItem

Question

I want somehow when my cellItem is selected to increase a little in size , different than the others. Actually the same size but the one selected to be one step higher than the others. This have to do with the layout? Is there any kind of method? Or storyboard?

I've attached some photos to see what I ve done till now and how it suppose to be.

How it should be

How it is right now.

score 1 · Accepted Answer · edited Jan 08 '18 at 11:49

Create outlet for top and bottom constraint of that greenBorderd view.
Suppose we have set them value as 10. On click of collectionView item change its topConstraint value to 0 and bottomConstraint value to 20.
Do this in collectionViewDidSelect method and in colletionView didDeselectItemAt method set them to original values
Write the same code in cellForItem method of UICollectionView.

Please see code below

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

           let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TableCollectionViewCell", for: indexPath) as! TableCollectionViewCell

            if cell.isSelected == true{
                    self.changeSelectedCellFrame(cell)
            }
            else
            {
                    self.changeDeselectedCellFrame(cell)
            }
            return cell
    }


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

            let cell = collectionView.cellForItem(at: indexPath) as! TableCollectionViewCell
            self.changeSelectedCellFrame(cell)

    }



    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {

           if  let cell = collectionView.cellForItem(at: indexPath) as?TableCollectionViewCell
           {
                    self.changeDeselectedCellFrame(cell)
           }
    }


    func changeSelectedCellFrame(_ cell:TableCollectionViewCell) {
            cell.layoutIfNeeded()
            cell.viewTopConstraint.constant = 0
            cell.viewBottomConstraint.constant = 20
            cell.layoutIfNeeded()
    }


    func changeDeselectedCellFrame(_ cell:TableCollectionViewCell) {
            cell.layoutIfNeeded()
            cell.viewTopConstraint.constant = 10
            cell.viewBottomConstraint.constant = 10
            cell.layoutIfNeeded()
    }

It will show you effect same as you expect.

viewTopConstraint is an IBOutlet for view TopConstraint. Make its value to 10 and set same value for bottomConstraint. This 2 constraint will show white space on top and at the bottom of UiView. Just change that constraint it will give you o/p as expected. — Hemant Sabale, Dec 22 '17 at 04:31

score 0 · Answer 2 · answered Dec 21 '17 at 08:44

0

Please try this code

[UIView transitionWithView:collectionView 
                  duration:.5 
                   options:UIViewAnimationOptionTransitionCurlUp 
                animations:^{

    //Set Size of Cell
    cell.frame = CGRectMake(3, 14, 100, 100);

} completion:^(BOOL finished) {


}];

answered Dec 21 '17 at 08:44

Rinto Andrews

60
1
9

yes UIView.transition(with: collectionView, duration: 0.5, options: .transitionCurlUp, animations: {() -> Void in cell.frame = CGRect(x: 3, y: 14, width: 100, height: 100) }, completion: {(_ finished: Bool) -> Void in }) – Rinto Andrews Dec 21 '17 at 08:58

score 0 · Answer 3 · answered Dec 21 '17 at 08:59

If you want to zoom a little bit you can use:

 override func viewDidLoad()
    {
        super.viewDidLoad()
        collectionView.allowsSelection = true
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        if cell.isSelected == true
        {
            cell.transform = CGAffineTransform(scaleX: 1.2, y: 2)
        }
        else
        {
            cell.transform = .identity
        }
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
    {
        let cell = collectionView.cellForItem(at: indexPath)
        cell?.isSelected = true
        UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 5, initialSpringVelocity: 0, options: [], animations:
        {
            cell?.transform = CGAffineTransform(scaleX: 1.2, y: 2)
        })
    }

There is another alternative were you can add a subview to the cell where the bottom constraint of it is equal to 16 (for example), and on selection you can change the border color of that view.

score 0 · Answer 4 · answered Dec 21 '17 at 10:17

Create new flowlayout by overriding UICollectionViewFlowLayout
Assign it to the collectionview
Store selected item index on custom flowlayout
When layoutAttributesForItemAtIndexPath: modify the frame size of the item

Hint: Cache calculated layoutattributes for indexpaths because they are going to be asked from the collectionview many times.

How to modify the size of a selected CollectionViewItem

4 Answers4