¿Cómo hago para que UILabel muestre texto delineado?

Todo lo que quiero es un borde negro de un píxel alrededor de mi texto UILabel blanco.

Llegué a subclasificar UILabel con el siguiente código, que improvisé torpemente a partir de algunos ejemplos en línea relacionados tangencialmente. Y funciona, pero es muy, muy lento (excepto en el simulador) y tampoco pude conseguir que centre el texto verticalmente (así que codifiqué temporalmente el valor y en la última línea). ¡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]);
}

Solo tengo la persistente sensación de que estoy pasando por alto una forma más sencilla de hacer esto. Quizás anulando "drawTextInRect", pero parece que no puedo conseguir que drawTextInRect se doble a mi voluntad a pesar de mirarlo fijamente y fruncir el ceño muy, muy duro.

Pude hacerlo anulando 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;

}

Una solución más simple es usar una cadena de atributos como esta:

Rápido 4:

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

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

Rápido 4.2:

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

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

En a, UITextFieldtambién puede configurar el defaultTextAttributesy el attributedPlaceholder.

Tenga en cuenta que NSStrokeWidthAttributeName tiene que ser negativo en este caso, es decir, solo funcionan los contornos internos.

Después de leer la respuesta aceptada y las dos correcciones y la respuesta de Axel Guilmin, decidí compilar una solución general en Swift, que me conviene:

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)
    }
}

Puede agregar esta clase UILabel personalizada a una etiqueta existente en Interface Builder y cambiar el grosor del borde y su color agregando Atributos de tiempo de ejecución definidos por el usuario como este:

Resultado:

Hay un problema con la implementación de la respuesta. Dibujar un texto con trazo tiene un ancho de glifo de carácter ligeramente diferente al dibujo de un texto sin trazo, lo que puede producir resultados "no centrados". Se puede solucionar agregando un trazo invisible alrededor del texto de relleno.

Reemplazar:

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

con:

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

No estoy 100% seguro, si ese es el verdadero negocio, porque no sé si self.textColor = textColor;tiene el mismo efecto [textColor setFill], pero debería funcionar.

Divulgación: soy el desarrollador de THLabel.

Lancé una subclase de UILabel hace un tiempo, que permite un esquema en el texto y otros efectos. Puede encontrarlo aquí: https://github.com/tobihagemann/THLabel

Esto no creará un contorno per se, pero pondrá una sombra alrededor del texto, y si hace que el radio de la sombra sea lo suficientemente pequeño, podría parecerse a un contorno.

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

No sé si es compatible con versiones anteriores de iOS.

De todos modos, espero que ayude ...

Una versión de clase Swift 4 basada en la respuesta de 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
    }
}

Se puede implementar completamente en Interface Builder configurando la clase personalizada de UILabel en OutlinedText. A continuación, tendrá la capacidad de establecer el ancho y el color del contorno desde el panel Propiedades.

Si desea animar algo complicado, la mejor manera es tomar una captura de pantalla programáticamente y animarlo en su lugar.

Para tomar una captura de pantalla de una vista, necesitará un código como este:

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

Donde mainContentView es la vista de la que desea tomar una captura de pantalla. Agregue viewImage a un UIImageView y anímelo.

¡Espero que acelere tu animación!

norte

Como mencionó MuscleRumble , el borde de la respuesta aceptada está un poco descentrado. Pude corregir esto estableciendo el ancho del trazo en cero en lugar de cambiar el color a claro.

es decir, reemplazando:

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

con:

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

Solo habría comentado su respuesta, pero aparentemente no soy lo suficientemente "respetable".

si TODO lo que quieres es un borde negro de un píxel alrededor de mi texto UILabel blanco,

entonces creo que está haciendo el problema más difícil de lo que es ... No sé por memoria qué función 'dibujar rect / frameRect' debería usar, pero será fácil de encontrar. este método simplemente demuestra la estrategia (¡deje que la superclase haga el trabajo!):

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

Encontré un problema con la respuesta principal. La posición del texto no está necesariamente centrada correctamente en la ubicación de los subpíxeles, por lo que el contorno puede no coincidir con el texto. Lo arreglé usando el siguiente código, que usa 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];
}

Esto supone que definiste textOutlineColory textOutlineWidthcomo propiedades.

Aquí está la otra respuesta para establecer el texto delineado en la etiqueta.

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
 }

}

establecer texto delineado simplemente usando el método de extensión.

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

También es posible subclasificar UILabel con la siguiente lógica:

- (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;
}

y si establece texto en Storyboard, entonces:

- (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;
}

Si tu objetivo es algo como esto:

Así es como lo logré: agregué una nueva labelclase personalizada como una Subvista a mi UILabel actual (inspirada en esta respuesta ).

Simplemente cópielo y péguelo en su proyecto y estará listo:

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)
    }
}

USO:

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

también funciona para a UIButtoncon todas sus animaciones:

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

¿Por qué no crea una UIView de borde de 1px en Photoshop, luego establece una UIView con la imagen y la coloca detrás de su UILabel?

Código:

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

Te ahorrará subclasificar un objeto y es bastante simple de hacer.

Sin mencionar si desea hacer animación, está integrado en la clase UIView.

Para poner un borde con bordes redondeados alrededor de un UILabel, hago lo siguiente:

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

(no olvide incluir QuartzCore / QuartzCore.h)