异常教程

iOS文本视图（Text View）（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

什么是iOS文本视图（Text View）？

在iOS开发中，文本视图（Text View）是一个用于展示和编辑多行文本的UI组件。它与文本字段（Text Field）类似，但功能更为强大，支持换行、滚动、富文本格式等特性。可以将其想象成一个“智能记事本”——用户可以在其中输入长篇内容，并通过代码控制其外观和行为。

例如，当你需要实现一个支持输入多行的评论框或笔记应用时，文本视图就是核心工具。它在邮件正文编辑、代码编辑器、Markdown预览等场景中广泛应用。

文本视图与文本字段的区别

在深入学习前，需要明确文本视图（UITextView）与文本字段（UITextField）的关键差异：

功能特性文本视图（Text View）文本字段（Text Field）
输入行数支持多行，自动换行固定单行输入
滚动能力内置滚动支持，适合长文本无滚动，仅显示单行文本
编辑复杂度支持富文本格式（颜色、字体等）仅支持基础属性设置
使用场景长文本输入（如评论、笔记）短文本输入（如用户名、密码）

理解这一区别能帮助开发者快速选择合适组件。

文本视图的基础用法

1. 创建与配置

通过Interface Builder或代码均可创建文本视图。以下为代码实现示例：

// 创建UITextView实例  
let textView = UITextView(frame: CGRect(x: 20, y: 100, width: 300, height: 200))  
textView.backgroundColor = .lightGray  
view.addSubview(textView)

2. 基础属性设置

通过修改属性可快速调整文本视图的外观：

// 设置默认文本  
textView.text = "开始输入..."  

// 修改字体与颜色  
textView.font = UIFont.systemFont(ofSize: 18)  
textView.textColor = .darkText  

// 移除默认边框  
textView.layer.borderWidth = 0

3. 处理用户输入

通过代理模式监听文本变化，示例代码如下：

class ViewController: UIViewController, UITextViewDelegate {  
    override func viewDidLoad() {  
        super.viewDidLoad()  
        textView.delegate = self  
    }  

    // 监听文本内容变化  
    func textViewDidChange(_ textView: UITextView) {  
        print("当前文本长度：\(textView.text.count)")  
    }  
}

高级功能详解

1. 富文本格式

文本视图支持通过NSAttributedString实现复杂排版，例如：

// 创建带颜色和加粗效果的文本  
let attributedString = NSMutableAttributedString(string: "欢迎来到文本视图世界！")  
attributedString.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 20), range: NSRange(location: 0, length: 4))  
attributedString.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 4, length: 10))  

textView.attributedText = attributedString

2. 自定义交互行为

通过代理方法可控制用户输入行为，例如限制输入长度：

func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {  
    guard textView.text.count + (text.count - range.length) <= 200 else {  
        return false // 限制最大200字  
    }  
    return true  
}

3. 滚动与缩进

通过contentOffset控制滚动位置，或实现类似代码编辑器的自动缩进功能：

// 在textViewDidChange方法中添加自动缩进逻辑  
func textViewDidChange(_ textView: UITextView) {  
    // 当输入换行符时自动添加4个空格  
    if textView.text.hasSuffix("\n") {  
        textView.text += "    "  
        // 将光标移动到最后  
        textView.selectedTextRange = textView.textRange(from: textView.endOfDocument, to: textView.endOfDocument)  
    }  
}

实战案例：创建一个Markdown预览器

需求分析

实现一个支持输入Markdown语法并实时预览的文本视图组件。关键点包括：

  1. 分割界面为输入区和预览区
  2. 实时解析Markdown语法
  3. 使用富文本渲染预览内容

实现步骤

步骤1：搭建UI结构

// 在ViewController中创建两个文本视图  
let inputTextView = UITextView()  
let previewTextView = UITextView()  

override func viewDidLoad() {  
    super.viewDidLoad()  
    setupUI()  
}  

private func setupUI() {  
    // 设置输入区域  
    inputTextView.frame = CGRect(x: 20, y: 80, width: view.bounds.width - 40, height: 200)  
    inputTextView.delegate = self  
    view.addSubview(inputTextView)  

    // 设置预览区域  
    previewTextView.frame = CGRect(x: 20, y: 290, width: view.bounds.width - 40, height: 200)  
    previewTextView.isEditable = false // 禁止编辑  
    view.addSubview(previewTextView)  
}

步骤2：实现Markdown解析

使用开源库SwiftMarkdown简化语法解析：

import SwiftMarkdown  

func updatePreview() {  
    let markdownText = inputTextView.text  
    let htmlContent = try! SwiftMarkdown().markdownToHTML(markdownText)  
    let attributedString = try! NSAttributedString(data: htmlContent.data(using: .utf8)!,  
                                                    options: [.documentType: NSAttributedString.DocumentType.html],  
                                                    documentAttributes: nil)  
    previewTextView.attributedText = attributedString  
}  

// 在textViewDidChange方法中调用  
func textViewDidChange(_ textView: UITextView) {  
    updatePreview()  
}

步骤3：优化显示效果

添加滚动同步与样式调整：

// 在setupUI方法中添加  
previewTextView.isScrollEnabled = true  
previewTextView.font = UIFont.systemFont(ofSize: 16)  

// 同步输入区域滚动  
func scrollViewDidScroll(_ scrollView: UIScrollView) {  
    if scrollView == inputTextView {  
        previewTextView.contentOffset.x = scrollView.contentOffset.x  
    }  
}

性能优化与常见问题

1. 避免频繁UI更新

在处理长文本时，应避免在主线程进行耗时操作。例如：

DispatchQueue.global().async {  
    // 执行复杂计算或网络请求  
    DispatchQueue.main.async {  
        self.previewTextView.attributedText = processedAttributedString  
    }  
}

2. 内存管理技巧

对于大型文本内容，可通过以下方式降低内存占用：

  • 使用attributedString的string属性获取原始文本，而非直接操作富文本对象
  • 定期清理未使用的NSAttributedString实例

3. 常见问题解决方案

  • 输入光标消失：调用textView.becomeFirstResponder()恢复焦点
  • 滚动位置重置：通过contentOffset保存并恢复滚动位置
  • 文本粘贴问题：通过代理方法shouldChangeTextIn自定义粘贴逻辑

总结与展望

通过本文的讲解，开发者可以掌握iOS文本视图（Text View）的核心功能与高级用法。从基础的文本输入到复杂的富文本渲染，文本视图为构建多样化文本交互场景提供了强大支持。

未来随着iOS系统的更新，文本视图的功能将持续扩展。例如，iOS 17引入了对Markdown原生支持的讨论，开发者可关注苹果官方文档获取最新特性。掌握文本视图的开发者，不仅能应对日常需求，更能为构建笔记应用、代码编辑器等专业工具打下坚实基础。

通过持续实践与探索，你将能充分发挥这一组件的潜力，为用户提供更丰富、更人性化的文本交互体验。

最新发布

查看更多文章