Text in UIButton unterstreichen

Kann jemand vorschlagen, wie man den Titel eines UIButton unterstreicht? Ich habe einen UIButton vom Typ Benutzerdefiniert und möchte, dass der Titel unterstrichen wird, aber der Interface Builder bietet keine Option dazu.

Wenn Sie im Interface Builder die Schriftartoption für eine Schaltfläche auswählen, können Sie die Option Keine, Einzel, Doppel, Farbe auswählen. Bei keiner dieser Optionen werden jedoch Änderungen am Titel auf der Schaltfläche vorgenommen.

Jede Hilfe geschätzt.

UIUnderlinedButton.h

@interface UIUnderlinedButton : UIButton {

}


+ (UIUnderlinedButton*) underlinedButton;
@end

UIUnderlinedButton.m

@implementation UIUnderlinedButton

+ (UIUnderlinedButton*) underlinedButton {
    UIUnderlinedButton* button = [[UIUnderlinedButton alloc] init];
    return [button autorelease];
}

- (void) drawRect:(CGRect)rect {
    CGRect textRect = self.titleLabel.frame;

    // need to put the line at top of descenders (negative value)
    CGFloat descender = self.titleLabel.font.descender;

    CGContextRef contextRef = UIGraphicsGetCurrentContext();

    // set to same colour as text
    CGContextSetStrokeColorWithColor(contextRef, self.titleLabel.textColor.CGColor);

    CGContextMoveToPoint(contextRef, textRect.origin.x, textRect.origin.y + textRect.size.height + descender);

    CGContextAddLineToPoint(contextRef, textRect.origin.x + textRect.size.width, textRect.origin.y + textRect.size.height + descender);

    CGContextClosePath(contextRef);

    CGContextDrawPath(contextRef, kCGPathStroke);
}


@end

Um den Interface Builder zum Unterstreichen zu verwenden, muss man:

• Ändern Sie es in zugeschrieben
• Markieren Sie den Text im Attributinspektor
• Klicken Sie mit der rechten Maustaste, wählen Sie Schriftart und dann Unterstreichen

Video, das jemand anderes gemacht hat https://www.youtube.com/watch?v=5-ZnV3jQd9I

Ab iOS6 ist es jetzt möglich, einen NSAttributedString zu verwenden, um das Unterstreichen (und alles andere, was Zeichenfolgen unterstützen) auf viel flexiblere Weise auszuführen:

NSMutableAttributedString *commentString = [[NSMutableAttributedString alloc] initWithString:@"The Quick Brown Fox"];

[commentString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:NSMakeRange(0, [commentString length])];

[button setAttributedTitle:commentString forState:UIControlStateNormal];

Hinweis: Dies wurde als weitere Antwort hinzugefügt - da es eine völlig andere Lösung als meine vorherige ist.

Bearbeiten: Seltsamerweise (zumindest in iOS8) müssen Sie das erste Zeichen unterstreichen, sonst funktioniert es nicht!

Um dieses Problem zu umgehen, setzen Sie das erste Zeichen mit klarer Farbe unterstrichen!

    // underline Terms and condidtions
    NSMutableAttributedString* tncString = [[NSMutableAttributedString alloc] initWithString:@"View Terms and Conditions"];

    // workaround for bug in UIButton - first char needs to be underlined for some reason!
    [tncString addAttribute:NSUnderlineStyleAttributeName
                      value:@(NSUnderlineStyleSingle)
                      range:(NSRange){0,1}];
    [tncString addAttribute:NSUnderlineColorAttributeName value:[UIColor clearColor] range:NSMakeRange(0, 1)];


    [tncString addAttribute:NSUnderlineStyleAttributeName
                      value:@(NSUnderlineStyleSingle)
                      range:(NSRange){5,[tncString length] - 5}];

    [tncBtn setAttributedTitle:tncString forState:UIControlStateNormal];

Sie können dies im Interface Builder selbst tun.

1. Wählen Sie den Attributinspektor aus
2. Ändern Sie den Titeltyp von "einfach" in "zugeordnet"

3. Stellen Sie die entsprechende Schriftgröße und Textausrichtung ein

