iOS富文本(標籤裏顯示文字和圖片)(一)

本文首發地址 系列文章以下 iOS富文本(富文本顯示和計算高度)(二)

富文本編輯，先來一篇最簡單的。最後在來一個總結性的文章

在開始寫以前先看一下效果圖

在此效果圖中在富文本中指定的位置添加圖片，還有最後位置添加的圖片信息

因而乎 這就是富文本最最基本的功能了。

1. 先看看使用方法 方法調用以下

NSString  * Str = @"中國人民解放軍萬歲，中華人民共和國萬歲，萬歲！";
    self.attrobiuteLabel.attributedText = [self stringWithUIImage:Str];
複製代碼

2. 屬性介紹

添加屬性

- (void)addAttribute:(NSString *)name value:(id)value range:(NSRange)range;
複製代碼

建立一個富文本

NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:contentStr];
複製代碼

設置富文本中的不一樣文字的樣式

[attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)];
[attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)];
複製代碼

添加圖片到指定的位置

NSTextAttachment *attchImage = [[NSTextAttachment alloc] init];
// 表情圖片
attchImage.image = [UIImage imageNamed:@"jiedu"];
// 設置圖片大小
attchImage.bounds = CGRectMake(0, 0, 40, 15);
NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
[attriStr insertAttributedString:stringImage atIndex:2];
複製代碼

設置數字爲紅色

[attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)];
[attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)];
複製代碼

追加圖片到最後一位

NSTextAttachment *attch = [[NSTextAttachment alloc] init];
// 表情圖片
attch.image = [UIImage imageNamed:@"jiedu"];
// 設置圖片大小
attch.bounds = CGRectMake(0, 0, 40, 15);
// 建立帶有圖片的富文本
NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
[attriStr appendAttributedString:string];
複製代碼

可能以爲這樣添加屬性太慢了，怎麼辦，固然還有其餘的API了。 暴力添加的屬性 添加羣體屬性

- (void)addAttributes:(NSDictionary<NSString *, id> *)attrs range:(NSRange)range;
複製代碼

這裏面添加的是一個字典，也就是說有字體屬性對應的key用添加的。 下面來一個實例

NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:30]};
    [attriStr addAttributes:attriBute range:NSMakeRange(5, 9)];
複製代碼

//-----------------------------華麗的分割線------------------------------------- 上面說了一些經常使用的屬性，包括了添加屬性，多方法設置字體屬性等狀況

下面說說這個總體的方法以下

- (NSAttributedString *)stringWithUIImage:(NSString *) contentStr {
   // 建立一個富文本
   NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:contentStr];
   // 修改富文本中的不一樣文字的樣式
   [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5)];
   [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:20] range:NSMakeRange(0, 5)];
  
   /** 添加圖片到指定的位置 */
   NSTextAttachment *attchImage = [[NSTextAttachment alloc] init];
   // 表情圖片
   attchImage.image = [UIImage imageNamed:@"jiedu"];
   // 設置圖片大小
   attchImage.bounds = CGRectMake(0, 0, 40, 15);
   NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
   [attriStr insertAttributedString:stringImage atIndex:2];
  
   // 設置數字爲紅色
   /* [attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(5, 9)]; [attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(5, 9)]; */
   //NSDictionary * attrDict = @{ NSFontAttributeName: [UIFont fontWithName: @"Zapfino" size: 15],
                              // NSForegroundColorAttributeName: [UIColor blueColor] };
   
   //建立 NSAttributedString 並賦值
   //_label02.attributedText = [[NSAttributedString alloc] initWithString: originStr attributes: attrDict];
   NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor redColor],NSFontAttributeName:[UIFont systemFontOfSize:30]};
   [attriStr addAttributes:attriBute range:NSMakeRange(5, 9)];
   
   // 添加表情到最後一位
   NSTextAttachment *attch = [[NSTextAttachment alloc] init];
   // 表情圖片
   attch.image = [UIImage imageNamed:@"jiedu"];
   // 設置圖片大小
   attch.bounds = CGRectMake(0, 0, 40, 15);
   
   // 建立帶有圖片的富文本
   NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
   [attriStr appendAttributedString:string];
   
   return attriStr;
}
複製代碼

//-----------------------------華麗的分割線-------------------------------------

最後把屬性搞出來，給位看官可都要留着，能夠當作字典使用的！！！

最後認識一下各個屬性的意思

// NSFontAttributeName                設置字體屬性，默認值：字體：Helvetica(Neue) 字號：12
// NSForegroundColorAttributeNam      設置字體顏色，取值爲 UIColor對象，默認值爲黑色
// NSBackgroundColorAttributeName     設置字體所在區域背景顏色，取值爲 UIColor對象，默認值爲nil, 透明色
// NSLigatureAttributeName            設置連體屬性，取值爲NSNumber 對象(整數)，0 表示沒有連體字符，1 表示使用默認的連體字符
// NSKernAttributeName                設定字符間距，取值爲 NSNumber 對象（整數），正值間距加寬，負值間距變窄
// NSStrikethroughStyleAttributeName  設置刪除線，取值爲 NSNumber 對象（整數）
// NSStrikethroughColorAttributeName  設置刪除線顏色，取值爲 UIColor 對象，默認值爲黑色
// NSUnderlineStyleAttributeName      設置下劃線，取值爲 NSNumber 對象（整數），枚舉常量 NSUnderlineStyle中的值，與刪除線相似
// NSUnderlineColorAttributeName      設置下劃線顏色，取值爲 UIColor 對象，默認值爲黑色
// NSStrokeWidthAttributeName         設置筆畫寬度，取值爲 NSNumber 對象（整數），負值填充效果，正值中空效果
// NSStrokeColorAttributeName         填充部分顏色，不是字體顏色，取值爲 UIColor 對象
// NSShadowAttributeName              設置陰影屬性，取值爲 NSShadow 對象
// NSTextEffectAttributeName          設置文本特殊效果，取值爲 NSString 對象，目前只有圖版印刷效果可用：
// NSBaselineOffsetAttributeName      設置基線偏移值，取值爲 NSNumber （float）,正值上偏，負值下偏
// NSObliquenessAttributeName         設置字形傾斜度，取值爲 NSNumber （float）,正值右傾，負值左傾
// NSExpansionAttributeName           設置文本橫向拉伸屬性，取值爲 NSNumber （float）,正值橫向拉伸文本，負值橫向壓縮文本
// NSWritingDirectionAttributeName    設置文字書寫方向，從左向右書寫或者從右向左書寫
// NSVerticalGlyphFormAttributeName   設置文字排版方向，取值爲 NSNumber 對象(整數)，0 表示橫排文本，1 表示豎排文本
// NSLinkAttributeName                設置連接屬性，點擊後調用瀏覽器打開指定URL地址
// NSAttachmentAttributeName          設置文本附件,取值爲NSTextAttachment對象,經常使用於文字圖片混排
// NSParagraphStyleAttributeName      設置文本段落排版格式，取值爲 NSParagraphStyle 對象 
複製代碼

若有問題可添加個人QQ：1290925041 還可添加QQ羣:234812704（洲洲哥） 歡迎各位一塊學習，提升逼格！ 也能夠添加洲洲哥的微信公衆號 有更多幹貨在公衆號上，請關注哦，不按期推送哦