iOS利用NSAttributedString实现图文混排效果示例

前言

NSAttributedString 可以非常方便的实现文字排版和图文混排功能,UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示。话不多说了,下面来一起看看详细的介绍吧。

效果如下:

示例代码如下:

1-初始化可变属性字符串

 NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]initWithString:textString];

2-设置全局字体属性(设置字体大小为14)

 [attributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:14] range:NSMakeRange(0, textString.length)];
 [attributedString addAttribute:NSKernAttributeName value:@1 range:NSMakeRange(0, textString.length)];

上面两句代码可以简写为一句(为属性字符串同时添加多个属性)

 [attributedString addAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:14],NSKernAttributeName: @1} range:NSMakeRange(0, textString.length)];

3-修改标题文字属性

通过字符串获取范围

 [attributedString addAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:26],NSForegroundColorAttributeName: [UIColor blueColor]} range:[textString rangeOfString:@"360云盘服务转型公告"]];

4-获取一大段文字范围并修改属性

通过前后字符串获取大段字符的范围

 // 此方法可以通过string获得范围进行修改
 NSRange startRange = [textString localizedStandardRangeOfString:@"我们即将采取以下措施:"];
 NSRange endRange = [textString localizedStandardRangeOfString:@"感谢您的一路相伴。"];
 [attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSUnionRange(startRange, endRange)];

5-为文本添加下划线

 // 设置文本下划线
 NSRange startRange1 = [textString localizedStandardRangeOfString:@"因此,"];
 NSRange endRange1 = [textString localizedStandardRangeOfString:@"之后转型企业云服务。"];
 [attributedString addAttribute:NSUnderlineStyleAttributeName value:@1 range:NSUnionRange(startRange1, endRange1)];

6-为文本内文字添加描边

 // 设置文本的描边
 [attributedString addAttribute:NSStrokeWidthAttributeName value:@2.0 range:[textString rangeOfString:@"存储传播非法文件、侵权盗版牟利、传播淫秽色情信息等违法犯罪行为"]];
 [attributedString addAttribute:NSStrokeColorAttributeName value:[UIColor brownColor] range:[textString rangeOfString:@"存储传播非法文件、侵权盗版牟利、传播淫秽色情信息等违法犯罪行为"]];
 [attributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:17] range:[textString rangeOfString:@"存储传播非法文件、侵权盗版牟利、传播淫秽色情信息等违法犯罪行为"]];

7-为文本添加图片附件

 // 插入图片附件
 NSTextAttachment *imageAtta = [[NSTextAttachment alloc] init];
 imageAtta.bounds = CGRectMake(0, 0, 375, 180);
 imageAtta.image = [UIImage imageNamed:@"360"];
 NSAttributedString *attach = [NSAttributedString attributedStringWithAttachment:imageAtta];
 [attributedString insertAttributedString:attach atIndex:0];

8-为文本设置段落属性

 // 段落样式
 NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
 // 行间距
 [style setLineSpacing:3];
 // 段落间距
 [style setParagraphSpacing:6];
 // 首行缩进
 [style setFirstLineHeadIndent:25];
 [attributedString addAttribute:NSParagraphStyleAttributeName value:style range:NSMakeRange(1, textString.length)];

9-添加网址链接

 // 网址链接
 NSRange urlRange = [textString rangeOfString:@"yunpan.360.cn"];
 [attributedString addAttribute:NSLinkAttributeName value:[NSURL URLWithString:@"http://yunpan.360.cn"] range:NSMakeRange(urlRange.location, 14)];
 [attributedString addAttribute:NSBackgroundColorAttributeName value:[UIColor greenColor] range:NSMakeRange(urlRange.location, 14)];

10-通过UITextViewDelegate代理方法,监听URL和附件的点击

 #pragma mark ----------UITextViewDelegate----------
- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange interaction:(UITextItemInteraction)interaction {
 NSLog(@"%@",URL);
 return YES;
}

- (BOOL)textView:(UITextView *)textView shouldInteractWithTextAttachment:(NSTextAttachment *)textAttachment inRange:(NSRange)characterRange interaction:(UITextItemInteraction)interaction {
 NSLog(@"%@",textAttachment.image);
 return YES;
}

