Несколько градиентов на одной и той же метке в Swift [дубликат]

Чтобы сделать это проще без переопределения drawRect:, вы можете создать 2 UIViews, чтобы обойти это.

Синий фон UIView (A) содержит белый UILabel. (Обрезание субвью включено)

Белый фон UIView (B) содержит синий UILabel.

A будет накладываться на B.

Примечание: 2 UILabels будут иметь одинаковые размеры, одинаковые шрифты и одинаковые позиции.

Регулируя ширину UIView A, вы создадите панель процесса, как хотите.

Лучший и самый чистый способ сделать это - использовать маски. Иерархия представлений вашего индикатора выполнения должна выглядеть так:

• Base Subview at index #1 Вид, показывающий прогресс Subview at index #2 UILabel с цветом текста так же, как и базовый Subview at index #3 UILabel с текстом цвет тот же, что и представление, показывающее прогресс

Мы будем применять маску к #3. Мы начинаем применять маску, как только представление, показывающее прогресс, достигнет кадра #3. Рамка маски должна следить за ходом. Когда #3 постепенно маскируется, ярлык внизу раскрывается, и вы достигаете эффекта красиво и с небольшим усилием. Здесь вы можете создать маски с CALayers .

Свифт 4 версии ответа Мортена:

class ProgressLabel: UIView {

    var progressBarColor = UIColor(red:108.0/255.0, green:200.0/255.0, blue:226.0/255.0, alpha:1.0)
    var textColor = UIColor.white
    var font = UIFont.boldSystemFont(ofSize: 42)


    var progress: Float = 0 {
        didSet {
            progress = Float.minimum(100.0, Float.maximum(progress, 0.0))
            self.setNeedsDisplay()
        }
    }

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()!

        // Set up environment.
        let size = self.bounds.size

        // Prepare progress as a string.
        let progressMessage = NSString(format:"%d %%", Int(progress))
        var attributes: [NSAttributedStringKey:Any] = [ NSAttributedStringKey.font : font ]
        let textSize = progressMessage.size(withAttributes: attributes)
        let progressX = ceil(CGFloat(progress) / 100 * size.width)
        let textPoint = CGPoint(x: ceil((size.width - textSize.width) / 2.0), y: ceil((size.height - textSize.height) / 2.0))

        // Draw background + foreground text
        progressBarColor.setFill()
        context.fill(self.bounds)
        attributes[NSAttributedStringKey.foregroundColor] = textColor
        progressMessage.draw(at: textPoint, withAttributes: attributes)

        // Clip the drawing that follows to the remaining progress' frame.
        context.saveGState()
        let remainingProgressRect = CGRect(x: progressX, y: 0.0, width: size.width - progressX, height: size.height)
        context.addRect(remainingProgressRect)
        context.clip()

        // Draw again with inverted colors.
        textColor.setFill()
        context.fill(self.bounds)
        attributes[NSAttributedStringKey.foregroundColor] = progressBarColor
        progressMessage.draw(at: textPoint, withAttributes: attributes)

        context.restoreGState()
    }
}

Два UIViews.

1. Назовем один фон, а другой - progressBar. progressBar укладывается поверх фона с одним и тем же источником в своем общем просмотре.
2. Оба они имеют UILabel как subview, а обе метки одинаковы с родителями. background имеет темный backgroundColor, а на ярлыке - светлый textColor, а в представлении прогресса есть вещи наоборот.
3. progressBar имеет более узкую ширину кадра, чем фон, и имеет клипы для изображений == YES

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

Отбросьте эти два представления в новый подкласс UIView под названием ReallyCoolProgressView и дать ему один открытый метод:

-(void)setProgress:(float)progress 

progress - это число от 0.0 до 1.0. Метод масштабирует ширину progressBar и устанавливает как текст ярлыка @ «Прогресс% f», прогресс * 100