Apply corner radius to focused UIImageView?

In order to have a UIImageView adjust its image when its UICollectionViewCell ancestor is focused, I have to set `clipsToBounds = NO` all the way up.


However, I'd like to apply a slight corner radius to the UIImageView to match what some of Apple's UI elements have (see app icons in homescreen, or featured movie banners in Movies app, for example).


Any suggestions? Do I need to apply the corner radius alpha to the image itself, using ImageIO?

Based on my limited knowledge of how UIImageView works on tvOS, I'd be surprised if there were a way to do it without clipping the image itself. UIImageView is using multiple sublayers and as far as I can tell, two different images for the focused and unfocused state.

UIImageView.overlayContentView is for putting UI styles like borders over top of an image view, but does not help you modify the image view itself. Adding a border to overlayContentView in focused state will solve your problem only if your corner radius is smaller than your border width. Otherwise your image will peek out past your rounded corners. You will also need to set overlayContentView.clipsToBounds = false.

I was able to implement larger corner radii for both focused and regular states by generating images with rounded corners baked in using UIGraphicsImageRenderer, then using the tvOS11 UIImageView.masksFocusEffectToContents feature on an image view. The difficulty with combining focus effects with rounded corners is that by default, the shimmer effect you see when panning over an image would go into your transparent corners. masksFocusEffectToContents fixes this, but reduces performance. Another difficulty is if you try to add scaling to your focus effect. An image view always clips to its original, unscaled size, so clipping or adding corners to an image directly will break if you need a scale effect on focus.
Apply corner radius to focused UIImageView?
 
 
Q