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

Prostszym rozwiązaniem jest użycie przypisanego ciągu w ten 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 UITextField można również ustawić defaultTextAttributes i attributedPlaceholder.

Zauważ, że NSStrokeWidthAttributeName musi być ujemne w tym przypadku, tzn. działają tylko wewnętrzne kontury.

Po przeczytaniu zaakceptowanej odpowiedzi i dwóch poprawek do niej oraz odpowiedzi od Axela Guilmina, postanowiłem skompilować ogólne rozwiązanie w języku Swift, 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 Kreatorze interfejsów i zmienić grubość obramowania i jej kolor, dodając zdefiniowane przez użytkownika atrybuty środowiska pracy w następujący sposób:

Wynik:

Jest jeden problem z implementacją odpowiedzi. Rysowanie tekstu z obrysem ma nieco inną szerokość glifu znakowego niż rysowanie tekstu bez obrysu, co może powodować "niecentrowane" wyniki. 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, bo nie wiem, czy self.textColor = textColor; ma taki sam efekt jak [textColor setFill], ale powinno zadziałać.

Disclosure: I ' m the twórca THLabel.

Opublikowałem jakiś czas temu podklasę UILabel, która umożliwia tworzenie konturów w tekście i innych efektach. Znajdziesz go tutaj: https://github.com/tobihagemann/THLabel

Nie spowoduje to utworzenia konturu per-se, ale spowoduje nałożenie cienia wokół tekstu, a jeśli promień cienia będzie wystarczająco mały, 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;

Jeśli chcesz animować coś skomplikowanego, najlepszym sposobem jest zaprogramowanie zrzutu ekranu, który zamiast tego animować!

Aby zrobić zrzut ekranu widoku, potrzebujesz kodu trochę w ten sposób:

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 interfejsu UIImageView i Animuj go.

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

N

Jak wspomniałemMuskleumble , granica zaakceptowanej odpowiedzi jest nieco poza centrum. Udało mi się to poprawić, ustawiając szerokość obrysu na zero, zamiast zmieniać kolor na Wyczyść.

Czyli zastąpienie:

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];

Jeśli wszystko, co chcesz, to jedno pikselowa czarna ramka wokół mojego białego tekstu UILabel,

Then myślę, że utrudniasz problem... Nie wiem po pamięci, której funkcji' draw rect / frameRect ' powinieneś użyć, ale łatwo będzie Ci ją znaleźć. ta metoda po prostu demonstruje strategię (pozwól superklasowi 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 nie musi być wyśrodkowana poprawnie do lokalizacji subpikseli, dzięki czemu obrys może być niedopasowany wokół tekstu. Naprawiłem go 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 to, że zdefiniowałeś textOutlineColor i {[3] } jako właściwości.

A Swift 4 class version based off the answer by 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że być zaimplementowany w całości w Konstruktorze interfejsu, ustawiając niestandardową klasę UILabel na OutlinedText. Następnie będziesz mieć możliwość ustawienia szerokości i koloru konturu w panelu Właściwości.

Dlaczego nie utworzysz w Photoshopie interfejsu użytkownika o rozmiarze 1PX, a następnie nie ustawisz interfejsu użytkownika z obrazem i nie umieścisz go za etykietą UILabel?

Kod:

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

Uratuje ci podklasowanie obiektu i jest to dość proste do zrobienia.

Nie wspominając o tym, że jeśli chcesz zrobić animację, jest ona wbudowana 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 dodać QuartzCore/QuartzCore.h)