Làm cách nào để hiển thị văn bản có viền ngoài của UILabel?

Tất cả những gì tôi muốn là một đường viền đen một pixel xung quanh văn bản UILabel màu trắng của tôi.

Tôi đã phân loại được UILabel với đoạn mã bên dưới, mà tôi đã tập hợp một cách vụng về từ một vài ví dụ trực tuyến có liên quan trực tiếp. Và nó hoạt động nhưng rất, rất chậm (ngoại trừ trên trình mô phỏng) và tôi cũng không thể làm cho nó căn giữa văn bản theo chiều dọc (vì vậy tôi tạm thời mã hóa giá trị y trên dòng cuối cùng). 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]);
}

Tôi chỉ có một cảm giác khó chịu rằng tôi đang nhìn ra một cách đơn giản hơn để làm điều này. Có lẽ bằng cách ghi đè "drawTextInRect", nhưng tôi dường như không thể làm cho drawTextInRect làm theo ý mình mặc dù nhìn chăm chú vào nó và cau mày thực sự rất khó.

Tôi đã có thể làm điều đó bằng cách ghi đè 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;

}

Một giải pháp đơn giản hơn là sử dụng Chuỗi thuộc tính như sau:

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)

Trên một, UITextFieldbạn có thể đặt defaultTextAttributesvà attributedPlaceholdercả.

Lưu ý rằng NSStrokeWidthAttributeName phải phủ định trong trường hợp này, tức là chỉ những đường viền bên trong mới hoạt động.

Sau khi đọc câu trả lời được chấp nhận và hai bản sửa chữa cho nó và câu trả lời từ Axel Guilmin, tôi quyết định biên soạn một giải pháp tổng thể bằng Swift, phù hợp với tôi:

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

Bạn có thể thêm lớp UILabel tùy chỉnh này vào nhãn hiện có trong Trình tạo giao diện và thay đổi độ dày của đường viền và màu của nó bằng cách thêm Thuộc tính thời gian chạy do người dùng xác định như sau:

Kết quả:

Có một vấn đề với việc triển khai câu trả lời. Vẽ văn bản bằng nét có độ rộng glyph của ký tự hơi khác so với vẽ văn bản không có nét, có thể tạo ra kết quả "không có căn giữa". Nó có thể được sửa bằng cách thêm một nét vô hình xung quanh văn bản điền.

Thay thế:

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

với:

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

Tôi không chắc chắn 100%, nếu đó là giao dịch thực sự, bởi vì tôi không biết liệu nó self.textColor = textColor;có tác dụng tương tự hay không [textColor setFill], nhưng nó sẽ hoạt động.

Tiết lộ: Tôi là nhà phát triển của THLabel.

Tôi đã phát hành một lớp con UILabel cách đây không lâu, lớp này cho phép phác thảo văn bản và các hiệu ứng khác. Bạn có thể tìm thấy nó ở đây: https://github.com/tobihagemann/THLabel

Thao tác này sẽ không tạo ra một đường viền, nhưng nó sẽ tạo bóng xung quanh văn bản và nếu bạn làm cho bán kính bóng đủ nhỏ, nó có thể giống như một đường viền.

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

Tôi không biết liệu nó có tương thích với các phiên bản iOS cũ hơn hay không.

Dù sao, tôi hy vọng nó sẽ giúp ...

Phiên bản Swift 4 lớp dựa trên câu trả lời của 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
    }
}

Nó có thể được triển khai hoàn toàn trong Trình tạo giao diện bằng cách đặt lớp tùy chỉnh của UILabel thành Out nétText. Sau đó, bạn sẽ có khả năng đặt chiều rộng và màu sắc của đường viền từ ngăn Thuộc tính.

Nếu bạn muốn tạo hoạt ảnh cho một thứ gì đó phức tạp, thì cách tốt nhất là lập trình để chụp ảnh màn hình của nó làm hoạt ảnh!

Để chụp ảnh màn hình một chế độ xem, bạn sẽ cần mã như sau:

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

Trong đó mainContentView là chế độ xem bạn muốn chụp ảnh màn hình. Thêm viewImage vào UIImageView và tạo hiệu ứng động cho nó.

Hy vọng rằng tăng tốc hoạt ảnh của bạn !!

N

Như MuscleRumble đã đề cập, đường viền của câu trả lời được chấp nhận hơi lệch tâm. Tôi đã có thể sửa lỗi này bằng cách đặt chiều rộng nét vẽ bằng 0 thay vì thay đổi màu thành rõ ràng.

tức là thay thế:

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

với:

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

Tôi sẽ chỉ bình luận về câu trả lời của anh ấy nhưng dường như tôi không đủ "uy tín".

nếu TẤT CẢ bạn muốn là một đường viền đen một pixel xung quanh văn bản UILabel màu trắng của tôi,

thì tôi thực sự nghĩ rằng bạn đang làm cho vấn đề khó khăn hơn nó ... Tôi không biết bạn nên sử dụng hàm 'draw direct / frameRect' nào, nhưng bạn sẽ dễ dàng tìm thấy. phương thức này chỉ thể hiện chiến lược (để lớp cha thực hiện công việc!):

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

Tôi tìm thấy một vấn đề với câu trả lời chính. Vị trí văn bản không nhất thiết phải được căn giữa một cách chính xác với vị trí pixel phụ, do đó đường viền có thể không khớp xung quanh văn bản. Tôi đã sửa nó bằng cách sử dụng mã sau, sử dụng 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];
}

Điều này giả định rằng bạn đã xác định textOutlineColorvà textOutlineWidthlà thuộc tính.

Đây là một câu trả lời khác để đặt văn bản có viền trên nhãn.

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
 }

}

đặt văn bản có dàn ý chỉ đơn giản bằng cách sử dụng phương pháp mở rộng.

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

cũng có thể phân lớp UILabel với logic sau:

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

và nếu bạn đặt văn bản trong Bảng phân cảnh thì:

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

Nếu mục tiêu của bạn là như thế này:

Đây là cách tôi đạt được điều đó: Tôi đã thêm một labellớp tùy chỉnh mới làm Chế độ xem phụ vào UILabel hiện tại của mình (lấy cảm hứng từ câu trả lời này ).

Chỉ cần sao chép và dán nó vào dự án của bạn và bạn đã sẵn sàng:

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

SỬ DỤNG:

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

nó cũng hoạt động cho a UIButtonvới tất cả các hoạt ảnh của nó:

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

Tại sao bạn không tạo UIView đường viền 1px trong Photoshop, sau đó đặt UIView với hình ảnh và đặt nó phía sau UILabel của bạn?

Mã:

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

Nó sẽ giúp bạn tiết kiệm phân lớp một đối tượng và nó khá đơn giản để thực hiện.

Chưa kể nếu bạn muốn làm hoạt hình, nó được tích hợp sẵn trong lớp UIView.

Để đặt đường viền với các cạnh tròn xung quanh Nhãn dán, tôi thực hiện như sau:

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

(đừng quên bao gồm QuartzCore / QuartzCore.h)