Subview Clipping

Thanks to the natural pairing of the gesture recognizers and the affine transforms, we’ve added the dragging and pinch-zooming functionality that will be familiar to our users from many other apps they use. However, views that are allowed to just sprawl all over the screen aren’t something we usually see on iOS. It may be fun, but it feels wrong, and we hardly want to let the user make a mess of our user interface.

Let’s rein in the madness a little bit. We’ll put the image view into another view, and have it clipped off at that view’s edges. That will put an end to sliding the image offscreen or under the Done button.

In the storyboard, select the image view and delete it (with the Backspace key or the Edit > Cut menu item). Notice that the three gesture recognizers survive this, because they are top-level objects in the scene, and not children of any view or view controller.

From the Object library, find the plain view (the popover will show its class as UIView), and drag it to the middle of the scene’s main view. Use the autolayout popovers to pin its width and height to 280 and to horizontally and vertically align it in the container. Then go to its Attributes Inspector and check the Clip Subviews box. What this does is to constrain (“clip”) drawing to the bounds of the view, so if the contained image view goes beyond those boundaries, it will just get cut off.

Next, drop an image view into this subview. It should allow itself to fill the parent subview; one way to make this work for sure is to drag the image view onto the subview’s entry in the scene list, rather than onto the storyboard layout. Like its parent, create autolayout constraints pin its size to 280×280 and horizontally and vertically align it in its containers.

Time to fix our connections. Select the view controller from the scene members list and open the Connections Inspector (⌥⌘6). The userImageView is no longer connected, because we deleted the object it was connected to. Drag from that connection’s circle to the new image view to make a new connection.

The gesture recognizers also have no incoming connections anymore, so they won’t be called. To fix that, we’re going to connect them to the 280×280 plain view, rather than directly to the image view. Select the subview, and repeatedly drag from its gestureRecognizers entry in the Connections Inspector to each of the gesture recognizers, ultimately creating three connections.

Try running the app and drill down to the image detail view. When we drag around, any part of the image that goes beyond the bounds of the 280×280 view is simply cut off, as shown in the figure. We can also perform our gestures anywhere in the view, not just on the image view, and have them recognized. That means we can push the image entirely outside the bounds of the container view, but we can also bring it back with a double-tap anywhere in that view.