我正在尝试创建一个表格 View (自定义类而不是 UITableView),其结果具有渐变效果,如下例图所示:
我尝试过的:
- 我成功地将正确的渐变添加为每个表格单元格的背景,但我需要它是每个标签文本的颜色,而不是每个单元格的背景。 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 个结果。
我无法用数学来解决这个问题,我不知道从哪里开始。
有什么想法吗?
最佳答案
您可以对颜色的 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
测试结果
它也适用于任意数量的部分和不同的颜色!
关于ios - 如何使用颜色划分创建渐变效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46004140/