Jak sprawić, by UILabel wyświetlał konturowany tekst?

Wszystko, czego chcę, to czarne obramowanie jednego piksela wokół mojego białego tekstu UILabel.

Dotarłem do podklasy UILabel za pomocą poniższego kodu, który niezdarnie zebrałem razem z kilku stycznie powiązanych przykładów online. I działa, ale jest bardzo, bardzo powolny (z wyjątkiem symulatora) i nie mogłem go również wyśrodkować tekstu w pionie (więc tymczasowo zakodowałem na stałe wartość y w ostatnim wierszu). Ahhhh!

void ShowStringCentered(CGContextRef gc, float x, float y, const char *str) {
    CGContextSetTextDrawingMode(gc, kCGTextInvisible);
    CGContextShowTextAtPoint(gc, 0, 0, str, strlen(str));
    CGPoint pt = CGContextGetTextPosition(gc);

    CGContextSetTextDrawingMode(gc, kCGTextFillStroke);

    CGContextShowTextAtPoint(gc, x - pt.x / 2, y, str, strlen(str));
}


- (void)drawRect:(CGRect)rect{

    CGContextRef theContext = UIGraphicsGetCurrentContext();
    CGRect viewBounds = self.bounds;

    CGContextTranslateCTM(theContext, 0, viewBounds.size.height);
    CGContextScaleCTM(theContext, 1, -1);

    CGContextSelectFont (theContext, "Helvetica", viewBounds.size.height,  kCGEncodingMacRoman);

    CGContextSetRGBFillColor (theContext, 1, 1, 1, 1);
    CGContextSetRGBStrokeColor (theContext, 0, 0, 0, 1);
    CGContextSetLineWidth(theContext, 1.0);

    ShowStringCentered(theContext, rect.size.width / 2.0, 12, [[self text] cStringUsingEncoding:NSASCIIStringEncoding]);
}

Mam tylko dokuczliwe uczucie, że pomijam prostszy sposób, aby to zrobić. Być może przez nadpisanie „drawTextInRect”, ale wydaje mi się, że drawTextInRect w ogóle nie nagina się do mojej woli, mimo że wpatruję się w to uważnie i marszczy brwi.

Udało mi się to zrobić, zastępując drawTextInRect:

- (void)drawTextInRect:(CGRect)rect {

  CGSize shadowOffset = self.shadowOffset;
  UIColor *textColor = self.textColor;

  CGContextRef c = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(c, 1);
  CGContextSetLineJoin(c, kCGLineJoinRound);

  CGContextSetTextDrawingMode(c, kCGTextStroke);
  self.textColor = [UIColor whiteColor];
  [super drawTextInRect:rect];

  CGContextSetTextDrawingMode(c, kCGTextFill);
  self.textColor = textColor;
  self.shadowOffset = CGSizeMake(0, 0);
  [super drawTextInRect:rect];

  self.shadowOffset = shadowOffset;

}

Prostszym rozwiązaniem jest użycie przypisanego ciągu w następujący sposób:

Swift 4:

let strokeTextAttributes: [NSAttributedStringKey : Any] = [
    NSAttributedStringKey.strokeColor : UIColor.black,
    NSAttributedStringKey.foregroundColor : UIColor.white,
    NSAttributedStringKey.strokeWidth : -2.0,
    ]

myLabel.attributedText = NSAttributedString(string: "Foo", attributes: strokeTextAttributes)

Swift 4.2:

let strokeTextAttributes: [NSAttributedString.Key : Any] = [
    .strokeColor : UIColor.black,
    .foregroundColor : UIColor.white,
    .strokeWidth : -2.0,
    ]

myLabel.attributedText = NSAttributedString(string: "Foo", attributes: strokeTextAttributes)

Na a UITextFieldmożesz również ustawić defaultTextAttributesi attributedPlaceholder.

Zauważ, że w tym przypadku wartość NSStrokeWidthAttributeName musi być ujemna , tzn. Działają tylko wewnętrzne kontury.

