7

I have an image view that will get this awesome tvOS focus effect when the containing view gets focused. The problem is - it should have rounded corners. Now this is easily done:

imageView.layer.cornerRadius = 5
imageView.layer.masksToBounds = true 

I have to set either masksToBounds of the layer or clipsToBounds of the image view to true (which is basically the same), in order to clip the edges of the image - but as soon as I do this, the focus effect won't work any more, because it will get clipped as well.

I had more or less the same problem with buttons, but since the focus effect is much simpler than for the image view (only scaling and shadow), I just implemented it myself, but that is not an option for the image view, with all the effects applied (moving, shimmering, and so on...)

Is there an easier way? Did I miss something? I can't be the only trying to figure out how this works!? :)

Ramkrishna Sharma
  • 6,961
  • 3
  • 42
  • 51
cr4sh_override
  • 273
  • 4
  • 10

3 Answers3

6

I have found out an alternative solution. What one may do is to actually draw the image, clipping out the corners with an alpha channel. The image then gets scaled correctly when focused. That applied to the layer. Then, to have the alpha channel added to the other layers (like the one for the glowing effect) we need to set; "masksFocusEffectToContents = true".

I made an extension for it, based on this answer:

Swift 4.2

extension UIImageView {
func roundedImage(corners: UIRectCorner, radius: CGFloat)  {
        let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.frame.size)
        UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 1)
        UIBezierPath(
            roundedRect: rect,
            byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius)
            ).addClip()
        self.draw(rect)
        self.image = UIGraphicsGetImageFromCurrentImageContext()!

        // Shadows - Change shadowOpacity to value > 0 to enable the shadows
        self.layer.shadowOpacity = 0
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 10, height: 15)
        self.layer.shadowRadius = 3

        // This propagate the transparency to the the overlay layers, 
        // like the one for the glowing effect. 
        self.masksFocusEffectToContents = true
    }
}

Then to apply the rounded corners call:

myImageView.adjustsImageWhenAncestorFocused = true
myImageView.clipToBounds = false

// masks all corners with a radius of 25 in myImageView
myImageView.roundedImage(corners: UIRectCorner.allCorners, radius: 25)

One can obviously modify roundedImage() to add the parameters to define the shadows at the calling time.

Downsides:

  • Borders behave like cornerRadius (they get drawn inside the image). But I think I made it working somewhere, then investigating further I lost the changes
  • I am not exactly sure this is the right way to do it. I am quite confident there must be some methods out there doing it in a couple of lines. In tvOS 11 Apple introduced the round badges (animatable and all), shown at WWDC 2017. I just can't find a sample for them.

Otherwise, tvOS 12 (beta for now) introduced the Lockup. I managed to implement them programmatically, as shown in this answer.

Michele Dall'Agata
  • 1,474
  • 2
  • 15
  • 25
3

https://forums.developer.apple.com/thread/20513

We are also facing this same issue. When you round the corners, you can see the "shine" still has a rectange shape.

I showed the issue to the Dev Evangelists at the Tech Talks in Toronto and they said it's a bug. It's reported and open rdar://23846376

Community
  • 1
  • 1
  • Was that fixed eventually? Because I am still getting the same issue with Xcode 10 beta 3 on tvOS 12 beta and I have lost 3 days already trying to find a solution. – Michele Dall'Agata Jul 06 '18 at 16:06
0

For 2022 2023 ...

Fortunately TVPosterView now works pretty well. It's likely your best solution. Just set .image on the TVPosterView`.

You can also just use UICardView for the effect. (In that case simply put the UIImageView inside the card view. Don't forget to actually turn OFF "adjust on ancestor focus" and "user interaction enabled" on the image view, or else it will "doubly expand" when the card view expands!)

  • with TVPosterView you get "both" of the 3D effects when toying the remote.

  • with UICardView it's different, you only get "one" of the 3D effects when toying the remote. Try it, to see the difference.

However ...

  • with TVPosterView you do suffer the strange problem (as with just an image view) that the image simply won't scale properly, it ignores the scaling mode.

  • with UICardView the image will scale normally (however you tell it to) just as on iOS

Fattie
  • 27,874
  • 70
  • 431
  • 719