Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@a1252425
a1252425 authored Mar 18, 2022
1 parent 8096323 commit 0e5c655
Showing 1 changed file with 62 additions and 224 deletions.
286 changes: 62 additions & 224 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,226 +1,62 @@
# iOS RCChatRoomSceneKit 文档
<h1 align="center"> 场景化聊天室 </h>

<p align="center">
<a href="https://github.com/rongcloud/rongcloud-scene-chatroomkit">
<img src="https://img.shields.io/cocoapods/v/RCChatroomSceneKit.svg?style=flat">
</a>

<a href="https://github.com/rongcloud/rongcloud-scene-chatroomkit">
<img src="https://img.shields.io/cocoapods/l/RCChatroomSceneKit.svg?style=flat">
</a>

<a href="https://github.com/rongcloud/rongcloud-scene-chatroomkit">
<img src="https://img.shields.io/cocoapods/p/RCChatroomSceneKit.svg?style=flat">
</a>

<a href="https://github.com/rongcloud/rongcloud-scene-chatroomkit">
<img src="https://img.shields.io/badge/%20in-swift%205-orange.svg">
</a>

</p>

## 简介
语聊房/视频直播房间场景 Kit，封装了消息列表、底部工具栏、输入框等常见的UI组件，并且可以通过json配置文件远端加载或者本地修改UI属性值。
场景话聊天室 Kit 是融云为开发者提供的开源项目，适用于语聊房、电台语音、视频直播等常见社交场景，Kit 封装聊天室消息列表、底部功能栏、输入框等常见的 UI 组件，并且，开发者可以通过 JSON 配置文件自定义 UI 属性，也可以通过远端动态配置。

## 集成
#### 使用 CocoaPods
1. cd 至项目根目录

### 使用 CocoaPods
1. 终端 cd 至项目根目录
2. 执行 pod init
3. 执行 open -e Podfile
4. 添加导入配置 pod 'RCChatroomSceneKit', '~> 0.0.1’ ，此处以集成 1.0.0 版本为例
4. 添加导入配置 pod 'RCChatroomSceneKit'
5. 执行 pod install
6. 双击打开 .xcworkspace

## 包含组件说明
`RCChatRoomSceneKit ` 内部包含两个自定义组件：
- RCChatroomSceneMessageView消息列表view:
## 功能
场景化聊天室内部按功能分为三个部分：
- 消息列表
<img src= "./imgs/chatroom_sceneview_0.PNG" width="375" alt="RCChatRoomSceneKit">

- RCChatroomSceneToolBar 底部功能栏view:
- 功能栏
<img src= "./imgs/chatroom_sceneview_1.PNG" width="375" alt="RCChatRoomSceneKit">

其中, RCChatroomSceneToolBar左边唤起输入按钮触发弹出InputBar
- 输入框：

<img src= "./imgs/chatroom_sceneview_2.PNG" width="375" alt="RCChatRoomSceneKit">

## 可配置项说明
`CoreKit` 基础库中RCCoreKitBundle 里面的`KitConfig.json` 文件，配置了所有的子Kit（RCChatRoomSceneKit，MusicControlKit等）的UI组件属性，**当前的RCChatRoomSceneKit相关的属性配置以及描述如下：**
## 配置项

