iOS - UIButton/UILabel 等设置标题下划线以

前言

在开发中，常常遇到 Label 或 button 等文字颜色、字体大小多种，或者加下划线等，因为经常遇到，所以就总结一下

UIButton 设置文字换行及下划线及颜色设置

UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(100, 50, 150, 70)];
[self.view addSubview:button];
[button setTitle:@"button" forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

//button 折行显示设置
/*
 NSLineBreakByWordWrapping = 0,         // Wrap at word boundaries, default
 NSLineBreakByCharWrapping,     // Wrap at character boundaries
 NSLineBreakByClipping,     // Simply clip 裁剪从前面到后面显示多余的直接裁剪掉

 文字过长 button宽度不够时: 省略号显示位置...
 NSLineBreakByTruncatingHead,   // Truncate at head of line: "...wxyz" 前面显示
 NSLineBreakByTruncatingTail,   // Truncate at tail of line: "abcd..." 后面显示
 NSLineBreakByTruncatingMiddle  // Truncate middle of line:  "ab...yz" 中间显示省略号
 */
button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
// you probably want to center it
button.titleLabel.textAlignment = NSTextAlignmentCenter; // if you want to
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 1.0;

// 多属性字符串
NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:@"多属性字符串"];

//设置下划线...
/*
 NSUnderlineStyleNone                                    = 0x00, 无下划线
 NSUnderlineStyleSingle                                  = 0x01, 单行下划线
 NSUnderlineStyleThick NS_ENUM_AVAILABLE(10_0, 7_0)      = 0x02, 粗的下划线
 NSUnderlineStyleDouble NS_ENUM_AVAILABLE(10_0, 7_0)     = 0x09, 双下划线
 */
[attributeString addAttribute:NSUnderlineStyleAttributeName
                  value:@(NSUnderlineStyleSingle)
                  range:(NSRange){0,[attributeString length]}];
//此时如果设置字体颜色要这样
[attributeString addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor]  range:NSMakeRange(0,[attributeString length])];

//设置下划线颜色...
[attributeString addAttribute:NSUnderlineColorAttributeName value:[UIColor redColor] range:(NSRange){0,[attributeString length]}];
[button setAttributedTitle:attributeString forState:UIControlStateNormal];

• 常用的 API

//为某一范围内文字设置多个属性
- (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range;

//为某一范围内文字添加某个属性
- (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range;

//为某一范围内文字添加多个属性
- (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range;

//移除某范围内的某个属性
- (void)removeAttribute:(NSString *)name range:(NSRange)range;

• 常见的属性及说明

NSFontAttributeName                 字体
NSParagraphStyleAttributeName       段落格式    
NSForegroundColorAttributeName      字体颜色
NSBackgroundColorAttributeName      背景颜色
NSStrikethroughStyleAttributeName   删除线格式
NSUnderlineStyleAttributeName       下划线格式
NSStrokeColorAttributeName          删除线颜色
NSStrokeWidthAttributeName          删除线宽度
NSShadowAttributeName               阴影

设置button的下划线直接设置文字的属性
NSMutableAttributedString的attributeString添加文字属性NSUnderlineStyleAttributeName并设置下划线样式,
NSUnderlineStyleNone -- 无下划线,
NSUnderlineStyleSingle -- 单行下划线,
NSUnderlineStyleThick -- 单行加粗下划线,
NSUnderlineStyleDouble -- 双下划线.
设置下划线颜色属性NSUnderlineColorAttributeName
最主要的是设置button的标题为NSMutableAttributedString包含多种属性的字符串string.

其实就是 通过 NSMutableAttributedString （多属性字符串）修改某个范围内的属性
在iOS开发中，常常会有一段文字显示不同的颜色和字体，或者给某几个文字加删除线或下划线的需求，这样就可以实现了, Label 等同理。

附：Button 使用问题

按照以上的方法，Button setAttributedTitle 后的效果，是这样的：

image.png

但是 ，UI 是这样的：

image.png

设置 NSMutableAttributedString 的代码：

- (NSMutableAttributedString *)attributeWithString:(NSString *)string isUnderLine:(BOOL)isUnderLine
{
    // 多属性字符串
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:string];
    
    //设置下划线...
    /*
     NSUnderlineStyleNone                                    = 0x00, 无下划线
     NSUnderlineStyleSingle                                  = 0x01, 单行下划线
     NSUnderlineStyleThick NS_ENUM_AVAILABLE(10_0, 7_0)      = 0x02, 粗的下划线
     NSUnderlineStyleDouble NS_ENUM_AVAILABLE(10_0, 7_0)     = 0x09, 双下划线
     */
    if (isUnderLine) {
        [attributeString addAttribute:NSUnderlineStyleAttributeName
                                value:@(NSUnderlineStyleSingle)
                                range:(NSRange){0,[attributeString length]}];
 
        //此时如果设置字体颜色要这样
        [attributeString addAttribute:NSForegroundColorAttributeName value:ThemeColor  range:NSMakeRange(0,[attributeString length])];
        //设置下划线颜色...
        [attributeString addAttribute:NSUnderlineColorAttributeName value:ThemeColor range:(NSRange){0,[attributeString length]}];
   }else{
        //此时如果设置字体颜色要这样
        [attributeString addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithHexString:@"#333333"]  range:NSMakeRange(0,[attributeString length])];
        //设置下划线颜色...
        [attributeString addAttribute:NSUnderlineColorAttributeName value:[UIColor colorWithHexString:@"#333333"] range:(NSRange){0,[attributeString length]}];
   }

    return attributeString;
}

只能换一种方式了， 在 Button 上加一条线：

    for (UIView *subView in topBtn1.subviews) {
        if ([subView isKindOfClass:[UILabel class]]) {
            UIImageView *lineImg = [[UIImageView alloc] initWithFrame:CGRectMake(subView.left, subView.bottom+5, subView.width, 2)];
            lineImg.backgroundColor = ThemeColor;
            [topBtn1 addSubview:lineImg];
        }
    }

但是你会发现这里获得 UIButton 的子视图 UIButtonLabel 的 frame 为空：

image.png

这种方式也不可行了, 测试是因为 Button 没有 完成布局初始化，所以UIButton 内部的 titleLabel / imageView 的 frame / bounds 获取不到，目测是这样。

• 如果一定要这种方式的话，可以在 viewDidAppear 方法中重新添加这根线倒也是可以的。

这时就可以获取到 frame 了
<UIButtonLabel: 0x105ed0f80; frame = (57 14.5; 73.5 21.5); text = '个人定制'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x1c009fb80>>

加一些逻辑控制即可。

• 获取 UIButtonLabel 的文字 宽度，在初始化Button时，添加一条线，根据需要控制。
• 或者其他的一些简单粗暴方法，高效，都可以。