1

Цель:

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

multi-line

Что сделал я:

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

Вопросы:

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

just a line

2
  • вычисляем длины полосок в процентном отношении, учитывая при этом расстояния между ними, используем например UIBezierPath.init(roundedRect:byRoundingCorners:cornerRadii:) для рисования полосок с закруглениями
    – schmidt9
    30 ноя 2020 в 12:07
  • @schmidt9, пожалуйста, можете показать как правильно это реализовать? Чтобы я знал и больше не задавал такие вопросы на SO 30 ноя 2020 в 12:27

1 ответ 1

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
        }
        
    }

}

введите сюда описание изображения

1
  • Большое спасибо, буду изучать Ваш код! 1 дек 2020 в 6:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.