Po przeczytaniu zaakceptowanej odpowiedzi i dwóch poprawkach do niej oraz odpowiedzi od Axela Guilmina, zdecydowałem się skompilować w Swift całościowe rozwiązanie, które mi odpowiada:

import UIKit

class UIOutlinedLabel: UILabel {

    var outlineWidth: CGFloat = 1
    var outlineColor: UIColor = UIColor.whiteColor()

    override func drawTextInRect(rect: CGRect) {

        let strokeTextAttributes = [
            NSStrokeColorAttributeName : outlineColor,
            NSStrokeWidthAttributeName : -1 * outlineWidth,
        ]

        self.attributedText = NSAttributedString(string: self.text ?? "", attributes: strokeTextAttributes)
        super.drawTextInRect(rect)
    }
}

Możesz dodać tę niestandardową klasę UILabel do istniejącej etykiety w Interface Builder i zmienić grubość obramowania i jej kolor, dodając zdefiniowane przez użytkownika atrybuty środowiska wykonawczego w następujący sposób:

Wynik:

Jest jeden problem z implementacją odpowiedzi. Rysowanie tekstu z obrysem ma nieco inną szerokość glifu niż rysowanie tekstu bez obrysu, co może dawać wyniki „bez wyśrodkowania”. Można to naprawić, dodając niewidoczny obrys wokół tekstu wypełnienia.

Zastąpić:

CGContextSetTextDrawingMode(c, kCGTextFill);
self.textColor = textColor;
self.shadowOffset = CGSizeMake(0, 0);
[super drawTextInRect:rect];

z:

CGContextSetTextDrawingMode(context, kCGTextFillStroke);
self.textColor = textColor;
[[UIColor clearColor] setStroke]; // invisible stroke
self.shadowOffset = CGSizeMake(0, 0);
[super drawTextInRect:rect];

Nie jestem w 100% pewien, czy to prawda, ponieważ nie wiem, czy self.textColor = textColor;ma taki sam efekt, jak [textColor setFill], ale powinno działać.

Ujawnienie: jestem twórcą THLabel.

Niedawno opublikowałem podklasę UILabel, która umożliwia zarys tekstu i inne efekty. Możesz go znaleźć tutaj: https://github.com/tobihagemann/THLabel

Nie spowoduje to utworzenia konturu jako takiego, ale spowoduje umieszczenie cienia wokół tekstu, a jeśli zmniejszysz promień cienia, może on przypominać kontur.

label.layer.shadowColor = [[UIColor blackColor] CGColor];
label.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);
label.layer.shadowOpacity = 1.0f;
label.layer.shadowRadius = 1.0f;

Nie wiem, czy jest kompatybilny ze starszymi wersjami iOS ..

W każdym razie mam nadzieję, że to pomoże ...

Wersja klasy Swift 4 oparta na odpowiedzi udzielonej przez kprevas

import Foundation
import UIKit

public class OutlinedText: UILabel{
    internal var mOutlineColor:UIColor?
    internal var mOutlineWidth:CGFloat?

    @IBInspectable var outlineColor: UIColor{
        get { return mOutlineColor ?? UIColor.clear }
        set { mOutlineColor = newValue }
    }

    @IBInspectable var outlineWidth: CGFloat{
        get { return mOutlineWidth ?? 0 }
        set { mOutlineWidth = newValue }
    }    

    override public func drawText(in rect: CGRect) {
        let shadowOffset = self.shadowOffset
        let textColor = self.textColor

        let c = UIGraphicsGetCurrentContext()
        c?.setLineWidth(outlineWidth)
        c?.setLineJoin(.round)
        c?.setTextDrawingMode(.stroke)
        self.textColor = mOutlineColor;
        super.drawText(in:rect)

        c?.setTextDrawingMode(.fill)
        self.textColor = textColor
        self.shadowOffset = CGSize(width: 0, height: 0)
        super.drawText(in:rect)

        self.shadowOffset = shadowOffset
    }
}

Można go zaimplementować w całości w Interface Builder, ustawiając niestandardową klasę UILabel na OutlinedText. Będziesz wtedy mieć możliwość ustawienia szerokości i koloru konturu w panelu Właściwości.