补充:常用属性字符串属性

 // 字体
 NSFontAttributeName    // UIFont, default Helvetica(Neue) 12
 // 段落
 NSParagraphStyleAttributeName  // NSParagraphStyle, default defaultParagraphStyle
 // 文字颜色
 NSForegroundColorAttributeName // UIColor, default blackColor
 // 背景颜色
 NSBackgroundColorAttributeName // UIColor, default nil: no background
 // 描边颜色
 NSStrokeColorAttributeName  // UIColor, default nil: same as foreground color
 // 描边宽度
 NSStrokeWidthAttributeName  // NSNumber containing floating point value, default 0
 // 阴影
 NSShadowAttributeName    // NSShadow, default nil: no shadow
 // 附件
 NSAttachmentAttributeName   // NSTextAttachment, default nil
 // 链接URL
 NSLinkAttributeName    // NSURL (preferred) or NSString
 // 基线偏移量
 NSBaselineOffsetAttributeName  // NSNumber containing floating point value,default 0
 // 下划线
 NSUnderlineColorAttributeName  // UIColor, default nil: same as foreground color

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • IOS 图文混排(CoreText.framework)详解及实例

    IOS 图文混排(CoreText.framework)        本文主要介绍了IOS图文混排的资料,这里整理了在网上查找的内容,帮助理解,掌握这部分知识,以下就是整理的内容: 利用CORETEXT进行图文混排. 实现代码: void RunDelegateDeallocCallback( void* refCon ){ } CGFloat RunDelegateGetAscentCallback( void *refCon ){ NSString *imageName = (NSStri

  • iOS利用NSAttributedString实现图文混排效果示例

    前言 NSAttributedString 可以非常方便的实现文字排版和图文混排功能,UILabel 和 UITextView 都能添加 NSAttributedString 属性字符串,通过这一点,可以实现带有属性的文字和文字内包含图片的文本内容展示.话不多说了,下面来一起看看详细的介绍吧. 效果如下: 示例代码如下: 1-初始化可变属性字符串 NSMutableAttributedString *attributedString = [[NSMutableAttributedString a

  • Android下Button实现图文混排效果

    Button实现图文混排效果,具体内容如下 一.简介 本文介绍两种图文混排方式 1.android:drawableTop="@drawable/star"实现文字上有图片 当然有上下左右等等 2.SpannableString的ImageSpan实现图文混排 二.代码实例 效果图: 一二三四是用的第一种方式 下面的用的第二种方式 代码: fry.Activity02 package fry; import com.example.buttonDemo1.R; import andro

  • 详解Android SpannableString多行图文混排的应用实战

    TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没入门的在门缝外看两眼也都会,哈哈,开玩笑.那要是设计在开发需求中要求类似微信聊天表情一样在TextView中插入表情图片呢? 有的小伙伴就会说啦,"TextView添加图片我会啊,不就是drawableLeft,drawableRight嘛!" 嗯 ~ 也行,算是一种方法,可这有一个限制,首先,图片只能在TextView的两端,其次,两端都只能设置一张图

  • iOS利用UIBezierPath + CAAnimation实现路径动画效果

    前言 上次给大家介绍了iOS利用UIBezierPath + CAAnimation实现路径动画效果的相关内容,今天实现一个根据心跳路径实现一个路径动画,让某一视图沿着路径进行运动.. 效果图如下: 核心代码 1-首先通过 drawRect 绘制心形路径 - (void)drawRect:(CGRect)rect { // Drawing code // 初始化UIBezierPath UIBezierPath *path = [UIBezierPath bezierPath]; // 首先设置

  • Android中使用TextView实现图文混排的方法

    向TextView或EditText中添加图像比直接添加文本复杂一点点,需要用到<img>标签. <img>只有一个src属性,该属性原则上应该指向一个图像地址或可以找到某个图像资源的唯一标识.但要注意的是,系统并不会直接根据src属性所指的值自动获取和显示图像,这一切都需要我们去做.说白了,src属性指的是什么只有开发者自己知道.开发者需要告诉系统src属性到底指的是什么,然后系统才会知道怎么做. 解析src属性值需要ImageGetter对象的getDrawable方法来完成.

  • iOS利用MJRefresh实现自定义刷新动画效果

    本文主要介绍iOS 利用MJRefresh实现自定义动画的上拉刷新下拉加载效果,一般的类型(包括更新时间与loading图案)这里不做介绍. 要想实现此功能,首先得有一套load的图片数组. 接下来就是实现过程: 引入头文件: #import "MJRefresh.h" //自定义一个方法实现 - (void)prepareRefresh { NSMutableArray *headerImages = [NSMutableArray array]; for (int i = 1; i

  • Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

  • Qt数据库应用之实现数据图文混排

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 除了能够打印基本的文字信息数据到pdf和纸张,越来越多的应用需求还要求能够导出图片,并且要支持图文混排,相当于doc文档类似,当然也不会是太复杂的,类似于打印报表一样,有表格形式的文字描述,也有对应的图片插入其中,图文混排的应用场景还真不少比如医疗行业输出诊断结果往往都带了图片.于是针对这个需求特意开辟了新的类DataCreat专门生成报表的数据,将生成好的数据体直接传入给DataPrint类即可,如果有各种各样的不

  • CSS图文混排的几种方案

    百度新闻首页的方案: 复制代码 代码如下: <table> <tbody> <tr> <td class="topic-pic"><a href=""><img src=""></a></td> <td class="topic-txt">-</td> </tr> </tbody>&l

随机推荐