在實際專案開發過程中,我們常會遇到一段文字中既要有圖片又要有文字,例如我們經常使用的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的話我再發上來。