```
{
// 集成 RCChatRoomSceneKit
"ChatRoomKit": {
// 消息列表的配置
"MessageView": {
// 消息列表距离四周的距离
"contentInsets": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0
},
// 最大显示的消息数量，超过最大数量移除顶部消息
"maxVisibleCount": 50,
// 消息气泡的默认颜色，优先级低于自定义
"defaultBubbleColor": {
"red": 0,
"green": 0,
"blue": 0,
"alpha": 0.3
},
// 消息气泡内部边距
"bubbleInsets": {
"top": 7,
"bottom": 7,
"left": 12,
"right": 12
},
// 消息气泡的默认圆角，优先级低于自定义
"defaultBubbleCorner": {
"radius": 10,
"leftTop": 0,
"rightTop": 0,
"rightBottom": 0,
"leftBottom": 0,
},
// 消息气泡的默认文字颜色，优先级低于自定义
"defaultBubbleTextColor": {
"red": 255,
"green": 255,
"blue": 255,
"alpha": 0.7
},
// 消息气泡的上下间距
"bubbleSpace": 5,
// 消息展示的最大文字长度
"bubbleTextMaxLength": 50,
// 语音消息图标及时长文字的颜色
"voiceIconColor": {
"red": 255,
"green": 255,
"blue": 255,
"alpha": 1
}
},
// 底部工具栏
"ToolBar": {
// 工具栏背景颜色
"backgroundColor": {
"red": 0,
"green": 0,
"blue": 0,
"alpha": 0
},
// 工具栏内边距
"contentInsets": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0
},
// 输入框按钮文字
"chatButtonTitle": "聊聊吧...",
// 输入框按钮大小
"chatButtonSize": {
"width": 105,
"height": 36
},
// 输入框按钮内边距
"chatButtonInsets": {
"top": 0,
"bottom": 0,
"left": 0,
"right": 0
},
// 输入框按钮文字颜色
"chatButtonTextColor": {
"red": 255,
"green": 255,
"blue": 255,
"alpha": 1
},
// 输入框按钮文字颜色
"chatButtonTextSize": 12,
// 输入框按钮背景色
"chatButtonBackgroundColor": {
"red": 255,
"green": 255,
"blue": 255,
"alpha": 0.26
},
// 输入框按钮背景圆角
"chatButtonBackgroundCorner": 18,
// 录音按钮是否可用
"recordButtonEnable": true,
// 录音质量
"recordQuality": 0,
// 录音按钮位置，0，左，1右
"recordPosition": 0,
// 录音最大时长
"recordMaxDuration": 60,
// 底部按钮集合
"buttonArray": [
{
// 按钮网络图片
"icon": "url1",
// 是否有右上角的气泡提示
"hasBadge": true
},
{
"icon": "url2",
"hasBadge": false
}
]
},
// 输入框view
"InputBar": {
// InputBar 背景色
"backgroundColor": {
"red": 86,
"green": 68,
"blue": 168,
"alpha": 1
},
// InputBar 内边距
"contentInsets": {
"top": 7,
"bottom": 7,
"left": 12,
"right": 12
},
// 输入框背景色
"inputBackgroundColor": {
"red": 255,
"green": 255,
"blue": 255,
"alpha": 1
},
// 输入框圆角
"inputCorner": 8,
// 输入框最小高度
"inputMinHeight": 36,
// 输入框最大高度，输入文字多行时的最大高度
"inputMaxHeight": 108,
// 输入框内文字大小
"inputTextSize": 14,
// 输入框内文字颜色
"inputTextColor": {
"red": 51,
"green": 51,
"blue": 51,
"alpha": 1
},
// 输入框内默认提示文字
"inputHint": "聊聊吧...",
// 输入框内默认提示文字颜色
"inputHintColor": {
"red": 153,
"green": 153,
"blue": 153,
"alpha": 1
},
// 输入框内边距
"inputInsets": {
"left": 10,
"top": 5,
"right": 10,
"bottom": 5
},
// 是否开启emoji输入功能
"emojiEnable": true
}
}
}
```
场景化聊天室可以通过 JSON 文件进行 UI 配置，开发者需要集成 `RCCoreKit`，将 JSON 配置内容写入 `RCCoreKitBundle` 里面的 `KitConfig.json` 文件，场景化聊天室支持的配置项如下

## 使用
#### RCChatroomSceneMessageView
1. 创建
### 消息列表
类名：RCChatroomSceneMessageView
#### 创建

```swift
var chatroomView = RCChatroomSceneView()

/// 对外提供的是一个RCChatroomSceneView，内部持有messageView ，类型是RCChatroomSceneMessageView
/// 对外提供的是一个 RCChatroomSceneView，内部持有 messageView ，类型是 RCChatroomSceneMessageView
var messageView = chatroomView.messageView

///设置消息点击事件代理
Expand All @@ -233,16 +69,16 @@ chatroomView.messageView.snp.makeConstraints { make in
}
```

2. 添加文本消息到列表
#### 文本消息展示

