題圖

UILabel是一種文本視圖，支持顯示一行或多行的只讀文本，算是大家的常用視圖類，不過雖然用得多，同樣的效果，用了很多不同方法，時間久了，難免有些混淆疑惑，本篇從以下幾個方面做一個歸納總結(jié)：

1. 自定義字體
2. 制作不規(guī)則的邊框
3. 顯示不同字體和顏色
4. 調(diào)整縮進與行距

如本文題圖這樣的標題，就是使用以上四步編碼出來的，下面將逐步介紹實現(xiàn)它。

1. 自定義字體

iOS9系統(tǒng)里，系統(tǒng)默認的中文字體是“蘋方”，雖然是很優(yōu)雅的中文字體，不過愛天馬行空的UI設(shè)計美眉一定不會滿足，總是愛找“最美”的字體來搭配她們的設(shè)計，iOS系統(tǒng)中往往沒有這些字體，這時候怎么辦呢？

步驟一：找到UI效果圖中的字體文件

字體文件術(shù)語稱為矢量字庫，一般是以TTF結(jié)尾的，你可以請教UI設(shè)計美眉：“請問，你這幅效果圖某某位置用的是什么字體呀？”（多好的搭訕機會），比如本文題圖中“自定義”三個字用的是“方正正纖黑”這款字體，這時有經(jīng)驗的設(shè)計美眉一定會把TTF文件傳給你，這里假設(shè)就是方正正纖黑.TTF，雙擊該文件用字體冊查看，記錄下顯示的字體名稱FZZhengHeiS-EL-GB，后面會用到。

查看字體名稱

步驟二：將TTF文件導(dǎo)入Xcode工程

拖入TTF文件

導(dǎo)入文件選項

步驟三：在plist文件中添加配置

配置plist文件

步驟四：查看系統(tǒng)加載的字體

在任意m文件，運行以下代碼：

// 獲取系統(tǒng)字體名稱：
for(NSString *fontfamilyname in [UIFont familyNames]) {
  NSLog(@"family:'%@'",fontfamilyname);
  for (NSString *fontName in [UIFont fontNamesForFamilyName:fontfamilyname]) {
    NSLog(@"\\\\tfont:'%@'",fontName);
  }
    NSLog(@"-------------");
}

// Swift 版
for fontfamilyname in UIFont.familyNames {
            print("family:" + fontfamilyname)
            
            for fontName in UIFont.fontNames(forFamilyName: fontfamilyname) {
                print("\\\\tfont:" + fontName)
            }
            print("-------------")
        }

這段代碼遍歷了當前iOS系統(tǒng)安裝的全部字體，在輸出控制臺查找（快捷鍵?F）步驟一最后查出的字體名稱FZZhengHeiS-EL-GB，復(fù)制font:后面的FZZXHJW--GB1-0，這才是最后我們要用的字體名稱。

如果這里查找不到自己導(dǎo)入的字體名稱，說明步驟二導(dǎo)入選項沒有正確勾選，刪除項目中的TTF文件，重做步驟二。

步驟五：使用導(dǎo)入的字體

UILabel *aLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, w, h)];
[self.view addSubview:aLabel];
aLabel.text = @"自定義UILabel";
aLabel.textAlignment = NSTextAlignmentCenter; // 設(shè)置文字對齊方式為居中
aLabel.textColor = [UIColor whiteColor]; // 設(shè)置文字顏色為白色
aLabel.font = [UIFont fontWithName:@"FZZXHJW--GB1-0" size:25];

這樣我們就初步使用了自定義的字體代替了系統(tǒng)默認字體。

使用自定義字體最終效果

2. 制作不規(guī)則的邊框

提起圓角矩形，很多iOS開發(fā)者腦子里立刻浮現(xiàn)的是UIView的layer屬性：

view.layer.cornerRadius = 5

但是遇到如題圖中這樣需要指定哪一個角為圓角的效果，layer并沒有對應(yīng)的屬性，這里我們就需要使用CALayer的一個子類CAShapeLayer，直接來看代碼：

    //定義路徑參數(shù)：
    CGRect rect = CGRectMake(0, 0, w, h);
    CGSize radii = CGSizeMake(20, 20); // 定義原角大小
    UIRectCorner corners = UIRectCornerTopLeft | 
                           UIRectCornerBottomRight; // 標記左上和右下為圓角
    
    //創(chuàng)建路徑，這里使用貝塞爾曲線
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    
    //創(chuàng)建CAShapeLayer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;//RGBA(169, 252, 121, 0.5).CGColor;
    shapeLayer.strokeColor = RGBA(169, 252, 121, 0.8).CGColor; // 設(shè)置線條的顏色
    shapeLayer.lineWidth = 6;
    shapeLayer.lineJoin = kCALineJoinRound;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.path = path.CGPath; // 指定前面設(shè)置好path

    // 將創(chuàng)建好的CAShapeLayer添加為UILabel的子layer
    [aLabel.layer addSublayer:shapeLayer];

