iOS开发实战：图文混排实现详解

本文还有配套的精品资源，点击获取

简介：在iOS开发中，图文混排是新闻、社交和电子书类应用的常见需求，CoreTextDemo项目通过苹果的Core Text框架展示了如何实现这一功能。Core Text提供精细的文本控制能力，支持自定义字体、颜色、段落样式，并允许插入图片，实现图文结合的复杂布局。本项目通过完整示例帮助开发者掌握图文混排的关键技术，提升界面设计能力，适用于多种iOS应用场景。

1. iOS图文混排概述

iOS图文混排是现代App开发中实现富文本展示的核心技术之一。随着用户对界面美观度和信息表达方式要求的提升，传统的纯文本展示已无法满足需求。图文混排不仅可以增强内容的表现力，还能提升用户的阅读体验。

本章将介绍图文混排的基本概念、应用场景以及其在iOS开发中的重要性。通过理解图文混排的实现原理和使用场景，开发者可以更好地掌握后续章节中关于Core Text框架的深入内容，为构建高性能、高自由度的富文本展示组件打下坚实的理论基础。

2. Core Text框架简介

Core Text 是 iOS 平台中用于处理复杂文本布局的强大底层框架，它基于 Core Foundation 构建，提供了对文本排版、字体渲染、富文本处理等核心能力的支持。相比 UIKit 中的 UILabel 或 UITextView，Core Text 提供了更高的自由度和更细粒度的控制，适用于需要高度自定义排版和绘制的场景。本章将深入介绍 Core Text 的基本组成、与 UIKit 的对比、线程安全性与性能特性，并通过一个简单的示例帮助读者快速上手 Core Text 的使用。

2.1 Core Text框架的基本组成

Core Text 框架由多个核心类组成，它们协同工作，完成从文本数据到绘制到屏幕的全过程。理解这些类的作用和协作流程，是掌握 Core Text 的关键。

2.1.1 文本处理的核心类（CTTypesetter、CTFrame、CTRun等）

Core Text 中最核心的几个类包括：

类名	功能描述
CTTypesetter	文本排版器，用于根据文本和字体信息生成排版后的文本段落（CTLine）
CTFrame	文本帧，负责将排版后的文本绘制到指定的图形上下文（CGContext）中
CTLine	表示一行文本，包含多个 CTRun
CTRun	表示一段具有相同属性的文本，是实际绘制的基本单位
CTFont	表示字体对象，用于定义文本的字体样式
NSAttributedString	富文本数据源，包含文本内容和样式属性
CTFramesetter	用于创建 CTFrame，是整个布局流程的核心类之一

这些类之间的关系可以通过如下 Mermaid 流程图进行可视化：

graph TD
    A[NSAttributedString] --> B[CTFramesetter]
    B --> C[CTFrame]
    C --> D[CTLine]
    D --> E[CTRun]
    E --> F[绘制到CGContext]

2.1.2 文本布局的基本流程

Core Text 的文本布局过程可以分为以下几个步骤：

1. 创建富文本数据源（NSAttributedString）
   使用 NSAttributedString 定义文本内容及其样式属性，如字体、颜色、段落等。

2. 生成CTFramesetter对象
   通过 CTFramesetterCreateWithAttributedString 方法将富文本数据转换为 CTFramesetter，该对象用于后续的排版和绘制。

3. 定义绘制区域（CGPath）
   创建一个 CGPathRef 表示文本绘制的区域，通常是一个矩形路径。

4. 生成CTFrame对象
   使用 CTFramesetterCreateFrame 方法根据路径和文本内容生成 CTFrame，它包含了文本在指定区域内排布的结果。

5. 绘制CTFrame内容
   调用 CTFrameDraw 方法将文本绘制到当前的 CGContext 上。

6. 释放资源
   Core Text 使用 Core Foundation 类型，需手动释放内存，避免内存泄漏。

以下是一个完整的代码示例：

- (void)drawTextInContext:(CGContextRef)context {
    // 1. 创建富文本数据源
    NSString *text = @"Hello, Core Text!";
    NSDictionary *attributes = @{
        (id)kCTFontAttributeName: CTFontCreateWithName(CFSTR("Helvetica"), 24.0, NULL),
        (id)kCTForegroundColorAttributeName: (__bridge id)([UIColor blackColor].CGColor)
    };
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:text attributes:attributes];

    // 2. 创建CTFramesetter
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)attributedString);

    // 3. 创建绘制路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(20, 20, 300, 200));

    // 4. 创建CTFrame
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, [attributedString length]), path, NULL);

    // 5. 绘制文本
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CTFrameDraw(frame, context);

    // 6. 释放资源
    CFRelease(frame);
    CFRelease(path);
    CFRelease(framesetter);
}

代码逻辑分析与参数说明：

