2016-12-16 2 views
2

У меня есть UIProgressView и вы хотите иметь радиус угла для заполненной части (часть прогресса), я могу сделать углы обзора прогресса округлены с использованием свойства cornerRadius, I также хотите, чтобы край заливки был округлен. Пожалуйста, найдите ниже, как выглядит индикатор выполнения.UIProgressView с закругленным краем дорожки прогресса - Swift 3

enter image description here

Я хочу край красной части, чтобы быть округлены.

Я попытался установить progressImage с изображением с закругленными краями, в то время как он решает проблему, само изображение далеко растянуто, радиусы в углах не поддерживаются.

Еще одна вещь, которую я пробовал, - это нарисовать прямоугольник и наполнить его цветом прогресса и преобразовать его в UIImage со следующим кодом и установить его как прогресс. Изображение, в данном случае, изображение всегда черное, не уверенное что мне не хватает. Здесь Вы можете найти код для преобразования UIView в UIImage

class func imageWithView(view: UIView) -> UIImage { 
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0) 
    view.drawHierarchy(in: view.bounds, afterScreenUpdates: true) 
    let img = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return img! 
} 
+0

Возможного дубликат [Как сделать округлый бар угла прогресса в стриже] (https://stackoverflow.com/questions/32114779/how-to-make-rounded-corner-progress- bar-in-swift) –

ответ

2

Этот вопрос есть несколько месяцев, но так как я имел те же сомнения, я хочу поделиться ответ, что я нашел. Я не мог найти способ сделать это, просто изменив UIProgressView, напрямую. Похоже, самый простой способ - настроить представление, чтобы он выглядел как индикатор выполнения. Я основан мой ответ на Umair Afzal в этом вопросе: https://stackoverflow.com/a/41373525/1775356 Это немного модифицирован для моих потребностей, и это также обновляется для Swift 3.

import Foundation 

import UIKit 

class CustomHorizontalProgressView: UIView { 
    var color: UIColor = UIColor.red 
    var progress: CGFloat = 0.0 { 

     didSet { 
      setNeedsDisplay() 
     } 
    } 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     setup() 
    } 

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

     setup() 
    } 

    func setup() { 
     self.backgroundColor = color.withAlphaComponent(0.4) 
    } 

    override func draw(_ rect: CGRect) { 
     super.draw(rect) 

     var progress = self.progress 
     progress = progress > 1.0 ? progress/100 : progress 

     self.layer.cornerRadius = self.frame.height/2.0 

     let margin: CGFloat = 0 
     var width = (self.frame.width - margin) * progress 
     let height = self.frame.height - margin 

     if (width < height) { 
      width = height 
     } 

     let pathRef = UIBezierPath(roundedRect: CGRect(x: margin/2.0, y: margin/2.0, width: width, height: height), cornerRadius: height/2.0) 

     color.setFill() 
     pathRef.fill() 

     UIColor.clear.setStroke() 
     pathRef.stroke() 

     pathRef.close()    
    } 
} 

Я использую цвет для прогресса отлива и тот же цвет с альфа-40% для фонового оттенка. Это легко изменить, выбрав другой цвет фона. Для записи в IB были добавлены внешние закругленные углы. Это также можно сделать программно. Это выглядит следующим образом:

+0

Неправильно называть setNeedsDisplay в drawRect (теперь это делается косвенно). Что нужно - вызов setNeedsDisplay, который запускает drawRect. –

+0

Спасибо за головы! Я решил одобрить ваше редактирование, потому что, если бы я отклонил его как рассмотренный двумя другими пользователями, я бы просто отредактировал его, как вы предложили. – Iris

+0

настройка цвета фона не работает. Он заполняет весь вид не только округленной частью. – Alan

Смежные вопросы