富文本使用

有一个需求,如图:


富文本-01.png
富文本-02.png

刚开始的时候想到用三个UILabel实现,第一个显示“酒店评分”,设置一个字体,第二个显示“4.7”,设置一个字体,第三个显示“分”,设置一个字体。这样确实能实现效果,但试想一下第二种效果呢,就需要四个UILabel,然后还有适配呢。还是用富文本吧。

先实现这个简单的效果

- (UILabel *)priceLabel {
    if (_priceLabel == nil) {
        
        _priceLabel = [[UILabel alloc] init];
        _priceLabel.font = [UIFont systemFontOfSize:12];
        _priceLabel.textColor = [UIColor redColor];
        _priceLabel.textAlignment = NSTextAlignmentRight;
    }
    return _priceLabel;
}

首先创建一个富文本NSMutableAttributedString对象,把传进来的NSString对象转化为NSMutableAttributedString对象,然后对NSMutableAttributedString进行设置。

- (NSMutableAttributedString *)getPriceAttributed:(NSString *)str {
    
    NSMutableAttributedString *attribute = [[NSMutableAttributedString alloc] initWithString:str];
    NSRange range = [str rangeOfString:@"4.7"];//取到一个标志的位置range
    NSRange pointRange = NSMakeRange(range.location, range.length);//定位到需要更改的位置
    NSMutableDictionary *dic = [NSMutableDictionary dictionary];
    dic[NSFontAttributeName] = [UIFont systemFontOfSize:20];//设置字体大小
    dic[NSForegroundColorAttributeName] = RGBACOLOR(0, 110, 227, 1);//设置字体颜色
    [attribute addAttributes:dic range:pointRange];
    return attribute;
}

rangeOfString方法我的另一篇文章有介绍,这里就不详细说明了。(大神略过)OC - (NSRange)rangeOfString:(NSString *)searchString;
首先创建一个富文本NSMutableAttributedString对象,把传进来的NSString对象转化为NSMutableAttributedString对象,然后对NSMutableAttributedString进行设置。

NSRange range = [string rangeOfString:@"4.7"];

取到一个标志的位置:range,然后对"4.7"文字进行设置,当然这个取标志的位置可以自己随意取,只要能得到想要的结果,怎么设置条件都可以。
然后返回富文本,再进行赋值。

self.priceLabel.attributedText = [self getPriceAttributed:@"酒店评分4.7分"];

好了,大功告成,是不是很简单。
上面只是一个简单的例子,还有很多常用到的富文本。例如,文字和图片的混排,文字点击事件等等。

我们依次实现一些功能

在指定位置添加图片

NSMutableAttributedString *attriStr = [[NSMutableAttributedString alloc] initWithString:@"别跟老夫说什么巴萨、皇马、马竞、赫塔菲、莱万特、埃尔瓦、塞维利亚、阿拉维斯、毕尔巴鄂竞技、比利亚雷亚尔,西班牙足球老夫只看西班牙人和武磊。"];
[attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(66, 2)];
[attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:24] range:NSMakeRange(66, 2)];

添加图片到指定位置

NSTextAttachment *attchImage = [[NSTextAttachment alloc] init];
attchImage.image = [UIImage imageNamed:@"sy_rw"];// 图片
attchImage.bounds = CGRectMake(0, -5, 16, 18);// 图片大小
NSAttributedString *stringImage = [NSAttributedString attributedStringWithAttachment:attchImage];
[attriStr insertAttributedString:stringImage atIndex:66];

追加图片到最后一位

NSTextAttachment *attch = [[NSTextAttachment alloc] init];
attch.image = [UIImage imageNamed:@"sy_dz"];// 图片
attch.bounds = CGRectMake(0, -5, 12, 16);// 图片大小
NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
[attriStr appendAttributedString:string];

设置中间文字颜色,只写一种颜色示例

[attriStr addAttribute:NSForegroundColorAttributeName value:[UIColor darkGrayColor] range:NSMakeRange(7, 2)];
[attriStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:30] range:NSMakeRange(7, 2)];

综合写法

NSDictionary * attriBute = @{NSForegroundColorAttributeName:[UIColor magentaColor],NSFontAttributeName:[UIFont systemFontOfSize:20]};
[attriStr addAttributes:attriBute range:NSMakeRange(57, 2)];
self.priceLabel.attributedText = attriStr;// 设置priceLabel内容

效果图:


富文本-03.png

介绍一下上面用到的方法:

- (void)addAttribute:(NSAttributedStringKey)name value:(id)value range:(NSRange)range;// 在某段添加通过key-value的形式
- (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range;// 在某段添加通过字典的形式
- (void)removeAttribute:(NSAttributedStringKey)name range:(NSRange)range;// 删除某段

- (void)replaceCharactersInRange:(NSRange)range withAttributedString:(NSAttributedString *)attrString;// 替换某段
- (void)insertAttributedString:(NSAttributedString *)attrString atIndex:(NSUInteger)loc;// 在某段插入
- (void)appendAttributedString:(NSAttributedString *)attrString;// 添加到最后
- (void)deleteCharactersInRange:(NSRange)range;// 删除某段
- (void)setAttributedString:(NSAttributedString *)attrString;// 设置

还有一些可能会用到的属性都什么意思:

// 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 对象
格式&排版

上面属性的最后一个就是排版,需要去创建一个NSMutableParagraphStyle的对象,直接上代码:

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.alignment = NSTextAlignmentLeft;
paragraphStyle.lineSpacing = 10.0f; // 调整行间距
paragraphStyle.firstLineHeadIndent = 50.0f;//首行缩进
NSRange range = NSMakeRange(0, [attriStr length]);
[attriStr addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];

效果图:


富文本-04.png

我们再来认识一下NSMutableParagraphStyle的属性:

CGFloat lineSpacing;                 // 字体的行间距 
CGFloat paragraphSpacing;            // 段与段之间的间距  
NSTextAlignment alignment;           // (两端对齐的)文本对齐方式(左,中,右,两端对齐,自然)   
CGFloat firstLineHeadIndent;         // 首行缩进    
CGFloat headIndent;                  // 整体缩进(首行除外)    
CGFloat tailIndent;                  // 尾部缩进
NSLineBreakMode lineBreakMode;       // 结尾部分的内容以……方式省略
CGFloat minimumLineHeight;           // 最低行高
CGFloat maximumLineHeight;           // 最大行高    
NSWritingDirection baseWritingDirection; // 书写方向
CGFloat lineHeightMultiple;          // 行间距多少倍
CGFloat paragraphSpacingBefore;      // 段首行空白空
float hyphenationFactor;             // 连字属性 在iOS,唯一支持的值分别为0和1 

设置了这么多的格式,进行了各种各样的排版那么怎么计算行高呢。

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

我的更多文章:你等下课滴

您可以关注我以便随时查看我最新的文章,本篇文章是为了做笔记,顺便提供给大家共同学习进步!如果您对本篇文章有任何疑问,请留言给我,有什么错误也可以留言提醒,如果对大家有帮助我很荣幸!感谢!

你可能感兴趣的:(富文本使用)