• 第1步：创建富文本数据源
  使用 NSAttributedString 设置字体为 Helvetica，字号 24，颜色为黑色。 kCTFontAttributeName 和 kCTForegroundColorAttributeName 是 Core Text 中定义的常量，用于设置字体和前景色。

• 第2步：创建 CTFramesetter
  CTFramesetterCreateWithAttributedString 接收一个 CFAttributedStringRef 类型的富文本对象，返回一个 CTFramesetter 对象，用于后续的排版操作。

• 第3步：创建绘制路径
  使用 CGPathCreateMutable() 创建一个可变路径对象，并通过 CGPathAddRect 添加一个矩形路径，表示文本绘制的区域。

• 第4步：创建 CTFrame
  CTFramesetterCreateFrame 会根据路径和文本内容生成一个 CTFrame 对象，其中 CFRangeMake(0, [attributedString length]) 表示从第一个字符开始绘制整个字符串。

• 第5步：绘制文本
  在调用 CTFrameDraw 前，需设置上下文的坐标系转换。iOS 的 UIKit 坐标系原点在左上角，而 Core Text 默认使用左下角，因此需要通过 CGContextTranslateCTM 和 CGContextScaleCTM 进行翻转。

• 第6步：释放资源
  Core Text 使用的是 Core Foundation 类型，必须手动调用 CFRelease 来释放内存，否则会造成内存泄漏。

2.2 Core Text与UIKit的对比

UIKit 提供了 UILabel 和 UITextView 等控件用于文本展示，但在某些高级场景下，它们的功能显得有限。Core Text 提供了更灵活的文本处理能力，尤其适合需要高度定制的图文混排、复杂排版等场景。

2.2.1 UILabel与UITextView的局限性

功能点	UILabel	UITextView	Core Text
富文本支持	✅	✅	✅
自定义排版	❌	❌	✅
图文混排	❌	❌	✅
线程安全性	❌	❌	✅
性能优化能力	❌	❌	✅

UIKit 中的 UILabel 和 UITextView 虽然支持富文本，但其排版方式固定，无法实现复杂的图文混排或自定义行高、字间距等效果。此外，它们都是基于主线程操作的，无法在后台线程进行文本布局计算，这在处理大量文本时容易造成界面卡顿。

2.2.2 Core Text在复杂排版中的优势

Core Text 的优势主要体现在以下几个方面：

• 支持任意路径的文本排版 ：可以将文本绘制到圆形、曲线等任意形状的路径中。
• 精细控制每个字符的位置和样式 ：每个 CTRun 可以拥有不同的字体、颜色、大小等属性。
• 支持异步排版和绘制 ：可以在后台线程进行文本布局计算，避免阻塞主线程。
• 低层控制能力 ：开发者可以完全控制文本的绘制过程，适用于实现自定义的富文本编辑器、电子书阅读器等。

以下是一个使用 Core Text 实现图文混排的简化逻辑代码片段：

// 创建图片占位符
CTRunDelegateCallbacks callbacks;
callbacks.version = kCTRunDelegateVersion1;
callbacks.dealloc = NULL;
callbacks.getAscent = ^(void *ref, CFIndex glyphIndex, const void *context) {
    return 50.0; // 图片高度
};
callbacks.getDescent = ^(void *ref, CFIndex glyphIndex, const void *context) {
    return 0.0;
};
callbacks.getWidth = ^(void *ref, CFIndex glyphIndex, const void *context) {
    return 50.0; // 图片宽度
};

CTRunDelegateRef runDelegate = CTRunDelegateCreate(&callbacks, NULL);

// 创建富文本属性
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
attributes[(id)kCTRunDelegateAttributeName] = (__bridge id)runDelegate;

代码逻辑分析：

• CTRunDelegateCallbacks 用于定义图片占位符的大小和位置，允许 Core Text 在绘制时预留出图片的位置。
• getAscent 、 getDescent 和 getWidth 分别定义了该“字符”的高度和宽度，Core Text 会根据这些值在文本流中为图片预留空间。
• CTRunDelegateCreate 创建一个委托对象，将其附加到 NSAttributedString 的属性中，即可实现图文混排。

2.3 Core Text的线程安全性与性能特性

2.3.1 多线程处理文本的优势

Core Text 的大多数类（如 CTFramesetter、CTFrame、CTLine、CTRun）都是线程安全的，这意味着可以在后台线程中进行文本的排版计算，而不会阻塞主线程。这对于处理大量文本或复杂排版非常有用。

例如，可以将排版操作放在 GCD 的后台队列中执行：

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    // 在后台线程中创建 CTFramesetter 和 CTFrame
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)attributedString);
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, [attributedString length]), path, NULL);
    dispatch_async(dispatch_get_main_queue(), ^{
        // 回到主线程绘制
        CTFrameDraw(frame, context);
        CFRelease(frame);
        CFRelease(framesetter);
    });
});

优势总结：

