iOS 中的圆角与平滑圆角：从新特性到老项目适配

引言

在 iOS 开发中，圆角是非常常见的 UI 元素，它能够让按钮、卡片和输入框等界面元素更加柔和、现代。传统的圆角效果通过 cornerRadius 属性实现，但在一些设计中，圆角的过渡并不够自然，尤其是在高分辨率屏幕上，视觉效果可能显得生硬。为了提升用户体验，iOS 13 引入了 cornerCurve 属性，允许开发者为圆角添加更自然、平滑的过渡效果。然而，在老项目中，如何平滑地过渡到这一新特性？本篇博客将介绍如何实现平滑圆角，以及如何在现有项目中为所有圆角应用平滑过渡，既兼顾视觉效果，也保证兼容性。

圆角与平滑圆角概念解析

圆角（Corner Radius）:

简单来说，就是矩形、按钮、卡片等元素的四个角被“削去”形成弧形的效果。圆角的大小由角半径（corner radius）决定，半径越大，角的弯曲度就越大。这个效果在大多数UI设计中非常常见，尤其是在按钮、卡片、输入框等元素中。

平滑圆角（Smooth Corner）:

这个术语一般用来描述一种视觉效果，它让圆角的过渡更加柔和，看起来更加自然和流畅。在实际应用中，平滑圆角可能意味着除了直接设置一个固定的角半径，还通过一些额外的样式（比如渐变或阴影）来让圆角的边缘更加柔和，而不是直接硬性切割。它可以让角部的过渡更加细腻，给人一种更高端和现代的视觉感受。

简单来说，圆角是基础的形状处理，而平滑圆角是对圆角进行进一步的美化和优化。

iOS 中的平滑圆角：新属性 cornerCurve

iOS 13 引入了一个新的 cornerCurve 属性，使得圆角效果得到了进一步的优化和提升。这个属性允许开发者控制圆角的过渡曲线，使其看起来更加自然、平滑。相比传统的圆角效果，cornerCurve 使得UI元素的视觉表现更符合现代设计趋势，尤其是在高分辨率设备上，能够带来更精致的细节。

cornerCurve 的两种模式

在iOS 13及以上的版本中，cornerCurve 属性可以设置为两种模式：

.continuous：这一模式提供了平滑的过渡效果，使圆角的过渡看起来更为自然和柔和。使用.continuous 时，圆角的边缘不会像传统的圆角那样突然变得尖锐，而是呈现出连续且渐变的过渡效果，给用户带来更加细腻的视觉体验。
.circular：这一模式保留了传统的圆角效果。圆角的过渡是标准的圆弧形状，并不会做额外的平滑处理。对于那些想要保留经典圆角样式的开发者，.circular是更合适的选择。

如何使用 cornerCurve 属性

cornerCurve 属性是 CALayer 上的一个属性，因此我们需要访问到视图的layer来设置它。使用方法如下：

.circular

        // 普通圆角let cornerView = UIView()cornerView.layer.backgroundColor = UIColor.red.cgColorcornerView.layer.cornerRadius = 80.0cornerView.layer.masksToBounds = truecornerView.layer.cornerCurve = .circularview.addSubview(cornerView)cornerView.snp.makeConstraints { make inmake.centerX.equalToSuperview()make.top.equalToSuperview().offset(100.0)make.width.equalTo(300.0)make.height.equalTo(300.0)}

.continuous

        // 平滑圆角let smoothCornerView = UIView()smoothCornerView.layer.backgroundColor = UIColor.blue.cgColorsmoothCornerView.layer.cornerRadius = 80.0smoothCornerView.layer.masksToBounds = truesmoothCornerView.layer.cornerCurve = .continuousview.addSubview(smoothCornerView)smoothCornerView.snp.makeConstraints { make inmake.centerX.equalToSuperview()make.top.equalToSuperview().offset(100.0)make.width.equalTo(300.0)make.height.equalTo(300.0)}

效果如下：

如何在老项目中视频平滑圆角

但在一些旧项目中，圆角一直是标准的非平滑圆角，如何在不修改大量代码的情况下，适配平滑圆角？

我们可以使用 Method Swizzling（方法交换）来统一处理圆角效果，确保所有 UIView及其子视图的对象的圆角都编程平滑圆角。

通过交换 CLayer 的 cornerRadius 设置方法，让所有视图的圆角默认变为平滑过渡。

extension CALayer {// 交换 cornerRadius 的设置方法private static let swizzleOnce: Void = {let originalSelector = #selector(setter: CALayer.cornerRadius)let swizzledSelector = #selector(setSmoothCornerRadius(_:))guard let originalMethod = class_getInstanceMethod(CALayer.self, originalSelector),let swizzledMethod = class_getInstanceMethod(CALayer.self, swizzledSelector) else {return}method_exchangeImplementations(originalMethod, swizzledMethod)}()// 自定义的 setter 方法@objc func setSmoothCornerRadius(_ radius: CGFloat) {// 调用原方法self.setSmoothCornerRadius(radius)// 在 iOS 13 及以上应用平滑圆角if #available(iOS 13.0, *) {self.cornerCurve = .continuous}}// 在应用启动时进行一次 Swizzlingstatic func swizzleSmoothCorner() {_ = self.swizzleOnce}
}

public extension UIView {// UIView 的一个入口方法来启动 swizzlingpublic static func swizzleSmoothCorner() {CALayer.swizzleSmoothCorner()}
}

然后在 AppDelegate 应用启动的方法中，执行UIView.swizzledSmoothCorner。

结语

随着 iOS 设计理念的不断演进，细节上的优化已经成为提升用户体验的关键。平滑圆角作为 iOS 13 引入的新特性，不仅让 UI 元素看起来更加柔和自然，也为开发者提供了更丰富的视觉表现力。通过 cornerCurve 属性，开发者能够简单地为视图应用平滑过渡效果，而不需要额外的图形处理。

对于老项目来说，尽管新的圆角效果提供了更加优雅的视觉呈现，但如何在不打乱现有代码结构的前提下，平滑地过渡到这一新特性，仍然是许多开发者关注的问题。通过方法交换（Method Swizzling），你可以轻松地在项目中全局适配平滑圆角，避免了繁琐的修改工作，确保现有功能不受影响。

无论是新项目还是老项目，平滑圆角的引入都能为你的应用增添一份精致的细节，提升整体的视觉一致性和用户体验。希望本文的讲解能够帮助你在开发中顺利实现这一功能，让你的 iOS 应用更具现代感和专业感。