web-dev-qa-db-ja.com

UIButtonのテキストに下線を引く

誰でもUIButtonのタイトルに下線を引く方法を提案できますか？カスタムタイプのUIButtonがあり、タイトルに下線を付けたいが、Interface Builderにはそうするオプションがありません。

Interface Builderでは、ボタンの[フォントオプション]を選択すると、[なし]、[シングル]、[ダブル]、[色]を選択するオプションが提供されますが、ボタンのタイトルは変更されません。

任意の助けに感謝します。

textformattinguibutton
133
RVN

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
78
Nick H247

インターフェイスビルダーを使用して下線を引くには、次の手順を実行する必要があります。

  • 属性付きに変更します
  • 属性インスペクターでテキストをハイライトします
  • 右クリックして、「フォント」を選択してから、「下線」を選択します

Underline using IB

他の誰かが作ったビデオhttps://www.youtube.com/watch?v=5-ZnV3jQd9I

365
finneycanhelp

IOS6からNSAttributedStringを使用して、下線（およびその他の属性付き文字列がサポートするもの）をはるかに柔軟に実行できるようになりました。

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

注：これを別の回答として追加しました-以前のソリューションとはまったく異なるソリューションです。

編集：奇妙なことに（少なくともiOS8では）最初の文字に下線を引く必要があります。そうしないと機能しません！

回避策として、最初の文字に明確な色で下線を付けます！

    // 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];
127
Nick H247

インターフェイスビルダー自体で実行できます。

  1. 属性インスペクターを選択します
  2. タイトルタイプをプレーンから属性付きに変更する

enter image description here

  1. 適切なフォントサイズとテキストの配置を設定する

enter image description here

  1. 次に、タイトルテキストを選択し、下線付きのフォントを設定します

enter image description here

42
Lineesh K Mohan

属性付き文字列を使用すると非常に簡単です

属性を設定して辞書を作成し、属性付き文字列に適用します。次に、属性付き文字列をuibuttonのattibutedtitleまたはuilabelのattributedtextとして設定できます。

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

ここに私の関数があり、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拡張機能：

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)
    }
}
20
Adam Studenic

ニックの答えは、これを行うための素晴らしい、迅速な方法です。

drawRectにシャドウのサポートを追加しました。

ボタンのタイトルにテキストの下に影がある場合、ニックの答えは考慮されません。

enter image description here

ただし、次のように影の高さだけ下線を下に移動できます。

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

次に、このようなものが得られます：

enter image description here

13
annie

Swift 3の場合、次の拡張子を使用できます。

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)
    }
}
5
Durga Vundavalli
// 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];
}
4
Rohit

このコードを使用して、ボタンに間隔を空けて下線を追加できます。

  • インターフェイスビルダーから下線を引こうとしたとき。下の画像のように見えます。

1-インターフェースビルダーリファレンス

enter image description here

  • そして、以下のコードを使用した後、私は望みどおりの結果を達成しました。

2-記述されたコードを使用

enter image description here

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)
    }
3
Ayaz Rafai

@Nick H247の回答を拡大すると、最初にボタンが回転時にサイズ変更されたときに下線が再描画されないという問題が発生しました。これは、ボタンを次のように再描画するように設定することで解決できます。

myButton.contentMode = UIViewContentModeRedraw;

これにより、境界が変更されたときにボタンが強制的に再描画されます。

第二に、元のコードでは、ボタンにテキストが1行しかないことを想定しており（私のボタンは回転すると2行に折り返されます）、下線はテキストの最後の行にのみ表示されます。 drawRectコードを修正して、最初にボタンの行数を計算し、次に下のようにすべての行に下線を付けることができます。

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

}


}

このコードが他の人に役立つことを願っています！

3
AndroidNoob

スイフトで

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

ニックH247の答えですが、Swiftアプローチ：

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);
    }
}
2
el.severo

下線付きのボタンを押し続けた場合、どのようにケースを処理しますか？その場合、ボタンのtextcolorは強調表示された色に従って変化しますが、線は元の色のままです。通常の状態のボタンテキストの色が黒の場合、下線も黒になります。ボタンの強調表示された色は白です。ボタンを押し続けると、ボタンのテキストの色が黒から白に変わりますが、下線の色は黒のままです。

2
Parvez Qureshi

XCodeのフォントエディターのバグだと思います。インターフェイスビルダーを使用する場合、タイトルをプレーンから属性付きに変更する必要があります。TextEditを開き、下線付きテキストを作成し、XCodeのテキストボックスにコピーして貼り付けます

2
dangh
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)
    }
2
LuAndre

@ NickH247's のSwift 3バージョンは、カスタムの下線の色、線幅、ギャップを使用して回答します。

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")
    }
}
1
bughana