• 避免主线程卡顿，提升 UI 流畅度
• 支持异步预加载和缓存，适用于滚动视图或分页阅读场景

2.3.2 Core Text的内存管理机制

Core Text 使用 Core Foundation 的内存管理机制，所有对象都需手动释放。例如：

CFRelease(framesetter);
CFRelease(frame);
CFRelease(path);
CFRelease(runDelegate);

使用 CFRetain 和 CFRelease 控制对象生命周期，避免内存泄漏。推荐使用 __bridge_retained 和 __bridge_transfer 在 Objective-C 和 Core Foundation 之间进行安全转换。

2.4 开发环境搭建与基本示例演示

2.4.1 Xcode中Core Text的引入与配置

在 Xcode 中使用 Core Text 框架非常简单，只需在项目中引入 CoreText.framework 即可。

操作步骤：

1. 打开 Xcode 项目，选择项目文件 -> TARGETS -> Build Phases
2. 展开 “Link Binary With Libraries” 面板
3. 点击 “+” 号，搜索并添加 CoreText.framework
4. 在需要使用 Core Text 的文件中导入头文件：
   objective-c #import <CoreText/CoreText.h>

2.4.2 简单文本绘制示例代码解析

我们可以通过自定义 UIView 的 drawRect: 方法来演示 Core Text 的基本使用：

@implementation CoreTextView

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    NSString *text = @"Core Text 示例文本";
    NSDictionary *attributes = @{
        (id)kCTFontAttributeName: CTFontCreateWithName(CFSTR("PingFang SC"), 20.0, NULL),
        (id)kCTForegroundColorAttributeName: (__bridge id)([UIColor blueColor].CGColor)
    };
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:text attributes:attributes];
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)attributedString);
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, CGRectMake(20, 20, CGRectGetWidth(self.bounds) - 40, 100));
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, [attributedString length]), path, NULL);
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CTFrameDraw(frame, context);
    CFRelease(frame);
    CFRelease(path);
    CFRelease(framesetter);
}

@end

代码说明：

• drawRect: 方法中获取当前的 CGContext，用于绘制文本。
• 使用 CTFontCreateWithName 设置中文字体，避免默认字体不支持中文。
• 设置文本颜色为蓝色，增强视觉效果。
• 创建绘制区域为视图宽度减去边距的矩形。
• 使用坐标系转换确保文本正确显示。
• 最后释放所有 Core Foundation 对象。

本章详细介绍了 Core Text 框架的基本组成、与 UIKit 的对比、线程安全与性能特性，并通过示例代码演示了如何在 iOS 中使用 Core Text 实现基本文本绘制。下一章将深入讲解 CTFramesetter 的创建流程与富文本属性设置，进一步掌握 Core Text 的高级用法。

3. CTFramesetter 创建与富文本属性设置

在 iOS 的 Core Text 框架中， CTFramesetter 是用于生成文本帧（CTFrame）的核心类。它负责将富文本内容按照指定的路径进行排版，并为后续的绘制提供支持。本章将深入讲解 CTFramesetter 的创建流程，以及如何通过 NSAttributedString 设置丰富的文本样式属性，包括字体、颜色和段落格式等。

3.1 CTFramesetter 的创建与使用流程

CTFramesetter 的创建是 Core Text 绘制流程中的关键一步。它接收一个富文本数据源（NSAttributedString），并基于指定的绘制路径（通常是一个矩形路径）来生成文本帧（CTFrame），从而实现文本的排版与绘制。

3.1.1 创建 NSAttributedString 数据源

在 Core Text 中，所有的文本内容都必须封装在 NSAttributedString 对象中。通过该对象可以为不同的字符设置不同的样式属性，例如字体、颜色、段落样式等。

// 创建富文本字符串
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"欢迎使用 Core Text 进行图文混排！"];

// 设置字体属性
[attributedString addAttribute:NSFontAttributeName
                         value:[UIFont systemFontOfSize:18.0 weight:UIFontWeightSemibold]
                         range:NSMakeRange(0, 6)];

// 设置颜色属性
[attributedString addAttribute:NSForegroundColorAttributeName
                         value:[UIColor redColor]
                         range:NSMakeRange(6, 4)];

// 设置段落样式
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.alignment = NSTextAlignmentCenter;
[attributedString addAttribute:NSParagraphStyleAttributeName
                         value:paragraphStyle
                         range:NSMakeRange(0, [attributedString length])];

代码逻辑分析：

• 第1行：初始化一个可变的富文本字符串。
• 第4-6行：为前6个字符（“欢迎使用”）添加字体属性，设置为系统字体18号加粗。
• 第9-11行：为中间4个字符（“Core”）设置红色前景色。
• 第14-17行：设置整个文本段落居中对齐。

这种富文本结构是后续创建 CTFramesetter 的基础。

3.1.2 生成 CTFramesetter 对象