```
///上面创建的messageView对象调用：
///上面创建的 messageView 对象调用：
messageView.addMessage(msg)
/// addMessage是Objective-C接口定义：
/// addMessage 是 OC 接口定义：
- (void)addMessage:(id<RCChatroomSceneMessageProtocol>)message;
///消息对象msg要遵守RCChatroomSceneMessageProtocol协议：
/// 消息对象 msg 要遵守 RCChatroomSceneMessageProtocol 协议：
@protocol RCChatroomSceneMessageProtocol <NSObject>
@optional
Expand All @@ -264,12 +100,17 @@ messageView.addMessage(msg)
```


3. 添加语音消息到列表:
#### 语音消息展示

RCChatroomSceneVoiceMessage 遵守 RCChatroomSceneMessageProtocol
因此构建消息对象 msg 同时也继承了 RCChatroomSceneMessageProtocol 里面的属性，
也需要去实现协议里对应的方法，返回相关的属性值。

```
///上面创建的messageView对象调用：
/// 上面创建的 messageView 对象调用：
messageView.addMessage(msg)
///这里的语音消息对象msg要遵守RCChatroomSceneVoiceMessage协议,
/// 这里的语音消息对象 msg 要遵守 RCChatroomSceneVoiceMessage 协议
@protocol RCChatroomSceneVoiceMessage <RCChatroomSceneMessageProtocol>
/// 语音文件本地路径
- (NSString *)voicePath;
Expand All @@ -279,11 +120,7 @@ messageView.addMessage(msg)
@end
```

**RCChatroomSceneVoiceMessage遵守RCChatroomSceneMessageProtocol
因此构建消息对象msg同时也继承了RCChatroomSceneMessageProtocol里面的属性，
也需要去实现协议里对应的方法，返回相关的属性值。**

4. 得到消息体点击回调，获取对应的信息
#### 事件响应
```
/// 第1步（创建）里面设定的事件代理对象：
messageView.setEventDelegate(self)
Expand All @@ -299,15 +136,16 @@ setEventDelegate是Objective-C接口定义：
```


#### RCChatroomSceneToolBar
1. 创建
### 工具栏
类名：RCChatroomSceneToolBar
#### 创建

```swift
///同样创建RCChatroomSceneMessageView机理一样，RCChatroomSceneView内部持有RCChatroomSceneToolBar：
/// 同创建 RCChatroomSceneMessageView 机理一样，RCChatroomSceneView 内部持有 RCChatroomSceneToolBar：
var chatroomView = RCChatroomSceneView()
var toolBar = chatroomView.toolBar

///设置代理对象
/// 设置代理对象
toolBar.delegate = self

/// layout
Expand All @@ -318,11 +156,11 @@ toolBar.snp.makeConstraints { make in
```


2. 配置 ToolBar按钮
`RCChatroomSceneToolBar ` 横向包含三个部分：
#### 配置 ToolBar按钮
`RCChatroomSceneToolBar` 横向包含三个部分：
- 左边唤起输入按钮
- 中间的按钮排列组(属性命名为commonActions)
- 右边的按钮排列组(属性命名为actions)
- 中间的按钮排列组(属性命名为 commonActions )
- 右边的按钮排列组(属性命名为 actions )
![alt(height=300)](./imgs/chatroom_sceneview_3.PNG)
```
let button1 = YourDefinedUIButon（）
Expand All @@ -343,15 +181,15 @@ chatroomView.toolBar.setConfig(config)
```
**上面配置代码生效后，左边的输入唤起按钮会显示语音输入按钮，button1, button2从左到右依次构成中间排列组，button3, button4 从左到右依次构成右边排列组**

3. ToolBar发送文字代理回调
#### ToolBar发送文字代理回调

```
/// 文本输入点击发送后调用
/// @param text 文本内容
- (void)textInputViewSendText:(NSString *)text;
```

4. ToolBar 语音输入相关事件代理回调
#### ToolBar 语音输入相关事件代理回调

```
/// 开始录音
Expand All @@ -365,4 +203,4 @@ chatroomView.toolBar.setConfig(config)
```

## 其他
如有任何疑问请提交issue
如有任何疑问请提交 issue

0 comments on commit 0e5c655

Please sign in to comment.