- 支持自定义区域说明
- 自定义UI资源包 - 默认UI资源包位置 - 自定义 Bundle 命名规则
- UI属性配置 1. TableView 2. TableViewCell 3. 未读数 4. 聊天背景 5. 输入框 6. 聊天消息 7. 消息气泡
- 控制状态栏、导航栏、Tabbar等
- 会话列表页面的导航栏标题
- 聊天界面标题自定义
- HUD 和通知提醒演示自定义
| 页面 | 位置 | 定制点 | 定制方式 |
|---|---|---|---|
| 全局 | 顶部导航栏 | 背景色、文字颜色等样式 | 系统API |
| 全局 | 顶部导航栏 | 导航按钮 | 既可以使用 -[LCCKBaseViewController configureBarButtonItemStyle:action:]，又可以在各个Controller的 setViewDidLoadBlock: 中调用系统API |
| 全局 | TableView | 分割线、背景色、Cell文字颜色、Cell背景色等 | 【plist】TableView-XXX ChatKit-Theme.plist中 【plist】是指资源包 MessageBubble.bundle 中的 MessageBubble-Customize.plist 或者是 Other.bundle 中的 ChatKit-Theme.plist 文件，下同 |
| 全局 | 核心流程（聊天、对话列表话及相关页面） | 支持国际化 | 自定义 Other.bundle 为 CustomizedChatKit.Other.bundle，并修改或增加其中的本地化文件 |
| 全局 | 头像样式 | 头像圆角 | -[LCChatKit setAvatarImageViewCornerRadiusBlock:] |
| 全局 | 事件处理 | 预览图片 | -[LCChatKit setPreviewImageMessageBlock:] |
| 全局 | 事件处理 | 点击头像 | -[LCChatKit setOpenProfileBlock:] |
| 全局 | 事件处理 | 提示信息 | -[LCChatKit setShowNotificationBlock: |
| 会话列表 | 未读数 | 文字颜色，背景色 | 【plist】ConversationList-UnreadText、ConversationList-UnreadBackground |
| 聊天页面 | 聊天背景 | 替换资源包图片 | 如果想修改默认的图片，需要替换 Other.bundle conversationViewController_default_backgroundImage.png ，如果要修改特定对话，需要调用下面的方法： -[LCChatKit setCurrentConversationBackgroundImage:scaledToSize:或-[LCChatKit setBackgroundImage:forConversationId:scaledToSize:] |
| 聊天页面 | 输入区域 | 主题色 | 【plist】 MessageInputView-Tint-Color |
| 聊天页面 | 输入区域 | 输入区域背景色 | 【plist】 MessageInputView-BackgroundColor |
| 聊天页面 | 输入区域 | 输入框 | 【plist】 MessageInputView-TextField-TextColor、MessageInputView-TextField-BackgroundColor |
| 聊天页面 | 输入区域 | 录音按钮 | 【plist】MessageInputView-Record-TextColor 、MessageInputView-RecordView-BackgroundColor |
| 聊天页面 | 输入区域 | 更多区域 | 【plist】MessageInputView-MorePanel-BackgroundColor、MessageInputView-MorePanel-TextColor |
| 聊天页面 | 输入区域 | 更多区域Item | 参考 LCCKInputViewPluginVCard 类 |
| 聊天页面 | 输入区域 | 自定义表情 | 替换 Emoji.bundle 中的图片资源和 plist 文件 |
| 聊天页面 | 自定义消息 | 自定义消息 | 参考 LCCKVCardMessage 类、与 LCCKInputViewPluginVCard 类 |
| 聊天页面 | 消息显示 | 左右文本颜色 | 【plist】ConversationView-Message-Left-TextColor、ConversationView-Message-Right-TextColor、 |
| 聊天页面 | 消息显示 | 链接颜色 | 【plist】ConversationView-Message-LinkColor、ConversationView-Message-LinkColor-Left、ConversationView-Message-LinkColor-Right |
| 聊天页面 | 消息显示 | 发送者昵称颜色 | 【plist】 ConversationView-SenderName-TextColor |
| 聊天页面 | 消息显示 | 时间分割线文字颜色 | 【plist】 ConversationView-TimeLine-TextColor |
| 聊天页面 | 气泡样式 | 气泡背景图等 | MessageBubble.bundle 中的 MessageBubble-Customize.plist，详见下文消息气泡小节 |
注意： 上表中的【plist】是指资源包 MessageBubble.bundle 中的 MessageBubble-Customize.plist 或者是 Other.bundle 中的 ChatKit-Theme.plist 文件
注意：上表中列出的参考点，均可以在Demo工程中找到。
可以通过如下路径找到资源包，对其中的图片和配置文件等做修改可以直接影响到 UI 页面：
├── ChatKit ＃核心库文件夹
│ └── Class
│ ├── Model
│ ├── Module
│ ├── Resources # UI资源包
│ ├── Tool
└── ChatKit-OC # Demo演示注意：但是我们强烈地建议您不要直接修改此bundle，因为会导致您升级 ChatKit 时难以维护被修改的资源文件。推荐使用自定义皮肤包的方式。
注意：为了方便升级 ChatKit，强烈建议使用自定义资源包，自定义资源文件时，只需要拷贝遵循命名规则的 Bundle 即可，无需在代码中进行设置。ChatKit 将资源分为了多个 Bundle 文件，自定义时只包含你需要修改的 Bundle 即可，不需要所有 Bundle 都包含。比如如果你只需要自定义聊天气泡，那么你需要如下步骤：
- 将 ChatKit 中的 MessageBubble.bundle 拷贝一份到你的本机，比如桌面。
- 在桌面中操作该 Bundle，替换其中你要自定义的资源
- 将修改后的 Bundle 改名为 CustomizedChatKit.MessageBubble.bundle（注意：要确保文件命名和数量都保持不变）
- 将 CustomizedChatKit.MessageBubble.bundle 拖拽到你的工程中（注意：是拷贝到你自己的项目中，也即 MainBundle 中，并非 ChatKit 中）
ChatKit 提供了默认的 Bundle 文件，如果想自定义对应的 Bundle ，需要在相应的资源 Bunble 前加前缀 CustomizedChatKit.，然后拖拽到自己的项目中，详细的对应关系如下：
| 项目 | 默认名称 | 自定义名称 | 资源类型 |
|---|---|---|---|
| 聊天气泡 | MessageBubble.bundle | CustomizedChatKit.MessageBubble.bundle | 图片 |
| 聊天输入框键盘相关 | ChatKeyboard.bundle | CustomizedChatKit.ChatKeyboard.bundle | 图片 |
| 表情 | Emoji.bundle | CustomizedChatKit.Emoji.bundle | 图片、plist描述文件 |
| 默认占位图片 | Placeholder.bundle | CustomizedChatKit.Placeholder.bundle | 图片 |
| 声音相关 | VoiceMessageSource.bundle | CustomizedChatKit.VoiceMessageSource.bundle | 声音 |
| NavigationBar 左右侧icon | BarButtonIcon.bundle | CustomizedChatKit.BarButtonIcon.bundle | 图片 |
| 其他 | Other.bundle | CustomizedChatKit.Other.bundle | 任意类型 |
您可以在资源包中找到 ChatKit-Theme.plist 文件，修改某些选项即可定制对应的 UI
影响除聊天页面外的绝大多数 TableView ，以最近对话列表为例：
| Key | 修改区域 |
|---|---|
| TableView-SeparatorColor | 分割线颜色 |
| TableView-BackgroundColor | 背景色 |
| TableView-PullRefresh-TextColor | 下拉刷新控件文字颜色 |
| TableView-PullRefresh-BackgroundColor | 下拉刷新控件背景颜色 |
| Key | 修改区域 |
|---|---|
| TableView-CellTitle | 标题文字颜色 |
| TableView-CellMinor | 附属信息文字颜色 |
| TableView-CellDetail | 内容文字颜色 |
| TableView-CellBackgroundColor | 背景色 |
| TableView-CellBackgroundColor_Highlighted | 高亮背景色 |
| Key | 修改区域 |
|---|---|
| ConversationList-UnreadText | 会话列表未读数文字颜色 |
| ConversationList-UnreadBackground | 会话列表未读数背景色 |
如果想修改默认的图片，需要替换 Other.bundle conversationViewController_default_backgroundImage.png ，如果要修改特定对话，需要调用下面的方法：-[LCChatKit setCurrentConversationBackgroundImage:scaledToSize:或-[LCChatKit setBackgroundImage:forConversationId:scaledToSize:]
| 默认背景图 | 修改bundle文件，将修改全部的默认背景图 | 代码动态修改可针对特定对话 |
|---|---|---|
 |
 |
 |
| Key | 修改区域 |
|---|---|
| MessageInputView-BackgroundColor | 输入区域背景色 |
| MessageInputView-MorePanel-TextColor | 输入框更多面板选项名称文字颜色 |
| MessageInputView-MorePanel-BackgroundColor | 输入框更多面板背景色 |
| MessageInputView-TextField-TextColor | 输入框文字颜色 |
| MessageInputView-TextField-BackgroundColor | 输入框背景色 |
| MessageInputView-Record-TextColor | 录音按钮文字颜色 |
| MessageInputView-Tint-Color | 输入区域主题色，如果没有该项，默认会使用全局主题色 |
| Key | 修改区域 |
|---|---|
| ConversationView-Message-Left-TextColor | 左侧文本消息文字颜色 |
| ConversationView-Message-Right-TextColor | 右侧文本消息文字颜色 |
| ConversationView-Message-LinkColor | 消息中链接文字颜色 |
| ConversationView-Message-LinkColor-Left | 左侧消息中链接文字颜色，如果没有该项，则使用统一的消息链接文字颜色 |
| ConversationView-Message-LinkColor-Right | 右侧消息中链接文字颜色，如果没有该项，则使用统一的消息链接文字颜色 |
| ConversationView-SenderName-TextColor | 发送者昵称文字颜色 |
| ConversationView-TimeLine-TextColor | 时间分割线文字颜色 |
| ConversationView-TimeLine-BackgroundColor | 时间分割线背景色 |
资源属性文件
ChatKit 提供了消息气泡定制，你可以再资源包资源包 MessageBubble.bundle 中找到 MessageBubble-Customize.plist：
消息气泡样式配置:
| key | 文本、语音等普通气泡样式 |
|---|---|
| CommonLeft | 左侧气泡样式 |
| CommonRight | 右侧气泡样式 |
| key | 图片、地理位置等气泡中间镂空样式 |
|---|---|
| HollowLeft | 左侧气泡样式 |
| HollowRight | 右侧气泡样式 |
其中有几个关键字段：
cap_insets : 设置气泡背景的可拉伸区域：
九宫拉伸参数 top、left、bottom、right 的含义如下：
以达到如下的拉伸效果：
edge_insets: 气泡背景区域（红色）和内容区域（白色）间距：
ChatKit 提供的各个 Controller 都遵循 LCCKViewControllerEventProtocol 协议，你可以在 controller 的 -setViewDidLoadBlock:、-setViewWillAppearBlock:、-setViewDidAppearBlock:、-setViewWillDisappearBlock:、-setViewDidDisappearBlock:等 block 中，调用相关的系统API，以便控制状态栏、导航栏、Tabbar等。
例如：
[conversationViewController setViewWillAppearBlock:^(LCCKBaseViewController *viewController, BOOL aAnimated) {
[viewController.navigationController setNavigationBarHidden:NO animated:aAnimated];
}]; [conversationViewController setViewWillAppearBlock:^(LCCKBaseViewController *viewController, BOOL aAnimated) {
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:aAnimated];
}];在 LCCKConversationListViewController 的 setViewDidLoadBlock: 中修改导航栏标题。
LCCKConversationListViewController *firstViewController = [[LCCKConversationListViewController alloc] init];
[firstViewController setViewDidLoadBlock:^(LCCKBaseViewController *viewController) {
viewController.navigationItem.title = @"消息";
}];需要禁用标题自动配置。
默认配置如下：
- 最右侧显示静音状态
- 单聊默认显示对方昵称，群聊显示
conversation的 name 字段值
LCCKConversationViewController *conversationViewController = [[LCCKConversationViewController alloc] initWithConversationId:conversationId];
conversationViewController.disableTitleAutoConfig = YES;
[conversationViewController setViewDidLoadBlock:^(LCCKBaseViewController *viewController) {
viewController.navigationItem.title = @"消息";
}];可以通过下面的方式自定义圆角，支持设置为圆形头像：
[[LCChatKit sharedInstance] setAvatarImageViewCornerRadiusBlock:^CGFloat(CGSize avatarImageViewSize) {
if (avatarImageViewSize.height > 0) {
return avatarImageViewSize.height/2;
}
return 5;
}];通知
[[LCChatKit sharedInstance] setShowNotificationBlock:^(UIViewController *viewController, NSString *title, NSString *subtitle, LCCKMessageNotificationType type) {
[self exampleShowNotificationWithTitle:title subtitle:subtitle type:type];
}];
HUD
[[LCChatKit sharedInstance] setHUDActionBlock:^(UIViewController *viewController, UIView *view, NSString *title, LCCKMessageHUDActionType type) {
switch (type) {
case LCCKMessageHUDActionTypeShow:
[[self class] lcck_showMessage:title toView:view];
break;
case LCCKMessageHUDActionTypeHide:
[[self class] lcck_hideHUDForView:view];
break;
case LCCKMessageHUDActionTypeError:
[[self class] lcck_showError:title toView:view];
break;
case LCCKMessageHUDActionTypeSuccess:
[[self class] lcck_showSuccess:title toView:view];
break;
}
}];