Resizing UIView width while keeping subview anchored

Question

So I want to achieve something like this before-and-after thing:

http://demosthenes.info/blog/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

I currently have this hierarchy (added in that order, I have marked them with an ID to make it easer to follow):

UIView (1)
   UIImageView (2)
   UIView (3)
     UIImageView (4)

Now the top level UIView has a UIPanGestureRecognizer attached. My idea was to resize the second UIView (3) containing the UIImageView when a panning gesture is recognised. In other words I will move the x-position of the UIView (3) therefore hiding the containing UIImageView (4) to reveal the image behind it (2) thus achieving the desired effect. It works fairly well in that it does indeed resize but the containing UIImageView (4) is not resized, instead it either moves with the x-position of the resized UIView (3) (being anchored at (0,0)) or it just floats on top of everything. I have tried changing autoresizeSubviews of the UIView (3) and autoresizeMask/contentMode but nothing really works.

In other words, how can I resize the container without moving or resizing the subview?

What am I doing wrong? Not sure if this approach is the best. If you have any suggestions on a better way of doing the before-and-after thing please share!

Answer 1

I would change the structure you currently have to something like that:

• UIView (1)
  • UIImageView (2)
  • UIImageView (3)

To achieve the effect you want put a layout constraint which is attached to the right of UIImageView (3). Modify the constraint using your UIPanGestureRecognizer. Additionally set the UIImageView (2) AND UIImageView (3)'s View Modes in Interface builder to "Top Left". That should do the trick. That is you're modifying the size of UIImageView (3) to reveal the image.