Как можно нарисовать с UIBezierPath вот такую multi-line с отступами?

Question

Цель:

Нужно нарисовать вот такую линию. Для большего понимания - синий отрезок это 5% от 100% суммы ( и так понимаю от 100% линии тоже):

Что сделал я:

Как видите, у меня просто линия, да, я могу ее заполнить цветом, но понятия не имею, как можно нарисовать то, что выше скриншотом

Вопросы:

Есть ли готовые варианты решения (в UIBezierPath) вычисления заполнения в процентном соотношении?
Есть ли готовые библиотеки для этого?
Какой подход/алгоритмы использовать, для динамического вычисления заполнения полоски?

Answer 1

Вот примерно так можно нарисовать

class PercentageView: UIView {
    
    struct Percentage {
        var value: CGFloat
        var color: UIColor
    }

    override func draw(_ rect: CGRect) {
        
        let padding: CGFloat = 3.0
        
        
        // фон для вью
        
        UIColor.lightGray.withAlphaComponent(0.3).setFill()
        let path = UIBezierPath(roundedRect: bounds, cornerRadius: 6)
        path.fill()
        
        // тестовые данные
        
        let data = [
            Percentage(value: 5, color: .blue),
            Percentage(value: 15, color: .green),
            Percentage(value: 10, color: .red),
            Percentage(value: 70, color: .magenta)
        ]
        
        // рисуем полоски
        
        var x: CGFloat = 0.0
        let paddings = padding * CGFloat(data.count - 1)
        
        data.forEach {
            
            let sizeFactor = $0.value / 100
            let width = sizeFactor * rect.width - sizeFactor * paddings
            let path = UIBezierPath(roundedRect: CGRect(x: x, y: 0, width: width, height: rect.height), cornerRadius: 6)
            
            $0.color.setFill()
            path.fill()

            x += width + padding
        }
        
    }

}

БЛОГ НА HUSL

Как можно нарисовать с UIBezierPath вот такую multi-line с отступами?

Ответы (1 шт):