自定義的邊框效果

3. 顯示不同字體和顏色

aLabel.text 是大家常用來配置實際文字的屬性，配合font屬性，我們只能設(shè)置全部文字為一個字體，如果需要為自定義和UILabel指定不同的字體，有些新手就會定義兩個Label，將這個問題轉(zhuǎn)換為兩個Label位置的拼湊，這里介紹UILabel自帶的attributedText屬性，比使用多個Label在視圖適配上有很大的優(yōu)勢。

// 創(chuàng)建NSMutableAttributedString
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString: @"自定義UILabel\\n 溪石 "];
// 設(shè)置文字顏色
[str addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(0, 3)];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:NSMakeRange(3, 8)];
// 設(shè)置陰影
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor darkGrayColor];
shadow.shadowOffset = CGSizeMake(2.0f, 2.0f);
[str addAttribute:NSShadowAttributeName value:shadow range:NSMakeRange(0, 10)];
// 設(shè)置文字顏色
[str addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(11, 4)];
// 設(shè)置背景顏色
[str addAttribute:NSBackgroundColorAttributeName value:[UIColor orangeColor] range:NSMakeRange(11, 4)];
// 指定字體，這里使用了三種字體
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"FZZXHJW--GB1-0" size:28.0] range:NSMakeRange(0, 3)];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"HelveticaNeue-Bold" size:28.0] range:NSMakeRange(3, 8)];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"PingFangSC-Light" size:20.0] range:NSMakeRange(11, 4)];
// 將配置好的NSMutableAttributedString傳給attributedText屬性
aLabel.attributedText = str;

注意，使用attributedText屬性后，原text屬性將被忽略。

分別設(shè)置字體和顏色

4. 調(diào)整縮進與行距

運行后可以看見，字體和顏色被區(qū)分開來，還加上了陰影效果，不過發(fā)現(xiàn)問題了嗎？溪石并沒有顯示出來，因為定義時@"自定義UILabel\\n 溪石 "，溪石前插入了一個換行符\\n，導(dǎo)致文本被分成了兩行，而UILabel默認只顯示一行，溪石顯示到了第二行，因此看不見！所以需要設(shè)置行數(shù)：

aLabel.numberOfLines = 0;

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.lineSpacing = 8.0;//調(diào)整行間距
paragraphStyle.alignment = NSTextAlignmentCenter;
[str addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, [str length])];

這里用lineSpacing屬性設(shè)置了行間距，另外又設(shè)置了一次對齊屬性alignment，因為設(shè)置文本格式會覆蓋UILabel的textAlignment屬性，因此需要重新設(shè)置一次。

出發(fā)吧！這里只是起點

到這里，UILabel的定制方法基本都已經(jīng)介紹到了，再來復(fù)習(xí)一下：

1. 自定義字體：介紹了如何使用系統(tǒng)之外的TTF字庫來設(shè)置Font。
2. 制作不規(guī)則的邊框：介紹了用CALayer和CAShapeLayer及貝塞爾路徑來自定義UILabel的邊框，包括形狀與顏色。
3. 顯示不同字體和顏色：用attributedText屬性代替text屬性，這樣可以對一段文字分別設(shè)定文字的樣式。
4. 調(diào)整縮進與行距：在attributedText的基礎(chǔ)上，利用NSMutableParagraphStyle設(shè)置行高等“段落屬性”。

實際上，大家是不是有點兒體會到，UILabel的定制和Word等文本編輯器中的“排版”知識是一致的，在對UI設(shè)計越來越重視的軟件開發(fā)實踐中，“富文本”排版是不可或缺的知識，剛開始開發(fā)iOS的小伙伴，可以以本文中介紹的知識為基礎(chǔ)，進一步了解各個類的屬性，做出多種多樣的文字效果！
【歡迎關(guān)注溪石，獲取更多開發(fā)技巧】