一旦有了富文本数据源，就可以使用 CTFramesetterCreateWithAttributedString 方法来创建 CTFramesetter 对象。

CFAttributedStringRef attrStringRef = (__bridge CFAttributedStringRef)attributedString;
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString(attrStringRef);

参数说明：

• attrStringRef ：将 NSAttributedString 转换为 Core Foundation 类型 CFAttributedStringRef ，因为 Core Text 是基于 Core Foundation 构建的。
• framesetter ：返回的 CTFramesetterRef 是后续生成文本帧的核心对象。

3.1.3 布局文本帧并绘制到上下文

创建完 CTFramesetter 后，下一步是根据指定的绘制路径生成 CTFrame ，然后将其绘制到上下文中。

// 创建绘制路径（矩形路径）
CGPathRef path = CGPathCreateWithRect(CGRectMake(20, 20, 300, 200), NULL);

// 生成文本帧
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);

// 获取当前图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();

// 翻转坐标系，Core Text 默认原点在左下角
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

// 绘制文本帧
CTFrameDraw(frame, context);

// 内存释放
CFRelease(frame);
CFRelease(path);
CFRelease(framesetter);

代码逻辑说明：

• 第3行：创建一个矩形路径，表示文本的绘制区域。
• 第6行：调用 CTFramesetterCreateFrame 创建文本帧，其中 CFRangeMake(0, 0) 表示从头开始生成整个文本的帧。
• 第11-13行：调整图形上下文的坐标系以适应 iOS 的绘制习惯（UIKit 坐标系原点在左上角）。
• 第16行：调用 CTFrameDraw 将文本帧绘制到当前上下文中。
• 第19-21行：释放 Core Foundation 类型对象，避免内存泄漏。

3.2 富文本属性的设置

Core Text 依赖 NSAttributedString 来实现富文本的样式控制。本节将详细讲解字体、颜色和段落样式的设置方法。

3.2.1 字体属性（字体类型、字号、字重）

字体属性是控制文本外观的最基本属性。在 NSAttributedString 中，通过 NSFontAttributeName 来设置字体样式。

[attributedString addAttribute:NSFontAttributeName
                         value:[UIFont fontWithName:@"PingFangSC-Regular" size:16.0]
                         range:NSMakeRange(0, 5)];

属性名	说明
NSFontAttributeName	设置字体类型、字号和字重

3.2.2 颜色属性（前景色、背景色）

颜色属性用于控制文本的前景色和背景色，分别通过 NSForegroundColorAttributeName 和 NSBackgroundColorAttributeName 设置。

[attributedString addAttribute:NSForegroundColorAttributeName
                         value:[UIColor blueColor]
                         range:NSMakeRange(0, 5)];

[attributedString addAttribute:NSBackgroundColorAttributeName
                         value:[UIColor yellowColor]
                         range:NSMakeRange(5, 5)];

属性说明：

• NSForegroundColorAttributeName ：设置文字颜色。
• NSBackgroundColorAttributeName ：设置文字背景颜色。

3.2.3 段落样式（对齐方式、行间距、段间距）

段落样式通过 NSParagraphStyleAttributeName 设置，可以控制文本的对齐方式、行间距、段间距等。

NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
paragraphStyle.alignment = NSTextAlignmentJustified;
paragraphStyle.lineSpacing = 8.0;
paragraphStyle.paragraphSpacing = 12.0;

[attributedString addAttribute:NSParagraphStyleAttributeName
                         value:paragraphStyle
                         range:NSMakeRange(0, [attributedString length])];

段落样式参数说明：

属性	描述
alignment	对齐方式（左、右、居中、两端对齐）
lineSpacing	行间距（单位：pt）
paragraphSpacing	段间距（单位：pt）

3.3 富文本样式的自定义与扩展

除了系统提供的标准富文本属性外，还可以通过扩展 NSAttributedString 实现自定义样式，如高亮、下划线、点击事件等。

3.3.1 使用 NSAttributedString 的扩展属性

Core Text 支持自定义属性，开发者可以定义自己的属性名和值，用于控制文本的绘制行为。

NSString *customAttributeName = @"CustomHighlight";
[attributedString addAttribute:customAttributeName
                         value:@YES
                         range:NSMakeRange(10, 5)];

在绘制时可以通过解析该属性来实现自定义效果，例如绘制背景高亮矩形。

3.3.2 自定义文本高亮与下划线效果

Core Text 并不直接支持下划线或高亮绘制，但可以通过 CTRunDelegate 或者在绘制过程中手动绘制图形实现。

实现高亮效果的流程图（mermaid）：

graph TD
    A[开始绘制文本帧] --> B{检测到自定义属性}
    B -->|是| C[获取绘制位置]
    C --> D[绘制背景高亮矩形]
    D --> E[绘制原始文本]
    B -->|否| E
    E --> F[继续绘制下一段]

