在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由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 图文混排的更多相关文章

  1. CoreText 图文混排

    基本原理 https://www.cnblogs.com/purple-sweet-pottoes/p/5109413.html CoreText(一):基本用法  https://blog.csdn ...

  2. CoreText实现图文混排之点击事件

    今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...

  3. Coretext实现图文混排及Gif图片播放

    CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontD ...

  4. CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...

  5. iOS 图文混排 链接 可点击

    对于这个话题 我想到 1 第一个解决方法就是使用 webView 比较经典 把所有复杂工作都交给控件本身去处理了,  但是好像好多需要自定义的地方 没法从 webView获得响应回调 :(估计也可以实 ...

  6. 图文混排--CoreText的简单运用

    常见的在一些微博微信中可以看见一段文字中有不同的字体,字体有不同的颜色,并且可能会有一些笑脸之类的表情,这些可以通过图文混排做到. 图文混排可以通过WebView和CoreText做到,其他还有别的方 ...

  7. 【iOS】使用CoreText实现图文混排

    iOS没有现成的支持图文混排的控件,而要用多个基础控件组合拼成图文混排这样复杂的排版,是件很苦逼的事情.对此的解决方案有使用CoreText进行绘制,或者使用TextKit.本文主要讲解对于CoreT ...

  8. CoreText实现图文混排之点击事件-b

    CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UIT ...

  9. CoreText 实现图文混排

    CoreText 实现图文混排 相关博文推荐 IOS CoreText.framework - 基本用法 IOS CoreText.framework - 段落样子CTParagraphStyle h ...

随机推荐

  1. iOS_词典阵列 按key分组和排序

    // // main.m // SortGroup // // Created by beyond on 14-10-26. // Copyright (c) 2014年 beyond.com All ...

  2. SQL练习之不破坏应用程序现有查询的修改模式

    当我还是一个菜鸟的时候,当然现在也是,当我的软件需求发生变化时,并且数据库设计同样要求发生变化,我通常会放弃原有的代码(或者对原有的代码进行大改),先在我知道了两个不破坏应用程序现有查询的修改模式,下 ...

  3. CentOS 6.2图形界面自定义开启终端快捷键

    菜单: System->Preferences->Keyboard Shortcuts 在Desktop分类下找到"Run a terminal" 点击Run a te ...

  4. T-SQL语句中中括号([])的用法是什么,什么时候该用

    加了[]是为了防止歧义,使计算机能识别.有些字段可能是关键字,这时候你直接用字段名就会报错,如果加了[]就可以正常执行了

  5. office2010安装出错,windows installer服务不能更新一个或多个受保护的windows文件

    转自:http://www.08lr.cn/article/1985.html office2010安装过程中出现如下图错误:windows installer 服务不能更新一个或多个受保护的wind ...

  6. Page.ClientScript.RegisterStartupScript 与 Page.ClientScript.RegisterClientScriptBlock 之间的区别

    Page.ClientScript.RegisterClientScriptBlock 在页面紧跟<form>之后,整个页面未完全加载完成. Page.ClientScript.Regis ...

  7. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  8. R与数据分析旧笔记(六)多元线性分析 下

    逐步回归 向前引入法:从一元回归开始,逐步加快变量,使指标值达到最优为止 向后剔除法:从全变量回归方程开始,逐步删去某个变量,使指标值达到最优为止 逐步筛选法:综合上述两种方法 多元线性回归的核心问题 ...

  9. iScroll 4,把禁掉的:active样式还给我~

    iScroll这个移动端的滚动神器大家都非常熟悉了,直到现在仍是实现移动端Web滚动的首选方案之一... 当我接触移动端Web时iScroll已经有两个版本了,iScroll 4和iScroll 5, ...

  10. python 推导式和迭代器、生成器

    1.常用推导式 推导式是从一个或者多个迭代器快速简洁创建数据结构的一种方法. 1.1 _ 列表推导式 最简单的形式:  [exprssion for item in iterable] 示例:  nu ...