tvOS:如何制作一个圆形按钮,在聚焦时仍然会出现阴影?

时间:2015-10-18 23:16:34

标签: uibutton uikit tvos

在tvOS上,系统类型UIButton在聚焦时会获得整洁的阴影效果。

我想获得此效果,但是使用舍入UIButton。到目前为止,我已尝试过以下内容:

  1. 我尝试使用ol layer.cornerRadius技巧绕过角落 - 但这不起作用;按钮是圆形的,但它们在聚焦时不会抬起视图(因为它们会剪切到边界):

    button.layer.cornerRadius = button.size.width / 2.0
    button.clipsToBounds = true
    
  2. 我尝试过设置圆形背景图片 - 但现在按钮后面出现了奇怪的背景颜色或阴影:

    button.setBackgroundImage(myCircularImage, forState: .Normal)
    

    这是Option 2的样子(注意:红色按钮当前是聚焦的): Red button is focused, background shadows are weird

  3. 我可以尝试使用UIButton(type: .System)免费获得Focus Engine的阴影效果吗?或者我是否需要为此更自定义?

2 个答案:

答案 0 :(得分:7)

我本月在西雅图举行的tvOS会谈上与苹果工程师进行了交谈 - 目前无法获得圆形UIButton的系统标准聚焦行为(视差,运动效果,光泽等) - 这真是无聊! / p>

他们建议我改变设计,或者为UIButton编写自己的焦点/视差/动作效果。我不急于自己编写 - 可能无法完全复制系统标准效果,并且当平台将来发生变化时,自定义效果可能看起来过时了。

更新:我写了一篇博文,其中包含了实现此效果的示例代码:http://www.devsign.co/notes/custom-focus-effects-in-tvos

finished product

答案 1 :(得分:4)

您可以通过使用焦点引擎并确定按钮何时处于焦点并对其应用正确的转换来实现此效果。

我喜欢通过在视图上应用缩放变换来对视图产生类似的效果,并且还应用这样的阴影效果。请记住在图层上实现栅格化以提高性能:

rubocop

编辑:

如果您不想在整个主屏幕中使用相同的效果,请务必查看Apple的文档以创建Parallax Artwork https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/CreatingParallaxArtwork.html