简单的Coretext 图文混排
在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现。现在分享一种比较简单的实现方式

iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText。CoreText库中提供了很多的工具来对文本进行操作,例如CTFont、CTLine、CTFrame等。利用这些工具可以对文字字体每一行每一段落进行操作。
此例中默认图片都在右上方,且为了美观和开发简便设定所占宽度都相同。
1. 首先,需要引入CoreText库
在需要使用的类文件中添加#import <CoreText/CoreText.h>头文件。
2. 设置文本的参数
创建一个NSMutableAttributedString对象,包含所需展示的文本字符串。这样就可以对其进行设置了。通过 CTFontCreateWithName函数创建一个CTFont对象,利用NSMutableAttributedString对象的 addAttribute方法进行设置。类似的方法可以设置字间距。
对其方式与行间距的设置方式:
[cpp]
// 文本对齐方式
CTTextAlignment alignment = kCTLeftTextAlignment;
CTParagraphStyleSetting alignmentStyle;
alignmentStyle.spec = kCTParagraphStyleSpecifierAlignment;
alignmentStyle.valueSize = sizeof(alignment);
alignmentStyle.value = &alignment;
// 创建设置数组
CTParagraphStyleSetting settings[] ={alignmentStyle};
CTParagraphStyleRef style = CTParagraphStyleCreate(settings, 1);
同样使用addAttribute设置字符串对象。这样的方法还可以设置行间距,段间距等参数。
3. 计算图片所占高度。图片可以使用UIImageView 来进行显示。很容易便可获取每张图片所占总高度。
4.
由于图片宽度是固定的这样就可以计算每行文字缩短的字数。只要文本的总体高度低于图像总高度则文字长度都是缩短的。用
CTTypesetterSuggestLineBreak函数动态的计算每一行里的字数,因为每一行里面的中文字、标点符号、数字、字母都不一样所以可
以显示的字数肯定也是不同的,所以需要作这样的计算。这样循环直至文本结束,就可以知道有多少行字了。再根据字体高度和行间距得出总的文本高度,如果文本
高度大于图片总高度那么显示区域的Frame高度就是文本的高度,反之亦然。
5. 绘制文本:
设置每一行绘制文本的区间:
[cpp]
CFRange lineRange = CFRangeMake(currentIndex, lineLength);
建立文本行对象
CTLineRef line = CTTypesetterCreateLine(typeSetter, lineRange);
CGFloat x = [self textOffsetForLine:line inRect:self.bounds];
// 设置一行的位置
CGContextSetTextPosition(context, x, y);
// 绘制一行文字
CTLineDraw(line, context);
6. 其他功能:
在完成文本绘制功能后可以加入调整文字大小的功能,和图片的放大的功能。
文字大小可以通过直接设置字体大小后重新绘制文本来实现。
图片放大可以在视图上添加一个新的UIImageView 来展示放大后的图片,并且加入动画效
简单的Coretext 图文混排的更多相关文章
- CoreText 图文混排
基本原理 https://www.cnblogs.com/purple-sweet-pottoes/p/5109413.html CoreText(一):基本用法 https://blog.csdn ...
- CoreText实现图文混排之点击事件
今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...
- Coretext实现图文混排及Gif图片播放
CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念: CTFont CTFontCollection CTFontD ...
- CoreText实现图文混排之文字环绕及点击算法
系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...
- iOS 图文混排 链接 可点击
对于这个话题 我想到 1 第一个解决方法就是使用 webView 比较经典 把所有复杂工作都交给控件本身去处理了, 但是好像好多需要自定义的地方 没法从 webView获得响应回调 :(估计也可以实 ...
- 图文混排--CoreText的简单运用
常见的在一些微博微信中可以看见一段文字中有不同的字体,字体有不同的颜色,并且可能会有一些笑脸之类的表情,这些可以通过图文混排做到. 图文混排可以通过WebView和CoreText做到,其他还有别的方 ...
- 【iOS】使用CoreText实现图文混排
iOS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreT ...
- CoreText实现图文混排之点击事件-b
CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UIT ...
- CoreText 实现图文混排
CoreText 实现图文混排 相关博文推荐 IOS CoreText.framework - 基本用法 IOS CoreText.framework - 段落样子CTParagraphStyle h ...
随机推荐
- 左右 android AES 所述机器的一部分 javax.crypto.BadPaddingException: pad block corrupted
好多人 android 使用上述 AES 显现 javax.crypto.BadPaddingException: pad block corrupted 下面的代码发布没问题,比较自己.不解释! p ...
- Swift 委托/代理设计模式
Swift 中的委托/代理模式(以下简称"代理模式")与object-c的代理模式基本一致. 代理模式的基本思想就是将我(类或者结构体等)需要来完成的工作交给(委托给)另一个有我所 ...
- iOS点滴- ViewController详解
一.生命周期 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1. alloc 创建对象,分配空间 2.init (initW ...
- <原>ASP.NET 学习笔记之应养成的良好习惯
写ASP.NET时应有的良好习惯(不定时增加): 1.view的名称一定要与对应的actionMethod的名称相同:从原理上看,客户端通过url(一般形式为http://xxx/controller ...
- asp.net word内容读取到页面
1.添加Microsoft.Vbe.Interop.dll引用. 2.以下方法可以简单的读取到word文档文字内容,不包括图片.格式等. private string ReadWordFile(str ...
- COM组件简介
面向对象的思想难以适应这种分布式软件模型,于是组件化程序设计思想得到了迅速的发展. 按照组件化的程序设计的思想,复杂的应用程序被设计成一些小的,功能单一的组件模块,这些组件模块可以运行在同一台机器上, ...
- zoj3229
题目大意: 一个XX用n天要给m个女神拍写真.这n天里每个女神i分别至少要拍Gi张照片,XX在第j天会给指定Cj个女神最多拍Dj张照片,每个女神第j天拍照数在lj到hj张照片.问XX是否安排完成他的任 ...
- <正向/反向>最大匹配算法(Java)
算法描述(正向): 给定最大词长n,待分词文本str,指针f=0,词典dic文档 1 取子串sub=str(f,f+n) 2 如果(遍历dic,有匹配sub) f++; 3 否则 n--; 4 注意: ...
- pyhton
http://panda.www.net.cn/cgi-bin/check.cgi?area_domain= http://whois.chinaz.com/ beautifulsoup4 impor ...
- SQL Server Mysql primary key可更新性分析
SQL Server: 一般来说SQL Server 中表的主键是支持更新操作的.但是如果这个主键是由identity(1,1)这类的方式生成的话它是不可更新的. Mysql : Mysql 中表的主 ...