我如何在 swift 中使用线性渐变制作 uiview [英] How do i make uiview using linear gradient in swift

问题描述

我的 figma 有这种风格:背景:线性梯度(155.98deg, #F5FEFF 0%, #C5F8FF 0%, rgba(106, 164, 189, 0.5) 47.57%, #0E8B9C 88.75%), #FFFFFF;我需要将我的 uiview 设为线性渐变

i have in my figma this style: background: linear-gradient(155.98deg, #F5FEFF 0%, #C5F8FF 0%, rgba(106, 164, 189, 0.5) 47.57%, #0E8B9C 88.75%), #FFFFFF; i need to make my uiview as linear-gradient

推荐答案

基本思想是用 colors 和 locations<的数组配置一个 CAGradientLayer/代码>.如果你想要一个对角线渐变，也指定一个 startPoint 和 endPoint.

The basic idea is to configure a CAGradientLayer with an array of colors and locations. If you want a diagonal gradient, specify a startPoint and endPoint, too.

但是您需要破译 Figma CSS.linear-gradient 的第一个参数是角度.iOS 中的线性梯度不是以角度来衡量的，而是用 startPoint 和 endPoint 来衡量的，这两个都是 CGPoint 引用，其中 0,0 代表视图的左上角，1, 1 代表视图的右下角.您的 155.98deg 角度表明您正在寻找从左上角到右下角"的渐变，这将是 0, 0<的 startPoint/code> 和 1, 1 的 endPoint.(角度和这些 CGPoint 值之间的确切映射将根据相关视图的纵横比而有所不同.)

But you need to decipher that Figma CSS. The first parameter to linear-gradient is the angle. Linear gradients in iOS are not measured in angles, but rather with startPoint and endPoint, both of which are CGPoint references where 0, 0 represents the upper left corner of the view and 1, 1 represents the lower right corner. Your angle of 155.98deg suggests that you're looking for a "from upper left to lower right" gradient, which would be a startPoint of 0, 0 and an endPoint of 1, 1. (The exact mapping between the angle and these CGPoint values will vary based upon the aspect ratio of the view in question.)

linear-gradient 的下一个参数是颜色和位置的元组数组.纯色以十六进制字符串表示.半透明颜色用整数 rgb 值表示.所以 #F5FEFF 0% 位于位置 0.0，0xf5 代表红色，0xfe 代表绿色，0xff> 蓝色.您需要将所有这些数字除以 0xff(或 255).(Xcode 颜色文字将为您进行转换.)字符串末尾的 0% 是此颜色在渐变中的相对位置(其中 0% 是渐变的开始，100% 是结束).这与 CAGradientLayer 属性 locations 非常相关(尽管 % 数字表示为 0 和 1 之间的值).

The next parameter to linear-gradient is an array of tuples of colors and location. Solid colors are represented in hex strings. Translucent colors are represented with integer rgb values. So #F5FEFF 0% is at location 0.0 and a color of 0xf5 for red, 0xfe for green, and 0xff for blue. You need to divide all those numbers by 0xff (or 255). (The Xcode color literal will do that conversion for you.) And the 0% at the end of the string is the relative location of this color in the gradient (where 0% is the start of the gradient and 100% is the end). This correlates nicely to the CAGradientLayer property locations (though the % numbers are represented as values between 0 and 1).

rgba(106, 164, 189, 0.5) 47.57% 分别是红色、绿色和蓝色值 106、164 和 189(分别除以 255).0.5 是 50% 的 alpha.而 47.57 是位置(沿着梯度的 47.57%).

The rgba(106, 164, 189, 0.5) 47.57% is red, green, and blue values of 106, 164, and 189, respectively, (each divided by 255). The 0.5 is an alpha of 50%. And the 47.57 is the position (47.57% of the way along the gradient).

无论如何，要渲染它，请定义一个颜色数组、位置数组以及渐变的开始和结束:

Anyway, to render this, define an array of colors, array of positions, and the start and end of the gradient:

@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 值:

If you want to see either the hex representation or integer representation of those colors, just double click on the color and tap on "Other" to see the RGB representations. E.g. I double clicked on the second color and I can see the #C5F8FF value:

最后的一些观察:

• 注意，我不只是添加一个 CAGradientLayer 并设置它的框架.相反，我创建了一个支持层是渐变的视图.这样，如果视图大小因约束而改变(或者如果您为大小更改设置动画)，CAGradientLayer 的大小也会动态更改.

• Note, I didn't just add a CAGradientLayer and set its frame. Instead, I created a view whose backing layer is a gradient. That way, if the view size changes because of constraints (or if you animate the size change), the size of the CAGradientLayer changes dynamically, too.

我制作了它 @IBDesignable 以便我可以在故事板中看到它.这不是必需的，但在使用故事板时很有用.

I made it @IBDesignable so I could see it in the storyboard. That’s not necessary, but is useful if using storyboards.

我想知道您的设计师是否真的打算将 #F5FEFF 和 #C5F8FF 都放在 0% 的位置.我怀疑这是一个错误.(Figma 使得渐变中的多个颜色数据点很容易在 0% 或 100% 处相互重叠.)

I wonder if your designer really meant to have both #F5FEFF and #C5F8FF at the 0% position. I suspect that was a mistake. (Figma makes it too easy to have multiple color data points in the gradient overlap with each other at either 0% or 100%.)

您提供的 CSS 在语法上看起来不正确.值得注意的是，我不知道如何处理最后浮动的 #FFFFFF(并且您的渐变点不会一直达到 100%).但是，我认为我不需要在这里了解您的全部意图……您只需将 CAGradientLayer colors 和 locations 数组更新为你觉得合适.只需确保它们的条目数相同即可.

The CSS you've provided does not look syntactically correct. Notably, I don't know what to make of that #FFFFFF floating at the end (and your gradient points don’t go all the way to 100%). But, I don't think I need to know your full intent here ... you can just update the CAGradientLayer colors and locations arrays as you see fit. Just make sure they both have the same number of entries.

如您所见，如果您点击 Figma 右侧面板中最右侧的代码"选项卡，您可以看到一个 iOS 代码片段.我会谨慎地在您的应用程序中逐字使用该代码，因为它 (a) 不会使用上面概述的 UIView 子类，如果视图更改大小或动画，则会中断；(b) 它将倾向于使用硬编码值，而您通常希望使用约束来规定 iOS 中的布局.使用此代码片段获取灵感、可能的 API 建议等，但我不会倾向于使用该确切代码.与所有自动生成的代码片段一样，Figma 建议的 iOS 代码并不理想.

As you have noted, if you tap on the rightmost "Code" tab in the panel on the right in Figma, you can see an iOS code snippet. I would be wary of using that code, verbatim, in your app, because it (a) won’t use the UIView subclass outlined above, breaking if the view changes size or is animated; and (b) it will tend to use hard-coded values whereas you generally want to use constraints to dictate the layouts within iOS. Use this code snippet for inspiration, suggestions of possible API, etc., but I would not be inclined to use that exact code. Like all auto-generated code snippets, Figma’s suggested iOS code is not ideal.

这篇关于我如何在 swift 中使用线性渐变制作 uiview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！