我的 figma 中有这种风格：背景：线性渐变（155.98deg，#F5FEFF 0%，#C5F8FF 0%，rgba（106,164,189,0.5）47.57%，#0E8B9C 88.75%），# FFFFFF; 我需要将我的 uiview 设为线性渐变
【问题讨论】：
UIView，将layerClass设置为CAGradientLayer。这样，您最终会得到一个渐变视图，该视图不仅可以优雅地响应帧更改，还可以在您需要时响应这些更改的动画。有关示例，请参见 stackoverflow.com/a/56707989/1271826。
标签： ios swift user-interface uiview
基本思想是用colors和locations的数组配置CAGradientLayer。如果您想要对角渐变，请同时指定 startPoint 和 endPoint。
但您需要破译 Figma CSS。 linear-gradient 的第一个参数是角度。 iOS中的线性渐变不是用角度来衡量的，而是用startPoint和endPoint来衡量的，这两个都是CGPoint的引用，其中0, 0代表视图的左上角，1, 1代表右下角.您的155.98deg 角度表明您正在寻找“从左上角到右下角”的渐变，这将是0, 0 的startPoint 和1, 1 的endPoint。 （角度和这些CGPoint 值之间的确切映射将根据相关视图的纵横比而有所不同。）
linear-gradient 的下一个参数是颜色和位置元组的数组。纯色以十六进制字符串表示。半透明颜色用整数rgb 值表示。所以#F5FEFF 0% 位于位置 0.0，0xf5 表示红色，0xfe 表示绿色，0xff 表示蓝色。您需要将所有这些数字除以 0xff（或 255）。 （Xcode 颜色文字将为您进行转换。）字符串末尾的 0% 是该颜色在渐变中的相对位置（其中 0% 是渐变的开始，100% 是渐变的结束） .这与CAGradientLayer 属性locations 很好地相关（尽管% 数字表示为0 和1 之间的值）。
rgba(106, 164, 189, 0.5) 47.57% 是红色、绿色和蓝色的值，分别为 106、164 和 189（每个除以 255）。 0.5 是 50% 的 alpha。而 47.57 是位置（沿梯度的 47.57%）。
无论如何，要渲染它，定义一个颜色数组、位置数组以及渐变的开始和结束：
@IBDesignable class GradientView: UIView {
override class var layerClass: AnyClass { CAGradientLayer.self }
var gradientLayer: CAGradientLayer { layer as! CAGradientLayer }
override init(frame: CGRect = .zero) {
super.init(frame: frame)
configure()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
configure()
}
func configure() {
gradientLayer.colors = [#colorLiteral(red: 0.9607843137, green: 0.9960784314, blue: 1, alpha: 1), #colorLiteral(red: 0.7725490196, green: 0.9725490196, blue: 1, alpha: 1), #colorLiteral(red: 0.4156862745, green: 0.6431372549, blue: 0.7411764706, alpha: 0.5), #colorLiteral(red: 0.05490196078, green: 0.5450980392, blue: 0.6117647059, alpha: 1)].map { $0.cgColor }
gradientLayer.locations = [0, 0, 0.4757, 0.8875]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
}
}
如果您想查看这些颜色的十六进制表示或整数表示，只需双击颜色并点击“其他”即可查看 RGB 表示。例如。我双击第二种颜色，可以看到#C5F8FF的值：
最后的几点观察：
注意，我不只是添加CAGradientLayer 并设置它的框架。相反，我创建了一个支持层是渐变的视图。这样，如果视图大小因约束而发生变化（或者如果您为大小变化设置动画），CAGradientLayer 的大小也会动态变化。
我把它做成了@IBDesignable，所以我可以在故事板中看到它。这不是必需的，但在使用故事板时很有用。
我想知道你的设计师是否真的打算让#F5FEFF 和#C5F8FF 都处于 0% 的位置。我怀疑这是一个错误。 （Figma 很容易让渐变中的多个颜色数据点以 0% 或 100% 相互重叠。）
您提供的 CSS 在语法上看起来不正确。值得注意的是，我不知道如何处理最后浮动的#FFFFFF（而且您的渐变点不会一直达到 100%）。但是，我认为我不需要在这里了解您的全部意图……您可以根据需要更新 CAGradientLayer colors 和 locations 数组。只需确保它们具有相同数量的条目即可。
正如您所注意到的，如果您在 Figma 右侧面板中点击最右侧的“代码”选项卡，您可以看到 iOS 代码 sn-p。我会谨慎地在您的应用程序中逐字使用该代码，因为它 (a) 不会使用上面概述的 UIView 子类，如果视图改变大小或动画则中断； (b) 它倾向于使用硬编码值，而您通常希望使用约束来指示 iOS 中的布局。使用此代码 sn-p 获取灵感、可能的 API 建议等，但我不倾向于使用该确切代码。和所有自动生成的代码 sn-ps 一样，Figma 建议的 iOS 代码并不理想。
【讨论】：
let layerGradient = CAGradientLayer()
layerGradient.colors = [hexStringToUIColor(hex: "yourhex").cgColor, hexStringToUIColor(hex: "yourhex").cgColor]
layerGradient.startPoint = CGPoint(x: 0, y: 0.5)
layerGradient.endPoint = CGPoint(x: 1, y: 0.5)
layerGradient.frame = CGRect(x: 0, y: 0, width: yourView.bounds.width, height: yourView.bounds.height)
self.yourView.layer.addSublayer(layerGradient)
本质上是在视图顶部添加一个图层，然后指定起点和终点并提供要使用的颜色。
这是用于将十六进制字符串转换为颜色的函数
func hexStringToUIColor (hex:String) -> UIColor {
var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
if (cString.hasPrefix("#")) {
cString.remove(at: cString.startIndex)
}
if ((cString.count) != 6) {
return UIColor.gray
}
var rgbValue:UInt64 = 0
Scanner(string: cString).scanHexInt64(&rgbValue)
return UIColor(
red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
alpha: CGFloat(1.0)
)
}
【讨论】：