tvOS：在图像视图聚焦时使用圆角

Question

tvOS：在图像视图聚焦时使用圆角

7

我有一个图像视图，当包含视图获得焦点时，它将获得这种很棒的tvOS焦点效果。问题是 - 它应该有圆角。现在这很容易做到：

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

我必须将图层的masksToBounds或图像视图的clipsToBounds设置为true（基本上是相同的），以便剪切图像的边缘 - 但是一旦我这样做，焦点效果就不再起作用了，因为它也会被剪切掉。我在按钮方面遇到了更多或更少相同的问题，但由于焦点效果比图像视图简单得多（仅缩放和阴影），所以我自己实现了它，但对于应用了所有效果（移动、闪烁等）的图像视图来说，这不是一个选项。

有更简单的方法吗？我错过了什么吗？我肯定不是唯一一个试图弄清楚这个问题的人！ :)

- cr4sh_override

十年后，最简单的方法就是在tvOS上使用UICardView。 - Fattie

3个回答

3

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

我们也面临着同样的问题。当你将角落圆形化时，你可以看到“光泽”仍然具有矩形形状。我在多伦多的技术讲座上向开发者传达了这个问题，他们说这是一个错误。它已经被报告并开放rdar：// 23846376。

- user2729690

那个问题最终解决了吗？因为我在 tvOS 12 beta 上仍然遇到了相同的问题，使用的是 Xcode 10 beta 3，并且已经浪费了三天时间来寻找解决方案。 - Michele Dall'Agata

1

对于2022年... 2023年...

幸运的是，TVPosterView现在运行得非常好。这很可能是你最好的解决方案。只需在TVPosterView上设置.image。

你也可以使用UICardView来实现效果。（在这种情况下，只需将UIImageView放在卡片视图中。不要忘记在图像视图上实际关闭"adjust on ancestor focus"和"user interaction enabled"，否则当卡片视图扩展时，它会"双倍扩展"！）

使用TVPosterView时，当玩弄遥控器时，你会得到"两个"3D效果。
而使用UICardView则不同，当玩弄遥控器时，你只会得到"一个"3D效果。试一试，看看区别。

然而...

使用TVPosterView您会遇到一个奇怪的问题（就像只有一个图像视图一样），即图像无法正确缩放，它忽略了缩放模式。
使用UICardView，图像将正常缩放（无论您如何设置），就像在iOS上一样。

- Fattie

这是我个人认为的正确方法。如果不清楚的话，TVPosterView是由苹果创建的一个类，在TVUIKit中可用于处理这种情况。它非常灵活，对大多数人的需求应该非常适用。https://developer.apple.com/documentation/tvuikit/tvposterview - undefined

非常好的观点，@AdamKaump。唯一的问题是，它无法按比例缩放图像，这个问题非常奇怪。你的图片必须来自你的内容服务器，并且必须是“精确尺寸”，这太荒谬了。这就像是tvOS中最大的问题！ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michele Dall'Agata · Accepted Answer

我找到了一种替代方案。可以绘制图像并使用 alpha 通道将角落裁剪掉，这样焦点放在图像上时就可以正确缩放。应用于该层后，需要设置 "masksFocusEffectToContents = true" 将 alpha 通道添加到其他层（如发光效果层）中。我基于这个回答做了一个扩展：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
    }
}

然后调用圆角函数：

myImageView.adjustsImageWhenAncestorFocused = true
myImageView.clipToBounds = false

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

很明显，可以修改roundedImage()，以在调用时添加定义阴影的参数。

缺点：

边框的行为类似于cornerRadius（它们在图像内部绘制）。但我想我在某个地方使其工作，然后进一步调查时我失去了更改
我不确定这是正确的做法。我相信肯定有一些方法可以用几行代码实现。在tvOS 11中，苹果引入了圆形徽章（可动画和全部显示），请参见WWDC 2017。我只是找不到它们的示例。

否则，tvOS 12（目前为beta版）引入了Lockup。如此答案所示，我成功地以编程方式实现了它们。