ios - 快速制作多色条

Question

我正在尝试制作一条具有固定高度和宽度并分为九段的线(基本上是 UIView)。我希望能够控制每个段的高度及其颜色。例如。我希望第一段是黄色，占线总高度的 30%，第二段是红色，占总高度的 8%，等等。

我不太擅长 Swift，所以我的解决方案是制作 9 个 UIView，将它们堆叠在我的 Storyboard上，然后手动设置每个 View 的高度和背景颜色，这样它们看起来就像一条五颜六色的线。是否有更清洁且体积更小的解决方案？谢谢

Answer 1

为此我强烈推荐使用 Core Graphics。

由于绘图非常简单(您只想在 View 中堆叠一些彩色线条)，您可以通过子类化 UIView 并覆盖 drawRect()< 轻松实现此目的 并在 Core Graphics 中绘制它们。

这肯定是比添加 9 个 subview 更简洁的解决方案!

像这样应该可以达到预期的结果:

class LineView : UIView {

    let colors:[UIColor] = [UIColor.redColor(), UIColor.blueColor(), UIColor.greenColor()]
    let values:[CGFloat] = [0.35, 0.45, 0.2]

    override func drawRect(rect: CGRect) {

        let r = self.bounds // the view's bounds
        let numberOfSegments = values.count // number of segments to render

        let ctx = UIGraphicsGetCurrentContext() // get the current context

        var cumulativeValue:CGFloat = 0 // store a cumulative value in order to start each line after the last one
        for i in 0..<numberOfSegments {

            CGContextSetFillColorWithColor(ctx, colors[i]) // set fill color to the given color
            CGContextFillRect(ctx, CGRectMake(0, cumulativeValue*r.size.height, r.size.width, values[i]*r.size.height)) // fill that given segment

            cumulativeValue += values[i] // increment cumulative value
        }
    }
}

---

更进一步...

您可以允许从 LineView 类外部更改 colors 和 values 属性，从而获得更大的灵 active 。您只需覆盖 didSet 即可在属性更改时触发 View 重绘。

例如:

class LineView : UIView {

    /// An array of optional UIColors (clearColor is used when nil is provided) defining the color of each segment.
    var colors : [UIColor?] = [UIColor?]() {
        didSet {
            self.setNeedsDisplay()
        }
    }

    /// An array of CGFloat values to define how much of the view each segment occupies. Should add up to 1.0.
    var values : [CGFloat] = [CGFloat]() {
        didSet {
            self.setNeedsDisplay()
        }
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clearColor()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func drawRect(rect: CGRect) {

        let r = self.bounds // the view's bounds
        let numberOfSegments = values.count // number of segments to render

        let ctx = UIGraphicsGetCurrentContext() // get the current context

        var cumulativeValue:CGFloat = 0 // store a cumulative value in order to start each line after the last one
        for i in 0..<numberOfSegments {

            CGContextSetFillColorWithColor(ctx, colors[i]?.CGColor ?? UIColor.clearColor().CGColor) // set fill color to the given color if it's provided, else use clearColor
            CGContextFillRect(ctx, CGRectMake(0, cumulativeValue*r.size.height, r.size.width, values[i]*r.size.height)) // fill that given segment

            cumulativeValue += values[i] // increment cumulative value
        }
    }
}

用法:

let lineView = LineView(frame: CGRectMake(50, 50, 20, view.bounds.size.height-100))

lineView.colors = [
    UIColor(red: 1.0, green: 31.0/255.0, blue: 73.0/255.0, alpha: 1.0), // red
    UIColor(red:1.0, green: 138.0/255.0, blue: 0.0, alpha:1.0), // orange
    UIColor(red: 122.0/255.0, green: 108.0/255.0, blue: 1.0, alpha: 1.0), // purple
    UIColor(red: 0.0, green: 100.0/255.0, blue: 1.0, alpha: 1.0), // dark blue
    UIColor(red: 100.0/255.0, green: 241.0/255.0, blue: 183.0/255.0, alpha: 1.0), // green
    UIColor(red: 0.0, green: 222.0/255.0, blue: 1.0, alpha: 1.0) // blue
]
lineView.values = [0.15, 0.1, 0.35, 0.15, 0.1, 0.15]

view.addSubview(lineView);

(我这里只添加了6种颜色，但是你可以添加任意多的颜色)。

---

完整项目:https://github.com/hamishknight/Color-Segment-Line-View