ios - 如何使用颜色划分创建渐变效果？

Question

我正在尝试创建一个表格 View (自定义类而不是 UITableView)，其结果具有渐变效果，如下例图所示:

我尝试过的:

1. 我成功地将正确的渐变添加为每个表格单元格的背景，但我需要它是每个标签文本的颜色，而不是每个单元格的背景。 Question 。 (我问过这个。)

失败的尝试:

创建自定义渐变图像并将其作为 colorWithPatternImage: 添加到每个标签，但由于渐变是 1，因此每个单元格看起来都相同。 Question .

失败的尝试:

最后要尝试的事情:

假设您有两种颜色:color1 和 color2。通过混合这些颜色可以产生渐变。在上图中，颜色 1 = 紫色，颜色 2 = 橙色。通过根据结果的数量将渐变划分为多个部分，然后找到每个部分的平均颜色并将其用作每个相应结果的文本颜色，可以很容易地创建渐变效果。

例如:

5 个结果 = 5 个部门。

• 分区1 = 紫色
• division2 = 减少紫色，增加橙色
• division3 = 相等的紫色，相等的橙色
• division4 = 紫色最少，橙色最多
• division5 = 橙色

结果并不那么详细，因为每个文本都是纯色，但当文本很小时，它同样令人印象深刻:

问题是，对于像这样的两种颜色:

紫色:128.0、0.0、255.0

橙色:255.0、128.0、0.0

如何将其分为 5 个部分并求出每个部分的平均值？

我可以使用 Pixelmator 中的吸管工具来完成此操作，但前提是我知道结果的固定数量，不适用于 6 个结果。

我无法用数学来解决这个问题，我不知道从哪里开始。

有什么想法吗？

Answer 1

您可以对颜色的 RGB 值使用数学运算。

要获取 rgb 值，您可以使用 UIColor 上的 getRed:green:blue:alpha 方法。然后您所要做的就是根据您需要的部分数量将颜色平均在一起。

这是一个函数，它应该根据开始和结束颜色以及您需要的划分数返回颜色数组。

解决方案

func divideColors(firstColor: UIColor, secondColor: UIColor, sections: Int) -> [UIColor] {

    // get rgb values from the colors
    var firstRed: CGFloat = 0; var firstGreen: CGFloat = 0; var firstBlue: CGFloat = 0; var firstAlpha: CGFloat = 0;
    firstColor.getRed(&firstRed, green: &firstGreen, blue: &firstBlue, alpha: &firstAlpha)
    var secondRed: CGFloat = 0; var secondGreen: CGFloat = 0; var secondBlue: CGFloat = 0; var secondAlpha: CGFloat = 0;
    secondColor.getRed(&secondRed, green: &secondGreen, blue: &secondBlue, alpha: &secondAlpha)

    // function to mix the colors
    func mix(_ first: CGFloat, _ second: CGFloat, ratio: CGFloat) -> CGFloat { return first + ratio * (second - first) }

    // variable setup
    var colors = [UIColor]()
    let ratioPerSection = 1.0 / CGFloat(sections)

    // mix the colors for each section
    for section in 0 ..< sections {
        let newRed = mix(firstRed, secondRed, ratio: ratioPerSection * CGFloat(section))
        let newGreen = mix(firstGreen, secondGreen, ratio: ratioPerSection * CGFloat(section))
        let newBlue = mix(firstBlue, secondBlue, ratio: ratioPerSection * CGFloat(section))
        let newAlpha = mix(firstAlpha, secondAlpha, ratio: ratioPerSection * CGFloat(section))
        let newColor = UIColor(red: newRed, green: newGreen, blue: newBlue, alpha: newAlpha)
        colors.append(newColor)
    }

    return colors

}

您的问题被标记为 Objective-C，但将上面的 Swift 代码转换为 Objective-C 应该很容易，因为您将使用相同的 UIColor API .

这里是一些测试上述函数的代码(非常适合 Swift Playground)。

测试代码

let sections = 5
let view = UIView(frame: CGRect(x: 0, y: 0, width: 250, height: 50))
for (index, color) in divideColors(firstColor: UIColor.purple, secondColor: UIColor.orange, sections: sections).enumerated() {
    let v = UIView(frame: CGRect(x: CGFloat(index) * 250 / CGFloat(sections), y: 0, width: 250 / CGFloat(sections), height: 50))
    v.backgroundColor = color
    view.addSubview(v)
}
view.backgroundColor = .white

测试结果

它也适用于任意数量的部分和不同的颜色!