CODEWITHSUNDEEP
iosswiftuiimageviewuiimage
Tometoyou
Tometoyou

Reputation: 8376

Scaling an image in a UIImageView like Twitter

I have an image within a UIImageView that's inside a UITableViewCell. What I want to do is have the width of the image equal to the width of the tableviewcell and the height in proportion to the width but clipped to boundaries so that the image fills the tableviewcell.

For this I've used 

image.contentMode = UIViewContentMode.ScaleAspectFill
image.clipsToBounds = true

which works.

However, when I click on the tableviewcell I want to animate the expansion of the imageview to full screen like in the Twitter or Facebook app. When the image is full screen it should no longer use .ScaleAspectFill but should use .ScaleAspectFit, so that the whole image is on screen. How can this be accomplished in a smooth animation? At the moment, changing between the two scaling options when animating makes it jump between them.

Many thanks.

Upvotes: 1

Views: 1198

Answers (1)

Rory McKinnel
Rory McKinnel

Reputation: 8014

I would think that the simplest mechanism for doing this is to have a separate view (which is the same size as the full screen) inside which you have a new UIImageView and any controls you need to go back to the original table view.

To code this up, a simple mechanism is to use a separate view controller in storyboard which contains your UIImageView and image controls etc. You can then create an instance of this controller when you click on the cell, but instead of pushing or presenting the controller, extract the new controllers view and splice it directly into the table views hierarchy. I use this for popup bubble help where I want to bring content up over a controller and position it. I used the following example which shows the general method of creating a controller and using it to conveniently overlay content: http://blog.typpz.com/2013/12/09/ios-sdk-create-a-pop-up-window/

In your case, you would add constraints to the overlay UIImageView for left and top offset, width and height. Use CTRL drag to assign these to IBOutlets in your overlay controller. You can then set these in code as needed to make the image full screen or the original size at the exact same position as it appears in your cell.

When the user clicks the cell, you create the overlay controller and set the overlay images constraints to exactly match the position of the image in the table cell. You then overlay the controllers view, change the constraints of the overlay image to full screen (0 left and top offsets, width and height to screen width and height) and then animate the constraint changes. How to animate constraints is covered here: How do I animate constraint changes?

The result will be that on click, it looks like you see the image grow from its location to full screen. To be like Facebook you then show any controls when the animation completes. You animate the reverse and remove the overlay to go backwards.

Since you have a full overlay view, all input is captured preventing interaction with the underlying table. You can play around with the alpha of the overlay view to see more or less of what is underneath. I notice Facebook does this as you drag around the exploded image.

It looks like Facebook have added some nice drag gestures which start the reverse process and move the image around the screen, then when you remove your finger the full unwind action happens.

Also seems Facebook puts in a blank to make it look like you pulled it out to full screen.

Upvotes: 3

Related Questions