Jeśli chcesz animować coś skomplikowanego, najlepszym sposobem jest programowe zrobienie tego zrzutu ekranu i animacji!

Aby zrobić zrzut ekranu widoku, potrzebujesz trochę takiego kodu:

UIGraphicsBeginImageContext(mainContentView.bounds.size);
[mainContentView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext(); 

Gdzie mainContentView to widok, z którego chcesz zrobić zrzut ekranu. Dodaj viewImage do UIImageView i animuj to.

Mam nadzieję, że to przyspieszy twoją animację !!

N

Jak wspomniał MuscleRumble , granica akceptowanej odpowiedzi jest nieco poza środkiem. Udało mi się to poprawić, ustawiając szerokość obrysu na zero zamiast zmieniać kolor na wyraźny.

czyli wymiana:

CGContextSetTextDrawingMode(c, kCGTextFill);
self.textColor = textColor;
self.shadowOffset = CGSizeMake(0, 0);
[super drawTextInRect:rect];

z:

CGContextSetTextDrawingMode(c, kCGTextFillStroke);
self.textColor = textColor;
CGContextSetLineWidth(c, 0); // set stroke width to zero
self.shadowOffset = CGSizeMake(0, 0);
[super drawTextInRect:rect];

Właśnie skomentowałbym jego odpowiedź, ale najwyraźniej nie jestem wystarczająco „renomowany”.

jeśli WSZYSTKO, czego chcesz, to czarne obramowanie jednego piksela wokół mojego białego tekstu UILabel,

to myślę, że utrudniasz problem, niż jest ... Nie wiem na podstawie pamięci, której funkcji „draw rect / frameRect” powinieneś użyć, ale będzie ci łatwo ją znaleźć. ta metoda po prostu demonstruje strategię (pozwól superklasie wykonać pracę!):

- (void)drawRect:(CGRect)rect
{
  [super drawRect:rect];
  [context frameRect:rect]; // research which rect drawing function to use...
}

Znalazłem problem z główną odpowiedzią. Pozycja tekstu niekoniecznie musi być prawidłowo wyśrodkowana względem lokalizacji subpikseli, więc kontur może być niedopasowany dookoła tekstu. Naprawiłem to za pomocą następującego kodu, który używa CGContextSetShouldSubpixelQuantizeFonts(ctx, false):

- (void)drawTextInRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    [self.textOutlineColor setStroke];
    [self.textColor setFill];

    CGContextSetShouldSubpixelQuantizeFonts(ctx, false);

    CGContextSetLineWidth(ctx, self.textOutlineWidth);
    CGContextSetLineJoin(ctx, kCGLineJoinRound);

    CGContextSetTextDrawingMode(ctx, kCGTextStroke);
    [self.text drawInRect:rect withFont:self.font lineBreakMode:NSLineBreakByWordWrapping alignment:self.textAlignment];

    CGContextSetTextDrawingMode(ctx, kCGTextFill);
    [self.text drawInRect:rect withFont:self.font lineBreakMode:NSLineBreakByWordWrapping alignment:self.textAlignment];
}

Zakłada się, że zdefiniowałeś textOutlineColori textOutlineWidthjako właściwości.

Oto kolejna odpowiedź, aby umieścić zarysowany tekst na etykiecie.

extension UILabel {

func setOutLinedText(_ text: String) {
    let attribute : [NSAttributedString.Key : Any] = [
        NSAttributedString.Key.strokeColor : UIColor.black,
        NSAttributedString.Key.foregroundColor : UIColor.white,
        NSAttributedString.Key.strokeWidth : -2.0,
        NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 12)
        ] as [NSAttributedString.Key  : Any]

    let customizedText = NSMutableAttributedString(string: text,
                                                   attributes: attribute)
    attributedText = customizedText
 }

}

ustawić zarysowany tekst po prostu używając metody rozszerzenia.

lblTitle.setOutLinedText("Enter your email address or username")

możliwe jest również utworzenie podklasy UILabel z następującą logiką:

- (void)setText:(NSString *)text {
    [self addOutlineForAttributedText:[[NSAttributedString alloc] initWithString:text]];
}

