• 这里提供了IM高级的功能，可以将即时通讯服务更加个性化的集成到应用中
• 如果你对即时通讯服务集成不清楚，建议先看下快速集成文档

支持自定义区域说明

注意：上表中的【plist】是指IM UI资源包中的OpenIM-Theme.plist文件

注意：上表中列出的一些键值，如果在OpenIM-Theme.plist还不存在，您可以手动添加后查看运行效果。

注意：上表中列出的参考点，均可以在Demo工程中找到。

IM UI资源包

• 您可以通过在如下路径找到资源包，对其中的图片和配置文件等做修改可以直接影响到IM的UI页面：

  Demo/WXFrameworks/WXOUIModuleResources.bundle

  注意：但是我们强烈地建议您不要直接修改此bundle，因为会导致您升级IMSDK时难以维护被修改的资源文件。推荐使用自定义皮肤包的方式。

自定义皮肤包

• 注意：为了方便升级SDK，强烈建议使用自定义皮肤包，其中只包含你需要修改的资源文件，并且参考Demo中exampleCustomUISkin方法设置自定义皮肤包。

  /**
   *  自定义皮肤
   */
  - (void)exampleCustomUISkin
  {
      // 使用自定义UI资源和配置
      YWIMKit *imkit = self.ywIMKit;
  
      NSString *bundleName = @"CustomizedUIResources.bundle";
      NSString *bundlePath = [[NSBundle mainBundle].resourcePath stringByAppendingPathComponent:bundleName];
      NSBundle *customizedUIResourcesBundle = [NSBundle bundleWithPath:bundlePath];
      [imkit setCustomizedUIResources:customizedUIResourcesBundle];
  }

  注意：如上面的代码所示，CustomizedUIResources.bundle即为你的自定义资源包，你可以在其中修改资源文件。

  注意：注意在合适的时机调用该API，具体请参考官方Demo。

• 使用自定义皮肤包，当你需要升级IMSDK时，只需要直接覆盖Framework和默认资源Bundle即可。

UI属性配置

• 您可以在资源包中找到OpenIM-Theme.plist文件，修改某些选项即可定制对应的UI

• 注意：某些配置项并没有默认添加到OpenIM-Theme.plist中，如果您需要修改该项，请自己添加。

全局配置项

• Global-TintColor: 全局主题色

一些通用组件

• TableView

  影响除聊天窗口外的大部分其他TableView

  

  • TableView-SeparatorColor: 分割线颜色
  • TableView-BackgroundColor: 背景色
  • TableView-PullRefresh-TextColor: 下拉刷新控件文字颜色
  • TableView-PullRefresh-BackgroundColor: 下拉刷新控件背景颜色

• TableViewCell

  

  • TableView-CellTitle: 标题文字颜色
  • TableView-CellMinor: 附属信息文字颜色
  • TableView-CellDetail: 内容文字颜色
  • TableView-CellBackgroundColor: 背景色
  • TableView-CellBackgroundColor_Highlighted: 高亮背景色

会话列表

• 未读数

  

  • ConversationList-UnreadText: 会话列表未读数文字颜色
  • ConversationList-UnreadBackground: 会话列表未读数背景色

聊天窗口

• 聊天背景

  

  • talk_bg.jpeg: 聊天窗口背景图

• 输入框

  

  • MessageInputView-BackgroundColor: 输入区域背景色
  • MessageInputView-MorePanel-TextColor: 输入框更多面板选项名称文字颜色
  • MessageInputView-MorePanel-BackgroundColor: 输入框更多面板背景色
  • MessageInputView-TextField-TextColor: 输入框文字颜色
  • MessageInputView-TextField-BackgroundColor: 输入框背景色
  • MessageInputView-Record-TextColor: 录音按钮文字颜色
  • MessageInputView-Tint-Color: 输入区域主题色，如果没有该项，默认会使用全局主题色

