[Swift通天遁地]九、拔剑吧-(10)快速创建美观的聊天界面:可发送文字、表情、图片
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10357373.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示如何快速搭建一个强大的聊天界面。
首先确保已经安装了所需的第三方类库。双击查看安装配置文件【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 }