How to create a non-rectangular UIImageView

Question

I'm trying to make a ViewController that presents info from a webpage like this:

However, I'm confused on one thing. How did they get the imageView to display an image that's cut off at the corner, ie not rectangular? Do you think they created that player card in Photoshop and used it as the background for the imageView image, or did they create it programmatically?

I wonder because the image is behind the picture of the bear, so I imagine if they created the background in Photoshop, how would they get the image behind the bear head? They can't have just created the card with the player's picture as part of it, then loaded the whole image because if they traded the player, because I'm sure they pull the player info and picture from the web so they can have a card for all players, even if they trade or acquire a new player mid-season, without having to update the app (and add the finished image to images.xcassets ).

Answer 1

This can be composed from two CALayers at runtime. Put the picture on the bottom layer; the picture can come from anywhere - the web, the bundle, etc. the image source could be dynamic.

Put another CALayer on top, with the frame rendered with opaque colors, and a transparent cut-out for the picture in the middle:

Answer 2

There are a bunch of ways to do this. A simple and flexible way to do it is to create a CAShapeLayer that's the same size as the image view, with it's origin at 0,0, and add it as the UIImageView's layer's mask.

You'd create a filled UIBezierPath that maps out the part of the image you want to show, and install the bezier path's CGPath into the mask layer's path property.

The result would be that the image view is cropped so that only the part inside the shape is drawn.