示例：手动绘制高亮背景

- (void)drawHighlightForRun:(CTRunRef)run inContext:(CGContextRef)context {
    CFIndex runLength = CTRunGetLength(run);
    for (CFIndex i = 0; i < runLength; i++) {
        NSRange range = NSMakeRange(i, 1);
        id value = CTRunGetAttributes(run);
        if ([(__bridge NSDictionary *)value objectForKey:@"CustomHighlight"]) {
            CGPoint position = CTRunGetTypographicBounds(run, CFRangeMake(i, 1), NULL, NULL, NULL);
            CGSize size = CGSizeMake(10, 16); // 假设字符大小
            CGRect highlightRect = CGRectMake(position.x, position.y - 8, size.width, size.height);
            CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
            CGContextFillRect(context, highlightRect);
        }
    }
}

代码说明：

• 遍历每个字符，检查是否设置了 CustomHighlight 自定义属性。
• 如果设置，获取该字符的绘制位置，并绘制一个黄色背景矩形。
• 这种方式可以灵活实现文本高亮、下划线、图标插入等效果。

本章详细讲解了 CTFramesetter 的创建流程、富文本属性的设置方式，以及如何通过扩展 NSAttributedString 实现自定义样式。这些内容构成了 Core Text 图文混排功能的基础，下一章将深入探讨图片嵌入与图文布局的实现原理。

4. 图片嵌入与图文布局计算

在现代iOS应用中，图文混排已经成为了展示内容的重要形式。无论是新闻App中的图文详情页，还是社交App的评论展示，都离不开对图片嵌入与布局的精确控制。Core Text框架提供了强大的图文混排能力，其中 CTRunDelegate 机制是实现图文混排的核心手段。本章将深入讲解图片嵌入的基本原理、图文混排的布局计算方式、渲染流程控制，以及多图混排与复杂布局的实现技巧。

4.1 图片嵌入的基本原理

在Core Text中，文本与图片的混合排版是通过 CTRunDelegate 来实现的。 CTRunDelegate 允许我们在文本流中插入一个“占位符”，并由我们自定义该占位符的绘制行为，从而实现图片的嵌入。

4.1.1 CTRunDelegate的作用与实现机制

CTRunDelegate 是一个回调机制，当Core Text在绘制文本时遇到特定的占位符字符（如空格或特殊字符），它会调用我们提供的回调函数来获取该“run”的绘制信息，例如宽度、高度以及绘制回调。

实现步骤如下：

1. 定义一个占位符字符 ：通常使用一个不可见字符（如 0x0001 ）作为图片的占位符。
2. 创建NSAttributedString时插入占位符属性 ：使用 CTRunDelegateCreate 创建委托对象，并将其附加到属性字符串中。
3. 在绘制回调中绘制图片 ：Core Text在绘制该run时会调用我们指定的绘制函数，我们在该函数中完成图片的绘制。

CTRunDelegateCallbacks callbacks;
callbacks.version = kCTRunDelegateVersion_0;
callbacks.dealloc = NULL;
callbacks.getDescent = ^CGFloat(void *ref) {
    return 0; // 下降值
};
callbacks.getAscent = ^CGFloat(void *ref) {
    return 20; // 上升值
};
callbacks.getWidth = ^CGFloat(void *ref) {
    return 20; // 宽度
};