4. Wählen Sie dann den Titeltext aus und stellen Sie die Schriftart als unterstrichen ein

Es ist sehr einfach mit zugeschriebener Zeichenfolge

Erstellt ein Wörterbuch mit festgelegten Attributen und wird auf die zugewiesene Zeichenfolge angewendet. Anschließend können Sie die zugewiesene Zeichenfolge in uibutton als attibutedtitle oder in uilabel als attributedtext festlegen.

NSDictionary *attrDict = @{NSFontAttributeName : [UIFont
 systemFontOfSize:14.0],NSForegroundColorAttributeName : [UIColor
 whiteColor]};
 NSMutableAttributedString *title =[[NSMutableAttributedString alloc] initWithString:@"mybutton" attributes: attrDict]; 
[title addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:NSMakeRange(0,[commentString length])]; [btnRegLater setAttributedTitle:title forState:UIControlStateNormal];

Hier ist meine Funktion, funktioniert in Swift 1.2.

func underlineButton(button : UIButton, text: String) {

    var titleString : NSMutableAttributedString = NSMutableAttributedString(string: text)
    titleString.addAttribute(NSUnderlineStyleAttributeName, value: NSUnderlineStyle.StyleSingle.rawValue, range: NSMakeRange(0, count(text.utf8)))
    button.setAttributedTitle(titleString, forState: .Normal)
}

UPDATE Swift 3.0 Erweiterung:

extension UIButton {
    func underlineButton(text: String) {
        let titleString = NSMutableAttributedString(string: text)
        titleString.addAttribute(NSUnderlineStyleAttributeName, value: NSUnderlineStyle.styleSingle.rawValue, range: NSMakeRange(0, text.characters.count))
        self.setAttributedTitle(titleString, for: .normal)
    }
}

Nicks Antwort ist eine großartige und schnelle Möglichkeit, dies zu tun.

Ich habe Unterstützung drawRectfür Schatten hinzugefügt .

Nicks Antwort berücksichtigt nicht, ob Ihr Schaltflächentitel einen Schatten unter dem Text hat:

Sie können die Unterstreichung jedoch wie folgt um die Höhe des Schattens nach unten verschieben:

CGFloat descender = self.titleLabel.font.descender;
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGFloat shadowHeight = self.titleLabel.shadowOffset.height;
descender += shadowHeight;

Dann bekommst du so etwas:

Für Swift 3 kann die folgende Erweiterung verwendet werden:

extension UIButton {
    func underlineButton(text: String) {
        let titleString = NSMutableAttributedString(string: text)
        titleString.addAttribute(NSUnderlineStyleAttributeName, value: NSUnderlineStyle.styleSingle.rawValue, range: NSMakeRange(0, text.characters.count))
        self.setAttributedTitle(titleString, for: .normal)
    }
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
CGRect textRect = self.titleLabel.frame;

// need to put the line at top of descenders (negative value)
CGFloat descender = self.titleLabel.font.descender;

CGContextRef contextRef = UIGraphicsGetCurrentContext();
UIColor *colr;
// set to same colour as text
if (self.isHighlighted || self.isSelected) {
    colr=self.titleLabel.highlightedTextColor;
}
else{
    colr= self.titleLabel.textColor;
}
CGContextSetStrokeColorWithColor(contextRef, colr.CGColor);

CGContextMoveToPoint(contextRef, textRect.origin.x, textRect.origin.y +        textRect.size.height + descender);

CGContextAddLineToPoint(contextRef, textRect.origin.x + textRect.size.width, textRect.origin.y + textRect.size.height + descender);

CGContextClosePath(contextRef);

CGContextDrawPath(contextRef, kCGPathStroke);
}
//Override this to change the underline color to highlighted color
-(void)setHighlighted:(BOOL)highlighted
{
[super setHighlighted:highlighted];
// [self setNeedsDisplay];
}

Bei der Erweiterung der Antwort von @Nick H247 trat ein Problem auf, bei dem zunächst die Unterstreichung nicht neu gezeichnet wurde, wenn die Größe der Schaltfläche beim Drehen geändert wurde. Dies kann gelöst werden, indem Sie Ihre Schaltfläche so einstellen, dass sie wie folgt neu gezeichnet wird:

