How to change frame of UICollectionViewCell to reveal hidden button on tap? - swift

Question

I have a custom UICollectionViewCell that has a UIImage and a UIButton.
The frame for the extended cell is 110 x 60. By default it will be 60x60.
When the app loads, I'd like for the cell to start at 60x60 and only show the image. When the cell is tapped, the cell will update to the 110x60 frame and reveal the UIButton that is beside the image.
Currently, my app does load and the cells are 60x60, but due to my auto-layout setup the image is squished and the button is full size. If I tap on the cell, it does update it's frame and it looks great.
The goal is to only see the image first and then see the button after the cell has updated its frame.
I would also like to be able to tap on the cell again and resize it back to 60x60, hiding the button and only showing the image.
Here is what I am currently trying:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
collectionView.performBatchUpdates(nil, completion: nil)
}
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
switch collectionView.indexPathsForSelectedItems?.first {
case .some(indexPath):
return CGSize(width: 110.0, height: 60.0)
default:
return CGSize(width: 60.0, height: 60.0)
}
}
Per request, my CollectionViewCell Class code:
class myCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var myImageView: UIImageView!
#IBOutlet weak var myButton: UIButton!
var myCellDelegate : myCollectionViewCellDelegate?
override func awakeFromNib() {
super.awakeFromNib()
self.layer.cornerRadius = 30
self.layer.masksToBounds = true
myImageView.layer.cornerRadius = myImageView.frame.width / 2
myImageView.layer.masksToBounds = true
}
// MARK: - Actions
#IBAction func myButtonTapped(_ sender: Any) {
self.myCellDelegate?.actionClicked(self)
}
}
To note, there's not much there so not sure if it'll help any. I'm just adjusting the cornerRadius for the cell and my image and then creating a delegate for the action to the button.

Answer 1

I think much depends by your constraints in the nib file.
Option 1
Interface builder > select your ImageView > Right Panel > Size inspector > Play with the "content Hugging Priority" and "content Compression Resistance"
In particular the Horizontal compression resistance of the imageView has to be greater than compression resistance of the button.
The system chooses the view to stretch based of the priorities indicated for these two parameters.
Option 2
Top
+-------------+--------+
| | |
| | |
Left| (Image) |(Button)|Right
| | |
| | |
+-------------+--------+
Bottom
<------------->
Width
Left, Top, Right, Bottom ---> constraint to the cell contentView
Width ---> set to a fixed 60
(Remember to enable clipsToBounds)
When the cell enlarges your button will appear.
You can eventually add an animation.