tvOS:如何制作一个在聚焦时仍然有阴影的圆形按钮?
tvOS: How do I make a circular button that still gets a shadow when focused?
更新: 自 WWDC 2017 起,tvOS 支持非圆角按钮。 Here's a link to the documentation.
原题:
在 tvOS 上,系统类型 UIButton
在聚焦时会获得整洁的阴影效果。
我想要这种效果,但要圆润 UIButton
。到目前为止,我已经尝试了以下方法:
我试过用 ol' layer.cornerRadius
技巧把拐角弄圆——但这不起作用;按钮是圆形的,但在聚焦时它们不会离开视图(因为它们正在裁剪到边界):
button.layer.cornerRadius = button.size.width / 2.0
button.clipsToBounds = true
我试过设置圆形背景图片 - 但现在按钮后面出现了奇怪的背景颜色或阴影:
button.setBackgroundImage(myCircularImage, forState: .Normal)
这是选项 2 的样子(注意:红色按钮当前处于焦点状态):
我可以尝试使用 UIButton(type: .System)
来免费获得 Focus Engine 的阴影效果吗?或者我需要为此编写更多自定义内容吗?
您可以通过使用焦点引擎并确定您的按钮何时处于焦点并对其应用适当的转换来实现此效果。
我喜欢通过在视图上应用缩放变换来在我的视图上实现类似的效果,并且还应用这样的阴影效果。记得在图层上实现光栅化以提高性能:
if context.nextFocusedView == accountAddOkButton {
context.nextFocusedView!.transform = CGAffineTransformMakeScale(1.1, 1.1)
let layer = context.nextFocusedView!.layer
layer.shadowOffset = CGSizeMake(1, 1)
layer.shadowColor = UIColor.blackColor().CGColor
layer.shadowRadius = 12.0
layer.shadowOpacity = 0.80
layer.shadowPath = UIBezierPath(rect: layer.bounds).CGPath
}
编辑:
如果您不想在整个主屏幕上获得相同的效果,请务必查看有关创建视差图稿的苹果文档 https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html
我本月在西雅图的 tvOS 会谈中与 Apple 工程师进行了交谈 - 目前无法获得 system-standard 圆形 UIButton 的焦点行为(视差、运动效果、发光等) - 这是真可惜!
他们建议我要么更改设计,要么为 UIButton 编写自己的 focus/parallax/motion 效果。我并不急于自己编写 - 可能无法完全复制 system-standard 效果,并且当未来平台发生变化时,自定义效果可能会过时。
更新:我写了一篇博客post并包含了实现此效果的示例代码:http://www.devsign.co/notes/custom-focus-effects-in-tvos
更新 #2:截至 WWDC 2017,tvOS 支持 non-roundrect 按钮! Here's Apple's documentation.
更新: 自 WWDC 2017 起,tvOS 支持非圆角按钮。 Here's a link to the documentation.
原题:
在 tvOS 上,系统类型 UIButton
在聚焦时会获得整洁的阴影效果。
我想要这种效果,但要圆润 UIButton
。到目前为止,我已经尝试了以下方法:
我试过用 ol'
layer.cornerRadius
技巧把拐角弄圆——但这不起作用;按钮是圆形的,但在聚焦时它们不会离开视图(因为它们正在裁剪到边界):button.layer.cornerRadius = button.size.width / 2.0 button.clipsToBounds = true
我试过设置圆形背景图片 - 但现在按钮后面出现了奇怪的背景颜色或阴影:
button.setBackgroundImage(myCircularImage, forState: .Normal)
这是选项 2 的样子(注意:红色按钮当前处于焦点状态):
我可以尝试使用 UIButton(type: .System)
来免费获得 Focus Engine 的阴影效果吗?或者我需要为此编写更多自定义内容吗?
您可以通过使用焦点引擎并确定您的按钮何时处于焦点并对其应用适当的转换来实现此效果。
我喜欢通过在视图上应用缩放变换来在我的视图上实现类似的效果,并且还应用这样的阴影效果。记得在图层上实现光栅化以提高性能:
if context.nextFocusedView == accountAddOkButton {
context.nextFocusedView!.transform = CGAffineTransformMakeScale(1.1, 1.1)
let layer = context.nextFocusedView!.layer
layer.shadowOffset = CGSizeMake(1, 1)
layer.shadowColor = UIColor.blackColor().CGColor
layer.shadowRadius = 12.0
layer.shadowOpacity = 0.80
layer.shadowPath = UIBezierPath(rect: layer.bounds).CGPath
}
编辑:
如果您不想在整个主屏幕上获得相同的效果,请务必查看有关创建视差图稿的苹果文档 https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html
我本月在西雅图的 tvOS 会谈中与 Apple 工程师进行了交谈 - 目前无法获得 system-standard 圆形 UIButton 的焦点行为(视差、运动效果、发光等) - 这是真可惜!
他们建议我要么更改设计,要么为 UIButton 编写自己的 focus/parallax/motion 效果。我并不急于自己编写 - 可能无法完全复制 system-standard 效果,并且当未来平台发生变化时,自定义效果可能会过时。
更新:我写了一篇博客post并包含了实现此效果的示例代码:http://www.devsign.co/notes/custom-focus-effects-in-tvos
更新 #2:截至 WWDC 2017,tvOS 支持 non-roundrect 按钮! Here's Apple's documentation.