CTRunDelegateRef delegate = CTRunDelegateCreate(&callbacks, (__bridge void *)(image));
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] init];
[attributedString appendAttributedString:[[NSAttributedString alloc] initWithString:@"图文混排示例"]];
[attributedString appendAttributedString:[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%c", 0x0001] attributes:@{ (NSString *)kCTRunDelegateAttributeName : (__bridge id)delegate }]];
CFRelease(delegate);

逻辑分析：

• callbacks 结构体定义了三个回调函数，分别用于获取该run的高度、下降值和宽度。
• 使用 0x0001 作为占位符字符，插入到 NSAttributedString 中，并绑定 CTRunDelegate 。
• Core Text在绘制时会调用 draw 函数，我们可以在其中绘制图片。

4.1.2 图片占位符的绘制方式

在 CTRunDelegate 的绘制回调中，我们可以使用 CGContextDrawImage 方法将图片绘制到指定位置。此时需要注意的是，绘制上下文的坐标系与UIKit默认的坐标系是相反的，因此需要进行坐标变换。

void drawImageCallback(void *target, CGContextRef context, const CGRect *rect) {
    UIImage *image = (__bridge UIImage *)target;
    CGContextSaveGState(context);
    CGContextTranslateCTM(context, 0, CGRectGetHeight(*rect));
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextDrawImage(context, CGRectMake(0, 0, 20, 20), image.CGImage);
    CGContextRestoreGState(context);
}

参数说明：

• target ：传递给 CTRunDelegateCreate 的上下文参数，通常是我们要绘制的图片对象。
• context ：当前绘制的图形上下文。
• rect ：该run在文本流中的绘制区域。

逻辑分析：

• CGContextTranslateCTM 和 CGContextScaleCTM 用于将Core Graphics的上下文坐标系转换为UIKit风格（即原点在左上角）。
• CGContextDrawImage 将图片绘制到指定矩形区域中。

4.2 图文混排的布局计算

在图文混排中，图片与文本之间的对齐方式、尺寸适配策略直接影响最终的展示效果。Core Text虽然提供了图文混排的能力，但具体的布局计算仍需开发者自行处理。

4.2.1 文本与图片的垂直对齐方式

常见的图文对齐方式包括：顶部对齐、居中对齐、底部对齐等。Core Text默认是基线对齐，但可以通过修改 CTRunDelegate 的ascent和descent来实现不同的对齐方式。

示例：实现图片与文本的垂直居中对齐

CGFloat ascent = 20.0;
CGFloat descent = 5.0;

callbacks.getAscent = ^CGFloat(void *ref) {
    return ascent;
};
callbacks.getDescent = ^CGFloat(void *ref) {
    return descent;
};
callbacks.getWidth = ^CGFloat(void *ref) {
    return 20.0;
};

参数说明：

• ascent ：表示从基线到顶部的距离。
• descent ：表示从基线到底部的距离。
• 通过调整这两个值，可以控制图片的垂直位置。

4.2.2 图片尺寸与文本流的适配策略

在实际开发中，图片的大小可能会与当前字体大小不一致，如何让图片与文本自然融合是一个关键问题。

常见策略：

适配策略	说明
固定高度	图片高度固定，根据字体大小自动调整上下间距
等比缩放	按照字体大小比例缩放图片
宽度适配	图片宽度自适应，高度保持比例

示例：根据字体大小动态设置图片大小

CGFloat fontSize = 16.0;
CGFloat imageWidth = fontSize;
CGFloat imageHeight = fontSize * 1.2;

callbacks.getAscent = ^CGFloat(void *ref) {
    return imageHeight;
};
callbacks.getDescent = ^CGFloat(void *ref) {
    return 0;
};
callbacks.getWidth = ^CGFloat(void *ref) {
    return imageWidth;
};

逻辑分析：

• 设置图片的宽度为当前字体大小，高度为字体大小的1.2倍。
• 这样可以让图片与文字在视觉上保持协调。

4.3 图文混排的渲染流程

在Core Text中，图文混排的渲染流程主要包括文本布局计算、绘制上下文准备、文本与图片的绘制等步骤。

4.3.1 绘制文本与图片的顺序控制

Core Text在绘制文本时会按照字符串的顺序依次绘制每个 CTRun ，因此我们可以在字符串中插入多个占位符来嵌入多张图片。

示例：插入多张图片并控制绘制顺序

NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] init];
[attributedString appendString:[[NSAttributedString alloc] initWithString:@"这是第一张图片："]];
[attributedString appendString:[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%c", 0x0001] attributes:@{ (NSString *)kCTRunDelegateAttributeName : (__bridge id)delegate1 }]];
[attributedString appendString:[[NSAttributedString alloc] initWithString:@"，这是第二张图片："]];
[attributedString appendString:[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%c", 0x0001] attributes:@{ (NSString *)kCTRunDelegateAttributeName : (__bridge id)delegate2 }]];

逻辑分析：

• 在字符串中插入两个占位符字符，并分别绑定不同的 CTRunDelegate 对象。
• Core Text会按照字符串顺序依次绘制每个run，包括图片。

4.3.2 CTFrameDraw方法的应用与优化

Core Text提供了 CTFrameDraw 方法用于将整个文本帧绘制到上下文中。在绘制过程中，可以对绘制性能进行优化。

示例：使用CTFrameDraw绘制文本帧

CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)attributedString);
CGPathRef path = CGPathCreateWithRect(CGRectMake(0, 0, 300, 400), NULL);
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, NULL);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CTFrameDraw(frame, context);

CFRelease(frame);
CFRelease(path);
CFRelease(framesetter);

逻辑分析：

• CTFramesetterCreateWithAttributedString 创建帧布局器。
• CGPathCreateWithRect 创建绘制路径。
• CTFramesetterCreateFrame 生成文本帧。
• CTFrameDraw 将文本帧绘制到上下文中。
• 使用 CGContextTranslateCTM 和 CGContextScaleCTM 进行坐标系转换。

4.4 多图混排与复杂布局的实现技巧

在实际应用中，往往需要嵌入多张图片，并实现自动换行、图文环绕等复杂布局效果。

4.4.1 多张图片的自动换行与间距控制

当多张图片连续排列时，可能会导致超出屏幕宽度，此时需要自动换行。可以通过计算每张图片的宽度和当前行剩余宽度来实现自动换行。

示例：计算图片是否需要换行

CGFloat totalWidth = 0;
CGFloat maxWidth = 300; // 容器宽度
CGFloat imageSpacing = 10; // 图片间距

for (UIImage *image in imageArray) {
    CGFloat imageWidth = 20;
    if (totalWidth + imageWidth + imageSpacing > maxWidth) {
        // 换行
        totalWidth = 0;
        // 添加换行符
        [attributedString appendString:[[NSAttributedString alloc] initWithString:@"\n"]];
    } else {
        if (totalWidth != 0) {
            // 添加间距
            [attributedString appendString:[[NSAttributedString alloc] initWithString:@" "]];
        }
    }
    [attributedString appendString:[[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"%c", 0x0001] attributes:@{ (NSString *)kCTRunDelegateAttributeName : delegateForImage }]];
    totalWidth += imageWidth + imageSpacing;
}

逻辑分析：

• 遍历图片数组，计算当前行是否还能容纳下一张图片。
• 若超出宽度，则插入换行符并重置宽度。
• 否则插入图片占位符，并更新当前行宽度。

4.4.2 实现图文环绕与浮动布局

图文环绕（Text Wrap）是一种常见的排版方式，在网页中常见，但在Core Text中需要通过手动计算实现。

实现思路：

1. 绘制图片时预留空间 ：在绘制图片时，记录其绘制区域。
2. 调整文本绘制区域 ：在绘制文本时，避开图片区域。
3. 使用多个CTFrame实现多段文本绘制 。

示例：使用CGRectIntersection判断文本绘制区域是否与图片重叠

CGRect imageRect = CGRectMake(50, 50, 100, 100); // 图片绘制区域
CGRect textRect = CGRectMake(0, 0, 300, 400); // 文本绘制区域

CGRect leftRect = CGRectMake(0, 0, imageRect.origin.x, CGRectGetHeight(textRect));
CGRect rightRect = CGRectMake(CGRectGetMaxX(imageRect), 0, CGRectGetMaxX(textRect) - CGRectGetMaxX(imageRect), CGRectGetHeight(textRect));

// 绘制左侧文本
CTFrameDraw(frameLeft, context);

// 绘制图片
drawImageCallback(image, context, &imageRect);

// 绘制右侧文本
CTFrameDraw(frameRight, context);

逻辑分析：

• 将文本区域分为左右两部分，分别绘制。
• 图片绘制在中间预留区域，从而实现图文环绕效果。

小结（非总结性）

通过本章的讲解，我们了解了Core Text中图文混排的核心机制，包括 CTRunDelegate 的使用、图文对齐与尺寸适配策略、绘制流程控制以及多图混排与复杂布局的实现技巧。这些内容为我们在实际项目中实现高质量的图文混排提供了坚实的技术基础。

下一章我们将进一步探讨如何在实际项目中优化图文混排的性能，提升应用的响应速度与用户体验。

5. 性能优化与实际项目应用

在实际项目中，图文混排不仅要实现功能，还需要兼顾性能与响应速度，尤其在内容量大或频繁刷新时，性能优化显得尤为重要。本章将深入探讨Core Text在图文混排中的性能优化策略，并结合真实项目案例，展示其实际应用方式。

5.1 异步绘制与布局缓存策略

Core Text的绘制过程通常在主线程完成，若图文内容复杂、数据量大，容易造成主线程阻塞，影响UI流畅性。因此，异步绘制和布局缓存是提升性能的两个关键手段。

5.1.1 异步绘制提升UI响应能力

通过将文本绘制与布局计算移至子线程进行，可以有效避免阻塞主线程，提升UI响应能力。示例代码如下：

DispatchQueue.global(qos: .userInitiated).async {
    // 在子线程中进行Core Text的布局计算
    let framesetter = CTFramesetterCreateWithAttributedString(attributedString)
    let path = CGPath(rect: bounds, transform: nil)
    let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, nil)
    // 回到主线程绘制
    DispatchQueue.main.async {
        self.cachedFrame = frame // 缓存frame
        self.setNeedsDisplay()
    }
}

