使用UIKit的连续圆角

在Fueled,我们花了几个月的时间来开发一款名为Toppler的超棒增强现实游戏,以探索ARKit 2的某些功能。 我们已经介绍了我们在前两篇文章中介绍的一些技术课程,其中大部分与SceneKit有关。 现在是时候回到UIKit并更深入地研究一些设计概念及其实现方法,以实现更为熟悉的框架。

我们将专门研究圆角。 不是通常使用layer.cornerRadius构建的layer.cornerRadius ,而是连续的圆角。 为使我们清楚区别,以下是Apple于2013年发布的iOS7中经典圆角和连续圆角之间的比较:

请注意,您可以在橙色视图后面看到非常细的红色。 这是底角和平滑角之间的实际差异。

对于使用Sketch的用户来说,设计连续角的属性称为“ 平滑角”

苹果使用专用API来增强其在SpringBoard中的圆角。 这是var continuousCorners: Bool CALayer var continuousCorners: Bool 。 但是,如果您在提交给AppStore的应用程序中使用此API,它将被拒绝。 😕

互联网上有许多资源可以通过批准的方式达到相同的效果,通常涉及UIView子类及其自己的drawRect实现。 但是,我们一直希望有一个更简单的解决方案,您可以借助遮罩将其应用于任何UIView

事实证明, UIBezierPath(roundedRect:cornerRadius)产生一个连续角。 只需使用其路径是使用先前功能构建的CAShapeLayer完成的:

Toppler中的增强现实代表了核心体验。 但是,我们一定不能忘记将所有其他一切联系在一起以创建华丽而独特的用户体验的其他视图。 而且,我的朋友们总是以无处不在的UIKit开始和结束。