欢迎关注
最酷最in的云资讯

iOS 富文本使用

最近想实现一个功能,如图:

iOS 富文本使用每月价格

最初实现的时候想到了用两个Label,来实现,第一个显示¥4000,设置一个字体,第二个显示/月,设置另一个字体.这样就能实现这个效果了,但是最后想一想还是用富文本比较好,顺便可以学习一下.

今天我们先实现这个简单的效果.
先创建一个Label:

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

自己再创建一个私有方法,把字符串(比如:¥4000/月)传进来,进行转换,返回富文本,赋值给所需要的Label.

-(NSMutableAttributedString *)getPriceAttribute:(NSString *)string{        NSMutableAttributedString *attribut = [[NSMutableAttributedString alloc]initWithString:string];    //目的是想改变 ‘/’前面的字体的属性,所以找到目标的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;}

首先创建一个富文本NSMutableAttributedString对象,把传进来的NSString对象转化为NSMutableAttributedString对象.
然后对NSMutableAttributedString进行设置.
NSRange range = [string rangeOfString:@"/"];取到一个标志的位置:range,然后对”/”前面的文字进行设置.

然后,返回富文本,再进行赋值.

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

上面只是一个简单应用,还有很多常用到的富文本.比如,文字和图片的混排,文字点击事件.等等.

我们依次实现一些功能

在指定位置添加图片

NSMutableAttributedString * attriStr = [[NSMutableAttributedString alloc] initWithString:@"不要问我为什么编程,我喜欢手指在键盘上飞舞的感觉"];[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"];// 设置图片大小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"];// 设置图片大小attch.bounds = CGRectMake(0, -5, 20, 15);// 创建带有图片的富文本NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];[attriStr appendAttributedString:string];

设置中间位置文字为红色

[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;

效果图:

iOS 富文本使用

最后认识一下各个属性的意思:

// 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 = aligent;paragraphStyle.lineSpacing = lineSpace; // 调整行间距paragraphStyle.firstLineHeadIndent = firstLineHeadIndent;//首行缩进NSRange range = NSMakeRange(0, [string length]);[attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];

我们再来认识一下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 context:(nullable NSStringDrawingContext *)context NS_AVAILABLE(10_11, 6_0);

是苹果推荐的计算方法,显然会遇到段落格式问题,例如行间距、缩进等格式设置需求,attributes传进来的字典中,包含我们设置的字体及格式,其中NSParagraphStyleAttributeName是设置段落风格,NSFontAttributeName是设置字体。

如何把文章排版变得更好看,点击:Markdown使用指南(常用语法,干货).

作者:iOS_xuanhe
链接:https://www.swifty.cc/p/ae795de53308
来源:云微
云微著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

赞(0) 打赏
未经允许不得转载:云微资讯 » iOS 富文本使用
分享到: 更多 (0)

云微资讯 科技新媒体资讯平台

关于我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