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時,添加一條線,根據需要控制。
  • 或者其他的一些簡單粗暴方法,高效,都可以。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容