[Swift通天遁地]九、拔剑吧-(10)快速创建美观的聊天界面：可发送文字、表情、图片

本文将演示如何快速搭建一个强大的聊天界面。

首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】

1 platform :ios, '12.0'
2 use_frameworks!
3 
4 target 'DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     
7     pod 'Chatto', '= 3.3.1'
8     pod 'ChattoAdditions', '= 3.3.1'
9 end

根据配置文件中的相关设置，安装第三方类库。

安装完成之后，双击打开项目文件【DemoApp.xcodeproj】

安装的第三方类库尚未适配Xcode10，所以在编译时会出现错误。

点击右上角的错误图标，显示出现错误的文件列表。

在文件列表中，打开其中的一个错误文件：【BaseChatViewController】

点击修复图标，显示系统提供的修复建议。点击【Fix】修复图标，

由系统自动修复该处的语法错误。

在打开的窗口中，点击此处的解锁【Unlock】按钮，

解除对文件的锁定，并修复出现的语法错误。

使用相同的方式，修复其他的语法错误，然后隐藏Xcode界面。

并切换至浏览器的界面，还需下载并导入几份相关的类文件。

Github项目：【badoo/Chatto】，下载文件并解压：

【ChattoApp】->双击【ChattoApp.xcworkspace】->打开第三方类库的示例项目。

将项目所需的类文件拖动到自己的项目中：

【Photo Message】文件夹

【Sending status】文件夹

【Text Message】文件夹

【Time  Separator】文件夹

拖动到自己的项目中，在打开的导入确认窗口中，

勾选【Copy items if needed】->【Finish】确认文件夹的导入。

继续导入其他的类文件：

【ChatItemsDemoDecorator.swift】

【DemoChatViewController.swift】

【BaseMessageCollectionViewCellAvatarStyle.swift】

【BaseMessageHandler.swift】

【FakeDataSource.swift】

【FakeMessageFactory.swift】

【FakeMessageSender.swift】

【SlidingDatasSource.swift】

在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】

现在开始编写代码，创建一个聊天界面。

 1 import UIKit
 2 
 3 class ViewController: UIViewController {
 4     
 5     override func viewDidLoad() {
 6         super.viewDidLoad()
 7         // Do any additional setup after loading the view, typically from a nib.
 8         
 9         //首先添加一个按钮，当用户点击该按钮时，弹出警告窗口。
10         let button = UIButton(type: .roundedRect)
11         //设置按钮的显示区域
12         button.frame = CGRect(x: 80, y: 180, width: 150, height: 44)
13         //设置按钮的背景颜色为橙色
14         button.backgroundColor = UIColor.orange
15         //设置按钮的背景颜色为白色
16         button.tintColor = UIColor.white
17         //设置按钮在正常状态下的标题文字。
18         button.setTitle("Open chat view", for: .normal)
19         //给按钮控件绑定点击事件。
20         button.addTarget(self, action: #selector(ViewController.openChatView(_:)), for: .touchUpInside)
21         
22         //设置根视图的背景颜色为橙色
23         self.view.backgroundColor = UIColor.orange
24         //将按钮添加到根视图
25         self.view.addSubview(button)
26     }
27     
28     //添加一个方法，用来响应按钮的点击事件。
29     @objc func openChatView(_ button:UIButton)
30     {
31         //初始化两个整形常量，
32         //分别作为数据源的初始数据数量，
33         let initialCount = 0
34         //和每页数据的总数量。
35         let pageSize = 50
36         
37         //创建一个假数据源变量，作为在消息界面默认显示的内容。
38         var dataSource: FakeDataSource!
39         //读数据源进行初始化操作，并设置消息界面默认显示的内容。
40         dataSource = FakeDataSource(messages: TutorialMessageFactory.createMessages(), pageSize: pageSize)
41         
42         //当没有默认内容时，对数据源进行初始化操作。
43         if dataSource == nil
44         {
45             dataSource = FakeDataSource(count: initialCount, pageSize: pageSize)
46         }
47         
48         //创建一个聊天视图控制器
49         let chatController = DemoChatViewController()
50         
51         //设置聊天视图控制器的数据源，
52         chatController.dataSource = dataSource
53         //设置聊天视图控制器的和消息发送属性。
54         chatController.messageSender = dataSource.messageSender
55         
56         //在当前的视图控制器，打开聊天视图控制器。
57         self.present(chatController, animated: true, completion: nil)
58     }
59     
60     override func didReceiveMemoryWarning() {
61         super.didReceiveMemoryWarning()
62         // Dispose of any resources that can be recreated.
63     }
64 }