Bagaimana cara membuat UILabel menampilkan teks yang diuraikan?

Yang saya inginkan hanyalah batas hitam satu piksel di sekitar teks UILabel putih saya.

Saya sampai pada subclassing UILabel dengan kode di bawah ini, yang dengan kikuk saya susun dari beberapa contoh online yang berhubungan secara tangensial. Dan itu berhasil tetapi sangat, sangat lambat (kecuali di simulator) dan saya juga tidak bisa membuatnya memusatkan teks secara vertikal (jadi saya melakukan hardcode nilai y pada baris terakhir untuk sementara). 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]);
}

Saya hanya memiliki perasaan yang mengganggu bahwa saya mengabaikan cara yang lebih sederhana untuk melakukan ini. Mungkin dengan menimpa "drawTextInRect", tapi sepertinya saya tidak bisa membuat drawTextInRect tunduk pada keinginan saya sama sekali meskipun menatapnya dengan saksama dan mengerutkan kening sangat keras.

Saya bisa melakukannya dengan mengganti 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;

}

Solusi yang lebih sederhana adalah dengan menggunakan Attributed String seperti ini:

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

Di a UITextFieldAnda dapat mengatur defaultTextAttributesdan attributedPlaceholderjuga.

Perhatikan bahwa dalam kasus ini NSStrokeWidthAttributeName harus negatif , yaitu hanya garis dalam yang bekerja.

Setelah membaca jawaban yang diterima dan dua koreksi dan jawaban dari Axel Guilmin, saya memutuskan untuk mengumpulkan solusi keseluruhan di Swift, yang cocok untuk saya:

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

Anda dapat menambahkan kelas UILabel kustom ini ke label yang ada di Interface Builder dan mengubah ketebalan batas dan warnanya dengan menambahkan Atribut Waktu Proses yang Ditentukan Pengguna seperti ini:

Hasil:

Ada satu masalah dengan implementasi jawabannya. Menggambar teks dengan guratan memiliki lebar mesin terbang karakter yang sedikit berbeda daripada menggambar teks tanpa guratan, yang bisa menghasilkan hasil "tidak terpusat". Itu bisa diperbaiki dengan menambahkan goresan tak terlihat di sekitar teks isian.

Menggantikan:

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

dengan:

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

Saya tidak 100% yakin, apakah itu real deal, karena saya tidak tahu apakah self.textColor = textColor;memiliki efek yang sama [textColor setFill], tetapi itu akan berhasil.

Pengungkapan: Saya pengembang THLabel.

Saya telah merilis subclass UILabel beberapa waktu lalu, yang memungkinkan garis besar dalam teks dan efek lainnya. Anda dapat menemukannya di sini: https://github.com/tobihagemann/THLabel

Ini tidak akan membuat garis luar saja, tetapi itu akan membuat bayangan di sekitar teks, dan jika Anda membuat radius bayangan cukup kecil itu bisa menyerupai garis besar.

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

Saya tidak tahu apakah itu kompatibel dengan versi iOS yang lebih lama ..

Bagaimanapun, saya harap ini membantu ...

Versi kelas Swift 4 berdasarkan jawaban oleh 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
    }
}

Ini dapat diimplementasikan sepenuhnya di Interface Builder dengan menyetel kelas khusus UILabel ke OutlinedText. Anda kemudian akan memiliki kemampuan untuk mengatur lebar garis dan warna dari panel Properties.

Jika Anda ingin menganimasikan sesuatu yang rumit, cara terbaik adalah dengan mengambil tangkapan layar secara terprogram dan menganimasikannya!

Untuk mengambil tangkapan layar tampilan, Anda memerlukan kode seperti ini:

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

Di mana mainContentView adalah tampilan yang ingin Anda ambil tangkapan layarnya. Tambahkan viewImage ke UIImageView dan animasikan itu.

Semoga mempercepat animasi Anda !!

N

Seperti yang disebutkan MuscleRumble , batas jawaban yang diterima agak jauh dari tengah. Saya bisa memperbaiki ini dengan mengatur lebar goresan ke nol alih-alih mengubah warna menjadi jelas.

yaitu mengganti:

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

dengan:

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

Saya hanya akan mengomentari jawabannya tetapi tampaknya saya tidak cukup "memiliki reputasi".

jika SEMUA yang Anda inginkan adalah batas hitam satu piksel di sekitar teks UILabel putih saya,

maka saya pikir Anda membuat masalah lebih sulit daripada itu ... Saya tidak tahu dengan memori mana fungsi 'draw rect / frameRect' yang harus Anda gunakan, tetapi akan mudah bagi Anda untuk menemukannya. metode ini hanya mendemonstrasikan strateginya (biarkan superclass yang bekerja!):

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

Saya menemukan masalah dengan jawaban utama. Posisi teks tidak selalu tepat berada di tengah ke lokasi sub-piksel, sehingga garis tepi dapat menjadi tidak cocok di sekitar teks. Saya memperbaikinya menggunakan kode berikut, yang menggunakan 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];
}

Ini mengasumsikan bahwa Anda mendefinisikan textOutlineColordan textOutlineWidthsebagai properti.

Berikut adalah jawaban lain untuk menguraikan teks yang diuraikan pada label.

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
 }

}

setel teks yang diuraikan hanya dengan menggunakan metode ekstensi.

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

juga dimungkinkan untuk membuat subclass UILabel dengan logika berikut:

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

dan jika Anda mengatur teks di Storyboard maka:

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

Jika tujuan Anda adalah seperti ini:

Berikut adalah cara saya mencapainya: Saya menambahkan kelas baru labelkhusus sebagai Subview ke UILabel saya saat ini (terinspirasi oleh jawaban ini ).

Cukup salin & tempel ke proyek Anda dan Anda siap melakukannya:

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

PEMAKAIAN:

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

itu juga berfungsi untuk a UIButtondengan semua animasinya:

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

Mengapa Anda tidak membuat UIView perbatasan 1px di Photoshop, lalu mengatur UIView dengan gambar, dan memposisikannya di belakang UILabel Anda?

Kode:

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

Ini akan menyelamatkan Anda dari subclass objek dan itu cukup mudah dilakukan.

Belum lagi jika Anda ingin membuat animasi, itu dibangun ke dalam kelas UIView.

Untuk meletakkan perbatasan dengan tepi bulat di sekitar UILabel saya melakukan hal berikut:

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

(jangan lupa untuk menyertakan QuartzCore / QuartzCore.h)