iOS富文本的使用方法示例詳解

更新時(shí)間：2017年12月13日 08:40:03 作者：iOS_xuanhe

這篇文章主要給大家介紹了關(guān)于iOS富文本的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

常常會(huì)有一段文字顯示不同的顏色和字體，或者給某幾個(gè)文字加刪除線或下劃線的需求。

使用富文本NSMuttableAttstring（帶屬性的字符串），上面的一些需求都可以很簡(jiǎn)便的實(shí)現(xiàn)。

最近想實(shí)現(xiàn)一個(gè)功能,如圖:

每月價(jià)格

最初實(shí)現(xiàn)的時(shí)候想到了用兩個(gè)Label,來(lái)實(shí)現(xiàn),第一個(gè)顯示¥4000,設(shè)置一個(gè)字體,第二個(gè)顯示/月,設(shè)置另一個(gè)字體.這樣就能實(shí)現(xiàn)這個(gè)效果了,但是最后想一想還是用富文本比較好,順便可以學(xué)習(xí)一下.

今天我們先實(shí)現(xiàn)這個(gè)簡(jiǎn)單的效果.

先創(chuàng)建一個(gè)Label:

-(UILabel *)priceLabel{
 if (_priceLabel == nil) {
 _priceLabel = [[UILabel alloc]init];
 _priceLabel.font = kFONT(13);
 _priceLabel.textColor = kColorTheme;
 _priceLabel.textAlignment = NSTextAlignmentRight;
 }
 return _priceLabel;
}

自己再創(chuàng)建一個(gè)私有方法,把字符串(比如:¥4000/月)傳進(jìn)來(lái),進(jìn)行轉(zhuǎn)換,返回富文本,賦值給所需要的Label.

-(NSMutableAttributedString *)getPriceAttribute:(NSString *)string{
 
 NSMutableAttributedString *attribut = [[NSMutableAttributedString alloc]initWithString:string];
 //目的是想改變 ‘/'前面的字體的屬性，所以找到目標(biāo)的range
 NSRange range = [string rangeOfString:@"/"];
 NSRange pointRange = NSMakeRange(0, range.location);
 NSMutableDictionary *dic = [NSMutableDictionary dictionary];
 dic[NSFontAttributeName] = [UIFont systemFontOfSize:18];
 //賦值
 [attribut addAttributes:dic range:pointRange]; 
 return attribut;
}

首先創(chuàng)建一個(gè)富文本NSMutableAttributedString對(duì)象,把傳進(jìn)來(lái)的NSString對(duì)象轉(zhuǎn)化為NSMutableAttributedString對(duì)象.
然后對(duì)NSMutableAttributedString進(jìn)行設(shè)置.

NSRange range = [string rangeOfString:@"/"];取到一個(gè)標(biāo)志的位置:range,然后對(duì)"/"前面的文字進(jìn)行設(shè)置.

然后,返回富文本,再進(jìn)行賦值.

 _priceLabel.attributedText = [self getPriceAttribute:@"¥4000/月"];

上面只是一個(gè)簡(jiǎn)單應(yīng)用,還有很多常用到的富文本.比如,文字和圖片的混排,文字點(diǎn)擊事件.等等.

我們依次實(shí)現(xiàn)一些功能

在指定位置添加圖片

NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:@"不要問(wèn)我為什么編程,我喜歡手指在鍵盤上飛舞的感覺"];
[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:@"pic3"];
// 設(shè)置圖片大小
attchImage.bounds = CGRectMake(0, -5, 20, 20);
NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
[attriStr insertAttributedString:stringImage atIndex:2];

追加圖片到最后一位

NSTextAttachment *attch = [[NSTextAttachment alloc] init];
// 表情圖片
attch.image = [UIImage imageNamed:@"pic2"];
// 設(shè)置圖片大小
attch.bounds = CGRectMake(0, -5, 20, 15);
// 創(chuàng)建帶有圖片的富文本
NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
[attriStr appendAttributedString:string];

設(shè)置中間位置文字為紅色

[attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(6, 4)];
[attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(6, 4)];

綜合寫法

NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor yellowColor],NSFontAttributeName:[UIFont systemFontOfSize:25]};
[attriStr addAttributes:attriBute range:NSMakeRange(10, 4)];
self.attrobiuteLabel.attributedText = attriStr;

效果圖:

最后認(rèn)識(shí)一下各個(gè)屬性的意思:

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

格式&排版

上面屬性的最后一個(gè)就是排版.需要去一NSMutableParagraphStyle的對(duì)象.直接上代碼:

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.alignment = aligent;
paragraphStyle.lineSpacing = lineSpace; // 調(diào)整行間距
paragraphStyle.firstLineHeadIndent = firstLineHeadIndent;//首行縮進(jìn)
NSRange range = NSMakeRange(0, [string length]);
[attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];

我們?cè)賮?lái)認(rèn)識(shí)一下NSMutableParagraphStyle的屬性:

CGFloat lineSpacing;     // 字體的行間距 
CGFloat paragraphSpacing;   // 段與段之間的間距 
NSTextAlignment alignment;   // (兩端對(duì)齊的)文本對(duì)齊方式(左,中,右,兩端對(duì)齊,自然) 
CGFloat firstLineHeadIndent;   // 首行縮進(jìn) 
CGFloat headIndent;     // 整體縮進(jìn)(首行除外) 
CGFloat tailIndent;     // 尾部縮進(jìn)
NSLineBreakMode lineBreakMode;  // 結(jié)尾部分的內(nèi)容以……方式省略
CGFloat minimumLineHeight;   // 最低行高
CGFloat maximumLineHeight;   // 最大行高 
NSWritingDirection baseWritingDirection; // 書寫方向
CGFloat lineHeightMultiple;   // 行間距多少倍
CGFloat paragraphSpacingBefore;  // 段首行空白空
float hyphenationFactor;    // 連字屬性 在iOS，唯一支持的值分別為0和1

設(shè)置了這么多的格式,進(jìn)行了各種各樣的排版那么怎么計(jì)算行高呢.

- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 6_0);

是蘋果推薦的計(jì)算方法，顯然會(huì)遇到段落格式問(wèn)題，例如行間距、縮進(jìn)等格式設(shè)置需求，attributes傳進(jìn)來(lái)的字典中，包含我們?cè)O(shè)置的字體及格式，其中NSParagraphStyleAttributeName是設(shè)置段落風(fēng)格，NSFontAttributeName是設(shè)置字體。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: