Я пытаюсь нарисовать круг позади определенных частей символов UILabel без необходимости использовать несколько меток или пересчитывать фреймы.

Я знаю, что могу вставить изображение в UILabel, используя текст с атрибутами, но я хочу, чтобы круг стоял позади чисел (от 1 до 9). Я не хочу хранить изображения с 1 по 9. Я также не могу найти ни одного модуля, обеспечивающего это.

    let fullText = NSMutableAttributedString()

    let imageAttachment = NSTextAttachment()
    imageAttachment.image = UIImage(named: "\(number)_\(color == .yellow ? "yellow" : "gray")")
    let imageString = NSAttributedString(attachment: imageAttachment)
    let endString = NSAttributedString("nouveaux")

    fullString.append(imageString)
    fullString.append(endString)

    mainLabel.attributedText = fullString

enter image description here

< Сильный > ИЗМЕНИТЬ

Я хочу нарисовать кружок за каждой цифрой строки. Я хотел бы, чтобы это был общий инструмент, если это возможно, какой-то парсер, который, если возможно, возвращает атрибутивную строку, а если нет, то уникальный UIView. Другой вариант использования - «4 сообщения | чат 2» (4 - желтые, 2 - серые).

2
michael-martinez 19 Сен 2018 в 19:53

2 ответа

Лучший ответ

Я не понимаю, почему вы просто не используете служебную функцию, которая рисует цифру в круге в реальном времени. Таким образом, вы можете выбрать любой шрифт цифр, размер круга, цвет цифр и цвет круга, который вам нравится. Например:

func circleAroundDigit(_ num:Int, circleColor:UIColor,
                       digitColor:UIColor, diameter:CGFloat,
                       font:UIFont) -> UIImage {
    precondition((0...9).contains(num), "digit is not a digit")
    let p = NSMutableParagraphStyle()
    p.alignment = .center
    let s = NSAttributedString(string: String(num), attributes:
        [.font:font, .foregroundColor:digitColor, .paragraphStyle:p])
    let r = UIGraphicsImageRenderer(size: CGSize(width:diameter, height:diameter))
    return r.image {con in
        circleColor.setFill()
        con.cgContext.fillEllipse(in:
            CGRect(x: 0, y: 0, width: diameter, height: diameter))
        s.draw(in: CGRect(x: 0, y: diameter / 2 - font.lineHeight / 2,
                          width: diameter, height: diameter))
    }
}

Вот как это использовать:

let im = circleAroundDigit(3, circleColor: .yellow, 
    digitColor: .white, diameter: 30, font:UIFont(name: "GillSans", size: 20)!)

Вот получившееся изображение; обратите внимание, что каждый аспект этого можно настроить, просто вызвав функцию по-другому:

enter image description here

Хорошо, теперь у вас есть изображение. Вы говорите, что уже знаете, как вставить изображение в строку с атрибутами и отобразить его как часть метки, поэтому я не буду объяснять, как это сделать:

enter image description here

3
matt 19 Сен 2018 в 20:13

Это довольно просто, используя UIStackView, устанавливая радиус угла слоя цветного представления ...

Результат ...

Или с 2 видами стека во внешнем виде стека ≥

Результат ...

1
Ashley Mills 19 Сен 2018 в 17:24