JSSquircle

圆形角落的方形与 Squircle 之间的区别很小，但对应用的整体感觉却有很大的影响 - https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/

典型的 layer.cornerRadius 圆角矩形具有恒定的角落半径，它的感觉就像在每个角落放置4个完美的圆圈，结果是直线到曲线的转换稍微有点生硬。另一方面，Squircle 在直线边到圆角的过程中，曲线会缓慢增加，使其更像椭圆而不是完美的圆圈。

苹果在其设计中大量使用了 Squircle： 图片来源

图片来源

图片来源

安装

JSSquircle 通过 CocoaPods 提供。安装它，只需将以下行添加到您的 Podfile

pod 'JSSquircle'

用法

程序化

使用类 Squircle 与使用 UIView 完全相同，只需设置 cornerRadius 属性即可。

如果您创建了类似这样的圆角矩形

let roundedRect = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
roundedRect.layer.cornerRadius = 10
self.view.addSubview(roundedRect)

要将此替换为平滑的 Squircle，您只需要导入此模块，然后将 UIView 替换为 Squircle，如下所示：

import JSSquircle

let roundedRect = Squircle(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
roundedRect.layer.cornerRadius = 10
self.view.addSubview(roundedRect)

故事板

将 UIView 添加到您的 Storyboard 中，然后 在 Identity inspector 下的 Class 中将 UIView 从 UIView 更改为 Squircle。

然后在 Attributes inspector 中设置您想要的 cornerRadius。

就这么简单！

作者

Janak Shah，janakshah.com

许可证

JSSquircle 使用 MIT 许可协议。有关更多信息，请参阅 LICENSE 文件。