- (void)setAttributedText:(NSAttributedString *)attributedText {
    [self addOutlineForAttributedText:attributedText];
}

- (void)addOutlineForAttributedText:(NSAttributedString *)attributedText {
    NSDictionary *strokeTextAttributes = @{
                                           NSStrokeColorAttributeName: [UIColor blackColor],
                                           NSStrokeWidthAttributeName : @(-2)
                                           };

    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithAttributedString:attributedText];
    [attrStr addAttributes:strokeTextAttributes range:NSMakeRange(0, attrStr.length)];

    super.attributedText = attrStr;
}

a jeśli ustawisz tekst w Storyboard, to:

- (instancetype)initWithCoder:(NSCoder *)aDecoder {

    self = [super initWithCoder:aDecoder];
    if (self) {
        // to apply border for text from storyboard
        [self addOutlineForAttributedText:[[NSAttributedString alloc] initWithString:self.text]];
    }
    return self;
}

Jeśli Twoim celem jest coś takiego:

Oto, jak to osiągnąłem: Dodałem nową labelklasę niestandardową jako Widok podrzędny do mojego obecnego UILabel (zainspirowany tą odpowiedzią ).

Po prostu skopiuj i wklej go do swojego projektu i gotowe:

extension UILabel {
    func addTextOutline(usingColor outlineColor: UIColor, outlineWidth: CGFloat) {
        class OutlinedText: UILabel{
            var outlineWidth: CGFloat = 0
            var outlineColor: UIColor = .clear

            override public func drawText(in rect: CGRect) {
                let shadowOffset = self.shadowOffset
                let textColor = self.textColor

                let c = UIGraphicsGetCurrentContext()
                c?.setLineWidth(outlineWidth)
                c?.setLineJoin(.round)
                c?.setTextDrawingMode(.stroke)
                self.textAlignment = .center
                self.textColor = outlineColor
                super.drawText(in:rect)

                c?.setTextDrawingMode(.fill)
                self.textColor = textColor
                self.shadowOffset = CGSize(width: 0, height: 0)
                super.drawText(in:rect)

                self.shadowOffset = shadowOffset
            }
        }

        let textOutline = OutlinedText()
        let outlineTag = 9999

        if let prevTextOutline = viewWithTag(outlineTag) {
            prevTextOutline.removeFromSuperview()
        }

        textOutline.outlineColor = outlineColor
        textOutline.outlineWidth = outlineWidth
        textOutline.textColor = textColor
        textOutline.font = font
        textOutline.text = text
        textOutline.tag = outlineTag

        sizeToFit()
        addSubview(textOutline)
        textOutline.frame = CGRect(x: -(outlineWidth / 2), y: -(outlineWidth / 2),
                                   width: bounds.width + outlineWidth,
                                   height: bounds.height + outlineWidth)
    }
}

STOSOWANIE:

yourLabel.addTextOutline(usingColor: .red, outlineWidth: 6)

działa również UIButtonz wszystkimi jego animacjami:

yourButton.titleLabel?.addTextOutline(usingColor: .red, outlineWidth: 6)

Dlaczego nie utworzysz obramowania 1px UIView w Photoshopie, a następnie ustawisz UIView z obrazem i nie umieścisz go za UILabel?

Kod:

UIView *myView;
UIImage *imageName = [UIImage imageNamed:@"1pxBorderImage.png"];
UIColor *tempColour = [[UIColor alloc] initWithPatternImage:imageName];
myView.backgroundColor = tempColour;
[tempColour release];

Zaoszczędzi ci to podklasy obiektu i jest to dość proste.

Nie wspominając o tym, że chcesz tworzyć animacje, jest to wbudowane w klasę UIView.

Aby umieścić obramowanie z zaokrąglonymi krawędziami wokół UILabel, wykonuję następujące czynności:

labelName.layer.borderWidth = 1;
labelName.layer.borderColor = [[UIColor grayColor] CGColor];
labelName.layer.cornerRadius = 10;

(nie zapomnij dołączyć QuartzCore / QuartzCore.h)