• 参数说明 ：
• attributedString ：富文本数据源。
• bounds ：绘制区域的矩形。
• cachedFrame ：用于缓存计算好的CTFrame对象。

5.1.2 布局缓存减少重复计算

在滚动视图或列表中频繁重绘时，重复计算CTFrame会带来较大性能损耗。可通过缓存已计算的 CTFrame 对象避免重复计算：

var cachedFrame: CTFrame?

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    if let cachedFrame = cachedFrame {
        CTFrameDraw(cachedFrame, context)
    } else {
        // 重新计算并缓存
        let framesetter = CTFramesetterCreateWithAttributedString(attributedString)
        let path = CGPath(rect: bounds, transform: nil)
        let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, 0), path, nil)
        self.cachedFrame = frame
        CTFrameDraw(frame, context)
    }
}

• 优化策略 ：
• 对每个cell或文本块进行单独缓存。
• 当内容或尺寸变化时清除缓存并重新计算。

5.2 响应式布局适配（Auto Layout与Size Classes）

在多设备适配中，图文混排的布局需支持不同屏幕尺寸与方向变化，响应式布局适配显得尤为重要。

5.2.1 动态调整图文混排布局

通过监听 bounds 变化，动态调整文本绘制区域：

override func layoutSubviews() {
    super.layoutSubviews()
    cachedFrame = nil // 清除旧缓存
    setNeedsDisplay()
}

