iOS - UIButton/UILabel 等設(shè)置標(biāo)題下劃線以及下劃線顏色

前言

在開發(fā)中,常常遇到 Label 或 button 等文字顏色、字體大小多種,或者加下劃線等,因為經(jīng)常遇到,所以就總結(jié)一下

UIButton 設(shè)置文字換行及下劃線及顏色設(shè)置

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 折行顯示設(shè)置
/*
 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:@"多屬性字符串"];

//設(shè)置下劃線...
/*
 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]}];
//此時如果設(shè)置字體顏色要這樣
[attributeString addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor]  range:NSMakeRange(0,[attributeString length])];

//設(shè)置下劃線顏色...
[attributeString addAttribute:NSUnderlineColorAttributeName value:[UIColor redColor] range:(NSRange){0,[attributeString length]}];
[button setAttributedTitle:attributeString forState:UIControlStateNormal];
  • 常用的 API
//為某一范圍內(nèi)文字設(shè)置多個屬性
- (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range;

//為某一范圍內(nèi)文字添加某個屬性
- (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range;

//為某一范圍內(nèi)文字添加多個屬性
- (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range;

//移除某范圍內(nèi)的某個屬性
- (void)removeAttribute:(NSString *)name range:(NSRange)range;

  • 常見的屬性及說明
NSFontAttributeName                 字體
NSParagraphStyleAttributeName       段落格式    
NSForegroundColorAttributeName      字體顏色
NSBackgroundColorAttributeName      背景顏色
NSStrikethroughStyleAttributeName   刪除線格式
NSUnderlineStyleAttributeName       下劃線格式
NSStrokeColorAttributeName          刪除線顏色
NSStrokeWidthAttributeName          刪除線寬度
NSShadowAttributeName               陰影

設(shè)置button的下劃線直接設(shè)置文字的屬性
NSMutableAttributedString的attributeString添加文字屬性NSUnderlineStyleAttributeName并設(shè)置下劃線樣式,
NSUnderlineStyleNone -- 無下劃線,
NSUnderlineStyleSingle -- 單行下劃線,
NSUnderlineStyleThick -- 單行加粗下劃線,
NSUnderlineStyleDouble -- 雙下劃線.
設(shè)置下劃線顏色屬性NSUnderlineColorAttributeName
最主要的是設(shè)置button的標(biāo)題為NSMutableAttributedString包含多種屬性的字符串string.

其實就是 通過 NSMutableAttributedString (多屬性字符串)修改某個范圍內(nèi)的屬性
在iOS開發(fā)中,常常會有一段文字顯示不同的顏色和字體,或者給某幾個文字加刪除線或下劃線的需求,這樣就可以實現(xiàn)了, Label 等同理。

附:Button 使用問題

按照以上的方法,Button setAttributedTitle 后的效果,是這樣的:

image.png

但是 ,UI 是這樣的:

image.png

設(shè)置 NSMutableAttributedString 的代碼:

- (NSMutableAttributedString *)attributeWithString:(NSString *)string isUnderLine:(BOOL)isUnderLine
{
    // 多屬性字符串
    NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:string];
    
    //設(shè)置下劃線...
    /*
     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]}];
 
        //此時如果設(shè)置字體顏色要這樣
        [attributeString addAttribute:NSForegroundColorAttributeName value:ThemeColor  range:NSMakeRange(0,[attributeString length])];
        //設(shè)置下劃線顏色...
        [attributeString addAttribute:NSUnderlineColorAttributeName value:ThemeColor range:(NSRange){0,[attributeString length]}];
   }else{
        //此時如果設(shè)置字體顏色要這樣
        [attributeString addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithHexString:@"#333333"]  range:NSMakeRange(0,[attributeString length])];
        //設(shè)置下劃線顏色...
        [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];
        }
    }

但是你會發(fā)現(xiàn)這里獲得 UIButton 的子視圖 UIButtonLabel 的 frame 為空:

image.png

這種方式也不可行了, 測試是因為 Button 沒有 完成布局初始化,所以UIButton 內(nèi)部的 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時,添加一條線,根據(jù)需要控制。
  • 或者其他的一些簡單粗暴方法,高效,都可以。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容