[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 }

原文地址:https://www.cnblogs.com/strengthen/p/10357373.html

时间: 2024-10-12 02:58:14

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

[Swift通天遁地]九、拔剑吧-(14)创建更美观的景深视差滚动效果

景深视差经常被应用在游戏项目中. 本文将演示创建更美观的景深视差滚动效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Presentation' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击

[Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果

本文将演示使用第三方类库,创建页面之间的气泡式切换效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'BubbleTransition' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文

[Swift通天遁地]九、拔剑-(1)实现在程序中跳转到微信、App Store、地图

本文将演示如何从应用程序跳跳转到微信.App Store.地图等. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Appz' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[DemoA

[Swift通天遁地]九、拔剑吧-(3)创建多种自定义Segment分段样式的控件

本文将演示创建多种自定义Segment分段样式的控件. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'PagingMenuController' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开

[Swift通天遁地]九、拔剑吧-(2)在项目中使用大量美观的图标

本文将演示如何在项目中添加大量的字体类型的矢量图标. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'PagingMenuController' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项

[Swift通天遁地]九、拔剑吧-(4)使用开源类库创建可滑动的Segment分段控件

本文将演示创建多种自定义Segment分段样式的控件. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'TwicketSegmentedControl' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双

[Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果

本文将演示使用第三方类库,创建旋转和弹性的页面切换效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'GuillotineMenu' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[

[Swift通天遁地]九、拔剑吧-(9)创建支持缩放、移动、裁切的相机视图控制器

本文将演示创建支持缩放.移动.裁切的相机视图控制器. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod "ALCameraViewController" 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之

[Swift通天遁地]九、拔剑吧-(12)创建Preview-Transition图像预览界面

本文将演示如何创建一个漂亮的图像预览界面. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod "PreviewTransition" 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件