myButton.contentMode = UIViewContentModeRedraw; 

Dies zwingt die Schaltfläche zum Neuzeichnen, wenn sich die Grenzen ändern.

Zweitens ging der ursprüngliche Code davon aus, dass Sie nur 1 Textzeile in der Schaltfläche hatten (meine Schaltfläche wird beim Drehen in 2 Zeilen umgebrochen), und die Unterstreichung wird nur in der letzten Textzeile angezeigt. Der drawRect-Code kann geändert werden, um zuerst die Anzahl der Zeilen in der Schaltfläche zu berechnen und dann jede Zeile und nicht nur die untere Zeile zu unterstreichen:

 - (void) drawRect:(CGRect)rect {
CGRect textRect = self.titleLabel.frame;

// need to put the line at top of descenders (negative value)
CGFloat descender = self.titleLabel.font.descender;

CGContextRef contextRef = UIGraphicsGetCurrentContext();

// set to same colour as text
CGContextSetStrokeColorWithColor(contextRef, self.titleLabel.textColor.CGColor);

CGSize labelSize = [self.titleLabel.text sizeWithFont:self.titleLabel.font
                            constrainedToSize:self.titleLabel.frame.size
                                lineBreakMode:UILineBreakModeWordWrap];

CGSize labelSizeNoWrap = [self.titleLabel.text sizeWithFont:self.titleLabel.font forWidth:self.titleLabel.frame.size.width lineBreakMode:UILineBreakModeMiddleTruncation ];

int numberOfLines = abs(labelSize.height/labelSizeNoWrap.height);

for(int i = 1; i<=numberOfLines;i++) {
 //        Original code
 //        CGContextMoveToPoint(contextRef, textRect.origin.x, textRect.origin.y + textRect.size.height + descender + PADDING);
 //        
 //        CGContextAddLineToPoint(contextRef, textRect.origin.x + textRect.size.width, textRect.origin.y + textRect.size.height + descender);

    CGContextMoveToPoint(contextRef, textRect.origin.x, textRect.origin.y + (labelSizeNoWrap.height*i) + descender + PADDING);

    CGContextAddLineToPoint(contextRef, textRect.origin.x + textRect.size.width, textRect.origin.y + (labelSizeNoWrap.height*i) + descender);

    CGContextClosePath(contextRef);

    CGContextDrawPath(contextRef, kCGPathStroke);

}


}

Hoffe, dieser Code hilft jemand anderem!

In kurzer Zeit

func underlineButton(button : UIButton) {

var titleString : NSMutableAttributedString = NSMutableAttributedString(string: button.titleLabel!.text!)
titleString.addAttribute(NSUnderlineStyleAttributeName, value: NSUnderlineStyle.StyleSingle.rawValue, range: NSMakeRange(0, button.titleLabel!.text!.utf16Count))
button.setAttributedTitle(titleString, forState: .Normal)}

Mit diesem Code können Sie eine Unterstreichung mit einem Abstand in der Schaltfläche hinzufügen.

• Als ich versuchte, eine Unterstreichung aus dem Interface Builder zu zeichnen. Es sieht aus wie unter Bild.

1 - Referenz zum Interface Builder

• Und nachdem ich den folgenden Code verwendet hatte, erreichte ich das gewünschte Ergebnis.

2 - unter Verwendung des beschriebenen Codes

public func setTextUnderline()
    {
        let dummyButton: UIButton = UIButton.init()
        dummyButton.setTitle(self.titleLabel?.text, for: .normal)
        dummyButton.titleLabel?.font = self.titleLabel?.font
        dummyButton.sizeToFit()

        let dummyHeight = dummyButton.frame.size.height + 3

        let bottomLine = CALayer()
        bottomLine.frame = CGRect.init(x: (self.frame.size.width - dummyButton.frame.size.width)/2, y: -(self.frame.size.height - dummyHeight), width: dummyButton.frame.size.width, height: 1.0)
        bottomLine.backgroundColor = self.titleLabel?.textColor.cgColor
        self.layer.addSublayer(bottomLine)
    }

Die Swift 5.0-Version, die ab September 2019 in Xcode 10.3 funktioniert:

