在實際專案開發過程中，我們常會遇到一段文字中既要有圖片又要有文字，例如我們經常使用的QQ、微信的聊天對話方塊中，表情和文字共存就是一種典型的圖文混排。
QQ20150827-1.png
可以直接使用Quart2D，直接在Label的draw方法中畫圖片上去，但是這種方法成本比較高，我們推薦使用text自帶的屬性來做。
要做到圖中在文字中插入表情的效果，首先我們得來了解一下一個叫富文字的東西。所謂富文字，我的理解就是一個豐富多彩的文字，多彩體現在可以在一個text中顯示出不同的文字，加入一些色彩豐富的圖片，但它能做到的還可以修改不同文字的字型加入下劃線，豐富多采。
QQ20150827-2.png
我們都知道label有text這個文字屬性，要做到富文字效果，就需要用到一個並不是所有人都知道的富文字屬性 attributedText（textView、textField中都有這個屬性）
1.修改文字的樣式
步驟如下：
- NSMutableAttributedString 建立一個富文字物件
- 呼叫富文字的物件方法 addAttribute:(NSString * )value:(id) range:(NSRange) 來修改對應range範圍中 attribute屬性的 value值
|
1 2 3 4 5 6 7 8 9 10 |
// 建立一個富文字 NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:@"哈哈哈哈哈123456789"]; // 修改富文字中的不同文字的樣式 [attri addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)]; [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)]; // 設定數字為紅色 [attri addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)]; [attri addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)]; |
在這段程式碼中，分別設定了range為（0，5）的文字，也就是哈哈哈哈哈為font20號字型大小，顏色為藍色的樣式；設定了range為（6，9）也就是123456789為font30號字型大小，顏色為紅色樣式
2.文字中新增圖片
步驟如下：
- 建立NSTextAttachment的物件，用來裝在圖片
- 將NSTextAttachment物件的image屬性設定為想要使用的圖片
- 設定NSTextAttachment物件bounds大小，也就是要顯示的圖片的大小
- 用[NSAttributedString attributedStringWithAttachment:attch]方法，將圖片新增到富文字上
12345678910111213// 新增表情NSTextAttachment *attch = [[NSTextAttachment alloc] init];// 表情圖片attch.image = [UIImage imageNamed:@"d_aini"];// 設定圖片大小attch.bounds = CGRectMake(0, 0, 32, 32);// 建立帶有圖片的富文字NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];[attri appendAttributedString:string];// 用label的attributedText屬性來使用富文字self.textLabel.attributedText = attri;
現在說的一些可能比較基礎，大家會比較沒興趣，可是基礎是練成高超技術的基石，趁著寫部落格的時候我自己也回顧一下這些基礎知識，如果需要的demo的話我再發上來。