• 逻辑说明 ：
• 每当视图尺寸变化时，重新计算CTFrame并绘制。
• 通过清除缓存，确保布局与尺寸一致。

5.2.2 支持不同设备与屏幕方向的适配

结合Auto Layout与Size Classes，可以在Storyboard或代码中定义不同的布局规则，确保图文混排在iPhone、iPad及横竖屏切换时依然美观。

设备类型	屏幕方向	推荐图文混排宽度
iPhone SE	竖屏	320pt
iPhone 14 Pro Max	竖屏	414pt
iPad Pro 12.9	竖屏	768pt
iPad Pro 12.9	横屏	1024pt

• 适配建议 ：
• 使用 traitCollection 检测当前Size Class。
• 根据 UIScreen.main.bounds.size 动态计算绘制区域。

5.3 Core Text在实际项目中的应用案例

5.3.1 新闻类App的富文本展示实现

在新闻类App中，图文混排常用于展示正文内容。通过Core Text，可实现带图片、标题、正文、引用块的复合排版。

// 创建带图片和文本的NSAttributedString
let attributedString = NSMutableAttributedString(string: "新闻正文内容...")
let imageAttachment = NSTextAttachment()
imageAttachment.image = UIImage(named: "news_image")
let imageString = NSAttributedString(attachment: imageAttachment)
attributedString.insert(imageString, at: 0)

// 设置字体、颜色等属性
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 8
attributedString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSRange(location: 0, length: attributedString.length))

• 优势 ：
• 自定义图文排版更灵活。
• 支持高亮、链接等交互。

5.3.2 社交App中的图文评论展示

社交App中，用户评论可能包含表情、@用户、话题标签等内容。通过Core Text可以实现高度定制化的评论展示。

• 实现步骤 ：
  1. 解析评论中的特殊内容（如@、#、表情）。
  2. 替换为对应NSAttributedString属性或图片附件。
  3. 使用CTFrame进行绘制并嵌入到UITableView或UICollectionView中。

graph TD
    A[解析原始评论] --> B{是否包含特殊标记}
    B -->|是| C[替换为NSAttributedString]
    B -->|否| D[使用默认样式]
    C --> E[生成CTFrame]
    D --> E
    E --> F[绘制到上下文]

• 交互扩展 ：
• 支持点击@用户名跳转。
• 支持点击话题标签搜索。

5.4 常见问题与调试技巧

5.4.1 布局错位与文本截断问题分析

• 常见原因 ：
• CTFrame 绘制区域与实际绘制上下文不匹配。
• 图片尺寸未正确计算，导致行高不一致。
• 解决方法 ：
• 使用 CTFrameGetLineOrigins 获取每一行的坐标，确保图文位置对齐。
• 调试时可绘制绘制区域边框辅助定位。

context.setFillColor(UIColor.red.cgColor)
context.fill(CGRect(x: 0, y: 0, width: 100, height: 100)) // 绘制辅助区域

5.4.2 内存泄漏与性能瓶颈排查方法

• 内存泄漏排查 ：
• 使用Xcode的Debug Memory Graph工具查看Core Text对象是否释放。
• 避免在 drawRect 中频繁创建 CTFramesetter 或 CTFrame 。
• 性能瓶颈排查 ：
• 使用Instruments的Core Animation和Time Profiler工具分析帧率和CPU占用。
• 对频繁重绘区域进行缓存，减少GPU绘制压力。

工具	用途
Xcode Debug Memory Graph	检测内存泄漏
Instruments - Time Profiler	分析CPU耗时
Instruments - Core Animation	检查绘制帧率

• 优化建议 ：
• 尽量避免在 drawRect 中创建对象。
• 对复杂图文内容使用异步绘制+缓存机制。

（未完待续）

本文还有配套的精品资源，点击获取

简介：在iOS开发中，图文混排是新闻、社交和电子书类应用的常见需求，CoreTextDemo项目通过苹果的Core Text框架展示了如何实现这一功能。Core Text提供精细的文本控制能力，支持自定义字体、颜色、段落样式，并允许插入图片，实现图文结合的复杂布局。本项目通过完整示例帮助开发者掌握图文混排的关键技术，提升界面设计能力，适用于多种iOS应用场景。

本文还有配套的精品资源，点击获取