extension UIButton {
  func underlineText() {
    guard let title = title(for: .normal) else { return }

    let titleString = NSMutableAttributedString(string: title)
    titleString.addAttribute(
      .underlineStyle,
      value: NSUnderlineStyle.single.rawValue,
      range: NSRange(location: 0, length: title.count)
    )
    setAttributedTitle(titleString, for: .normal)
  }
}

Um es zu verwenden, setzen Sie zuerst Ihren Schaltflächentitel mit button.setTitle("Button Title", for: .normal)und rufen Sie dann button.underlineText()auf, um diesen Titel zu unterstreichen.

Wie wird man mit dem Fall umgehen, wenn wir einen unterstrichenen Knopf gedrückt halten? In diesem Fall ändert sich die Textfarbe der Schaltfläche entsprechend der hervorgehobenen Farbe, aber die Linie bleibt in der Originalfarbe. Angenommen, wenn die Textfarbe der Schaltfläche im Normalzustand schwarz ist, hat ihre Unterstreichung auch eine schwarze Farbe. Die hervorgehobene Farbe der Schaltfläche ist weiß. Wenn Sie die Taste gedrückt halten, wird die Textfarbe der Schaltfläche von Schwarz in Weiß geändert, die Unterstreichungsfarbe bleibt jedoch schwarz.

Ich glaube, es ist ein Fehler im Schrifteditor in XCode. Wenn Sie den Interface Builder verwenden, müssen Sie den Titel von "Einfach" in "Attributiert" ändern, TextEdit öffnen, unterstrichenen Text erstellen und in das Textfeld in XCode kopieren und einfügen

Antwort von Nick H247, aber schneller Ansatz:

import UIKit

class UnderlineUIButton: UIButton {

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)

        let textRect = self.titleLabel!.frame

        var descender = self.titleLabel?.font.descender

        var contextRef: CGContextRef = UIGraphicsGetCurrentContext();

        CGContextSetStrokeColorWithColor(contextRef, self.titleLabel?.textColor.CGColor);

        CGContextMoveToPoint(contextRef, textRect.origin.x, textRect.origin.y + textRect.size.height + descender!);

        CGContextAddLineToPoint(contextRef, textRect.origin.x + textRect.size.width, textRect.origin.y + textRect.size.height + descender!);

        CGContextClosePath(contextRef);

        CGContextDrawPath(contextRef, kCGPathStroke);
    }
}

func underline(text: String, state: UIControlState = .normal, color:UIColor? = nil) {
        var titleString = NSMutableAttributedString(string: text)

        if let color = color {
            titleString = NSMutableAttributedString(string: text,
                               attributes: [NSForegroundColorAttributeName: color])
        }

        let stringRange = NSMakeRange(0, text.characters.count)
        titleString.addAttribute(NSUnderlineStyleAttributeName,
                                 value: NSUnderlineStyle.styleSingle.rawValue,
                                 range: stringRange)

        self.setAttributedTitle(titleString, for: state)
    }

Swift 3-Version für die Antwort von @ NickH247 mit benutzerdefinierter Unterstreichungsfarbe, Linienbreite und Lücke:

import Foundation

class UnderlinedButton: UIButton {

    private let underlineColor: UIColor
    private let thickness: CGFloat
    private let gap: CGFloat

    init(underlineColor: UIColor, thickness: CGFloat, gap: CGFloat, frame: CGRect? = nil) {
        self.underlineColor = underlineColor
        self.thickness = thickness
        self.gap = gap
        super.init(frame: frame ?? .zero)
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        guard let textRect = titleLabel?.frame,
            let decender = titleLabel?.font.descender,
            let context = UIGraphicsGetCurrentContext() else { return }

        context.setStrokeColor(underlineColor.cgColor)
        context.move(to: CGPoint(x: textRect.origin.x, y: textRect.origin.y + textRect.height + decender + gap))
        context.setLineWidth(thickness)
        context.addLine(to: CGPoint(x: textRect.origin.x + textRect.width, y: textRect.origin.y + textRect.height + decender + gap))
        context.closePath()
        context.drawPath(using: .stroke)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}