• 聊天消息

  

  • ConversationView-Message-Left-TextColor: 左侧文本消息文字颜色
  • ConversationView-Message-Right-TextColor: 右侧文本消息文字颜色
  • ConversationView-Message-Middle-TextColor: 居中文本消息文字颜色
  • ConversationView-Message-LinkColor: 消息中链接文字颜色
  • ConversationView-Message-LinkColor-Left: 左侧消息中链接文字颜色，如果没有该项，则使用统一的消息链接文字颜色
  • ConversationView-Message-LinkColor-Right: 右侧消息中链接文字颜色，如果没有该项，则使用统一的消息链接文字颜色

  • ConversationView-SenderName-TextColor: 发送者昵称文字颜色

  • ConversationView-TimeLine-TextColor: 时间分割线文字颜色
  • ConversationView-TimeLine-BackgroundColor: 时间分割线背景色

您可以在Demo中尝试修改某些配置，并观察程序运行后的皮肤颜色变化。

消息气泡

资源属性文件

目前的OpenIM UI SDK提供了消息气泡定制，你可以再资源包中找到wxo_bubble_customize.plist文件。

消息气泡样式配置

打开wxo_bubble_customize.plist文件中可看到如下层级结构：

BubbleStyle节点包含当前Demo中所有的消息气泡样式，您可以在YWBaseBubbleChatView.h文件中看到具体的定义:

/// 文本、语音等普通气泡样式
CommonLeft      // 左侧气泡样式
CommonMiddle    // 居中气泡样式
CommonRight     // 右侧气泡样式
    
/// 图片、地理位置等气泡中间镂空样式
HollowLeft      // 左侧气泡样式
HollowMiddle    // 居中气泡样式
HollowRight     // 右侧气泡样式
    
/// 系统通知等弱提示消息样式
HintMiddle      // 居中气泡样式

气泡样式属性

• content : 配置气泡中内容区域的样式

  

  • color: 内容区域的背景色
  • corner_radius: 对内容区域做圆角裁剪

  PS: 圆角裁剪主要用在内容在下层的样式，防止内容的四个边角漏出。

• background : 配置气泡中背景区域的样式

  

  • image_name_normal: 气泡背景图
  • image_name_highlight: 气泡高亮背景图
  • color : 背景区域颜色
  • bringfrong: 已失效，请忽略

• cap_insets : 背景图九宫拉伸参数，参数默认为

  

• edge_insets: 背景区域和内容区域间距

  

您可以在Demo中尝试修改某些配置，并观察程序运行后的皮肤颜色变化。

控制状态栏、导航栏、Tabbar等

IMSDK提供的各个Controller都遵循YWViewControllerEventProtocol协议，你可以在controller的viewDidLoadBlock、viewWillAppearBlock、viewDidAppearBlock、viewWillDisappearBlock、viewDidDisappearBlock、viewControllerWillDeallocBlock等block中，调用相关的系统API，以便控制状态栏、导航栏、Tabbar等。例如：

__weak typeof(conversationController) weakController = conversationController;
[conversationController setViewWillAppearBlock:^(BOOL aAnimated) {
    [weakController.navigationController setNavigationBarHidden:NO animated:aAnimated];
}];

[conversationController setViewWillAppearBlock:^(BOOL aAnimated) {
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:aAnimated];
}];

会话列表页面的导航栏标题

• 首先，请使用YWConversationListViewController的makeControllerWithIMKit:函数来构造，然后在setViewDidLoadBlock:中修改导航栏标题。如果使用YWIMKit的makeConversationListViewController方法构造，IMSDK默认会修改导航栏标题。
• 其次，在YWConversationListViewController的viewDidLoadBlock中修改导航栏标题。

YWConversationListViewController *controller = [YWConversationListViewController makeControllerWithIMKit:self.ywIMKit];
__weak typeof(controller) weakController = controller;
[controller setViewDidLoadBlock:^{
    [weakController.navigationItem setTitle:@"消息"];
}];

聊天界面标题自定义

默认情况下聊天界面标题会显示在线状态和输入状态，如果您不需要，可以通过如下代码设置：

conversationController = [self.ywIMKit makeConversationViewControllerWithConversationId:aConversation.conversationId];
conversationController.disableTitleAutoConfig = YES;
__weak typeof(controller) weakController = conversationController;
[conversationController setViewDidLoadBlock:^{
    [weakController.navigationItem setTitle:@"XXX"];
}];

聊天界面消息输入控件完全自定义

当聊天页面预置的消息输入控件——YWMessageInputView 其定制能力不足以满足需求时，则可以使用完全自定义的输入控件，具体内容参考文档
《聊天页面消息输入控件完全自定义》

FAQ