[Swift通天遁地]9、拔劍吧-(10)快速建立美觀的聊天界面：可發送文字、表情、圖片

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-vthxmuvf-kc.html 
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目錄：[Swift]通天遁地Swift

本文將演示如何快速搭建一個強大的聊天界面。

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【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 }