iOS

最近更新时间:2024-11-15 15:36:22

我的收藏

概述

TUI 组件默认内置了:轻量、深沉、活泼、深色共四套主题,以及支持跟随 iOS 系统自动切换深色主题和默认设置。您可以任意切换或者修改内置主题,也可以按需新增主题。
轻量 light
深沉 serious
活泼 lively
深色 dark













主题资源

您可以在任一 TUI 组件内部的 Resources 文件夹下看到该组件所支持的主题资源。以 TUIChat 组件为例,您可以在 TUIChat/Resources/ 下看到 TUIChatTheme.bundle 文件。该文件即为 TUIChat 组件内置的主题资源。

选中 TUIChatTheme.bundle 文件,并右键选择 Show Package Contents 即可看到内置的四套主题资源,文件夹名称即为主题 ID。
我们以 “轻量主题” 为例,主题 ID 为 light ,每套主题内部均包含两个元素:manifest.plist 文件和 resource 资源文件夹。
manifest.plist 文件存储了当前主题所使用的图片、字体、颜色等要素的值,同一组件中不同主题下的 manifest.plist 文件中的 key 均相同;
resource 资源文件夹存储了当前主题所使用的资源,例如图片。

不管是修改内置主题,还是新增一套主题,都需要修改各组件下的 manifest.plist 文件。

应用主题

当您选中某个主题后,需要对 TUI 组件以及您的 App 主工程设置对应的主题。您可以调用 TUIThemeManager-applyTheme:forModule: 方法,为指定组件应用主题。
您可以参考 TUIKitDemo 的 TUIThemeSelectController+applyTheme: 方法。
+ (void)applyTheme:(NSString * __nullable)themeID {
// 获取 App 上次启动所使用的主题 ID
NSString *lastThemeID = [self getCacheThemeID];
if (themeID.length) {
lastThemeID = themeID;
}

// 组件: 应用/卸载主题
if (lastThemeID == nil || lastThemeID.length == 0 || [lastThemeID isEqualToString:@"system"]) {
// 主题 ID 为空,或者明确跟随系统,卸载所有组件的主题
[TUIShareThemeManager unApplyThemeForModule:TUIThemeModuleAll];
} else {
// 为所有组件应用主题
[TUIShareThemeManager applyTheme:lastThemeID forModule:TUIThemeModuleAll];
}

// 系统暗黑样式: 与主题互斥
dispatch_async(dispatch_get_main_queue(), ^{
if (@available(iOS 13.0, *)) {
if (lastThemeID == nil || lastThemeID.length == 0 || [lastThemeID isEqualToString:@"system"]) {
// 跟随系统变化
UIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = 0;
} else if ([lastThemeID isEqual:@"dark"]) {
// 强制切换成黑夜模式
UIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
} else {
// 忽略系统变化,强制切换成白天模式,并使用主题
UIApplication.sharedApplication.keyWindow.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}
}
});
}

修改内置主题

TUI 组件目前支持修改内置的主题,只需要按照下列步骤,即可对内置主题的颜色、字体、图片等要素做自定义变更。
拷贝 TUI 组件内置的主题资源包到您的工程中,并修改各主题下对应的主题要素;
在 App 启动时,将您已经修改好的主题资源包路径注册到 TUI 组件中;
当切换到对应主题后,TUI 组件会自动应用您修改后的主题包。
例如,TUIChat 组件中文件消息的背景色,在不同主题下有不一样的颜色。该背景色在内置的 “活泼” 主题下的色值为 #FFFFFF,现在想要修改成 #FF0000,您只需要按照如下步骤操作即可:
1. 将 TUIChat 组件 TUIChat/Resources/TUIChatTheme.bundle 文件拷贝一份到您的主工程中,并重命名为 TUIChatCustomTheme.bundle

2. 修改 manifest.plist 文件中标识文件消息背景色的 value 值,其中各 key 值的释义详见 Chat 页面样式

3. - application:didFinishLaunchingWithOptions: 方法中,调用 TUIRegisterThemeResourcePath 注册修改后的主题包资源路径,用于覆盖 TUIChat 内置的主题包,您可以参考 TUIKitDemo 的 AppDelegate 文件;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// 自定义修改 TUIChat 组件的主题 - 修改主题资源包中的内置主题
// -- 1. 获取自定义后的资源包路径
NSString *customChatThemePath = [NSBundle.mainBundle pathForResource:@"TUIChatCustomTheme.bundle" ofType:nil];
// -- 2. 给 TUIChat 组件注册自定义的主题资源包路径,用于覆盖内置的主题,note: 此时只能覆盖 TUIThemeModuleChat
TUIRegisterThemeResourcePath(customChatThemePath, TUIThemeModuleChat);

// TUIKitDemo 注册主题
NSString *demoThemePath = [NSBundle.mainBundle pathForResource:@"TUIDemoTheme.bundle" ofType:nil];
TUIRegisterThemeResourcePath(demoThemePath, TUIThemeModuleDemo);

[ThemeSelectController applyLastTheme];

[self setupListener];
[self setupGlobalUI];
[self setupConfig];
[self tryAutoLogin];

return YES;
}
4. 再次启动 App,您可以看到对应的背景色已经被成功修改。
修改前
修改后


说明:
同样地,如果您想修改某个内置的图标,依然可以将图标资源存放到主题文件夹下的 Resource 文件夹中,然后修改 manifest 中对应 key 的 value 值。

新增主题

如果内置的 4 套主题无法满足您的需求,您可以自行按照如下步骤为组件新增一套全新的主题:
拷贝 TUI 组件内置的主题资源包到您的工程中,在主题资源包中新建一个主题资源文件夹,文件夹名称即为新增主题的 themeID
将 TUI 组件内置的主题资源包中的 light 文件夹下的 manifest.plist 文件拷贝至新创建的主题文件夹中,并修改 idname 以及 name_en 的值;
在新创建的主题文件夹中新建一个 resource 文件夹,用于存放新增主题的资源文件;
按需修改新增主题的 manifest.plist 文件;
在 App 启动时,将您已经修改好的主题资源包路径注册到 TUI 组件中,并应用当前的新增主题。
例如,给 TUIChat 组件新创建一套新的主题 “商务”,themeIDenterprise,您可以按照如下步骤操作:
1. 将 TUIChat 组件 TUIChat/Resources/TUIChatTheme.bundle 文件拷贝一份到您的主工程中,并重命名为 TUIChatCustomTheme.bundle

2. 复制 TUIChatCustomTheme.bundle 下的light 文件夹,并重命名为 enterprise

3. 按需修改 enterprise 文件夹下的 manifest.plist 文件中的 value 值,其中各 key 值的释义详见 Chat 页面样式
例如将文件消息的背景色修改为 #C4E3FE。

4. 在 App 启动时,将您已经修改好的主题资源包路径注册到 TUI 组件中,并应用当前的新增主题。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// 自定义修改 TUIChat 组件的主题 - 在主题资源包中新增了一套主题
NSString *customChatThemePath = [NSBundle.mainBundle pathForResource:@"TUIChatCustomTheme.bundle" ofType:nil];
TUIRegisterThemeResourcePath(customChatThemePath, TUIThemeModuleChat);

// 应用主题, 根据 themeID 对 TUIChat 设置主题
[TUIShareThemeManager applyTheme:@"enterprise" forModule:TUIThemeModuleChat];

return YES;
}
5. 再次启动 App,您可以看到新增到的商务主题被成功应用到了 App。


主题样式表

基础样式

存储位置

基础样式均存在于 TUICore 组件中,由各个组件引用。
您可以在 TUICore 组件的 TUICore/Resources/TUICoreTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key
在基础样式中,TUICore 提供了公共的 UI 规范,例如:首选背景色、分割线颜色等。您可以通过修改基础样式来同时影响其他各个组件。

UI 样式表


图标
样式 key
样式释义
default_group_head_public_img
Public 类型的群聊,默认头像
default_group_head_meeting_img
Meeting 类型的群聊,默认头像
default_group_head_avchatroom_img
AVChatRoom 类型的群聊,默认头像
default_group_head_community_img
Community类型的群聊,默认头像
default_group_head_img
默认的群头像
default_c2c_head_img
缺省的用户头像
service_more_video_call_img
聊天界面更多选项卡中的视频通话图标
service_more_voice_call_img
聊天界面更多选项卡中的语音通话图标
颜色
样式 key
样式释义
primary_theme_color
主题色,描述了当前主题下的主色调
common_switch_on_color
通用 UISwitch 组件,开关打开时的颜色
head_bg_gradient_start_color
导航栏顶部背景颜色,渐变色
head_bg_gradient_end_color
导航栏顶部背景颜色,渐变色
search_textfield_bg_color
搜索栏输入框的背景颜色

Chat 页面样式

存储位置

Chat 页面样式均存在于 TUIChat 组件中,供 Chat 页面使用。
您可以在 TUIChat 组件的 TUIChat/Resources/TUIChatTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key

UI 样式表


图标
样式 key
样式释义
chat_custom_order_message_img
自定义订单消息图片
chat_custom_evaluation_message_img
自定义评价消息图片
chat_more_camera_img
更多选项卡,相机图标
chat_more_file_img
更多选项卡,文件图标
chat_more_link_img
更多选项卡,自定义图标
chat_more_picture_img
更多选项卡,图片图标
chat_more_video_img
更多选项卡,录像图标
chat_more_groupnote_img
更多选项卡,接龙图标
chat_more_poll_img
更多选项卡,投票图标
chat_bubble_send_img
消息气泡,发送时的背景图片
chat_bubble_send_alpha20_img
消息气泡,透明度为 0.2 的背景图,用于实现闪烁效果
chat_bubble_send_alpha50_img
消息气泡,透明度为 0.5 的背景图,用于实现闪烁效果
chat_bubble_receive_img
消息气泡,接收时的背景图片
chat_bubble_receive_alpha20_img
消息气泡,透明度为 0.2 的背景图,用于实现闪烁效果
chat_bubble_receive_alpha50_img
消息气泡,透明度为 0.5 的背景图,用于实现闪烁效果
chat_voice_message_sender_voice_normal_img
语音消息,发送消息时正常状态下的背景图片
chat_voice_message_receiver_voice_normal_img
语音消息,接收消息时正常状态下的背景图片
chat_icon_copy_img
聊天页面,长按消息后弹出的菜单页面中的“复制”图标
chat_icon_delete_img
聊天页面,长按消息后弹出的菜单页面中的“删除”图标
chat_icon_recall_img
聊天页面,长按消息后弹出的菜单页面中的“撤回”图标
chat_icon_multi_img
聊天页面,长按消息后弹出的菜单页面中的“多选”图标
chat_icon_forward_img
聊天页面,长按消息后弹出的菜单页面中的“转发”图标
chat_icon_reply_img
聊天页面,长按消息后弹出的菜单页面中的“回复”图标
chat_icon_reference_img
聊天页面,长按消息后弹出的菜单页面中的“引用”图标
chat_icon_translate_img
聊天页面,长按消息后弹出的菜单页面中的“翻译”图标
chat_icon_hide_img
聊天页面,长按消息后弹出的菜单页面中的“隐藏”图标
chat_icon_emojiArrowDown_img
聊天页面,长按消息后弹出的菜单页面中 emoji 菜单的箭头图标
chat_icon_emojiArrowUp_img
聊天页面,长按消息后弹出的菜单页面中 emoji 菜单的箭头图标
chat_ToolViewInputVoice_img
聊天页面,输入栏“语音/键盘”切换按钮的图标
chat_ToolViewInputVoiceHL_img
聊天页面,输入栏“语音/键盘”切换按钮高亮态的图标
chat_ToolViewEmotion_img
聊天页面,输入栏“表情/键盘”切换按钮的图标
chat_ToolViewEmotionHL_img
聊天页面,输入栏“表情/键盘”切换按钮高亮态的图标
chat_ToolViewKeyboard_img
聊天页面,输入栏“键盘”按钮的图标
chat_ToolViewKeyboardHL_img
聊天页面,输入栏“键盘”按钮高亮态的图标
chat_TypeSelectorBtn_Black_img
聊天页面,输入栏“更多”按钮的图标
chat_TypeSelectorBtnHL_Black_img
聊天页面,输入栏“更多”按钮高亮态的图标
颜色
样式 key
样式释义
chat_custom_order_message_desc_color
自定义订单消息描述文本的颜色
chat_custom_order_message_price_color
自定义订单消息价格文本的颜色
chat_custom_evaluation_message_desc_color
自定义评价消息描述文本的颜色
chat_controller_bg_color
聊天页面,背景颜色
chat_input_controller_bg_color
聊天页面,输入控制页面背景色
chat_input_bg_color
聊天页面,输入框背景颜色
chat_input_text_color
聊天页面,输入框文本颜色
chat_face_page_control_current_color
表情选项卡,分页控件,当前页的颜色
chat_face_page_control_color
表情选项卡,分页控件,默认颜色
chat_face_menu_select_color
聊天界面,表情菜单选中的颜色
chat_text_message_send_text_color
文本消息,发送消息时显示的文本颜色
chat_text_message_receive_text_color
文本消息,接收消息时显示的文本颜色
chat_file_message_bg_color
文件消息,背景颜色
chat_file_message_title_color
文件消息,标题文本颜色
chat_file_message_subtitle_color
文件消息,副标题文本颜色
chat_link_message_title_color
自定义链接消息标题颜色
chat_link_message_subtitle_color
自定义链接消息副标题颜色
chat_merge_message_bg_color
合并消息,背景颜色
chat_merge_message_title_color
合并消息,标题文本颜色
chat_merge_message_content_color
合并消息,内容文本颜色
chat_drop_down_color
聊天页面,向下箭头的颜色
chat_reply_message_content_text_color
回复消息内容文本颜色
chat_reply_message_quoteView_text_color
回复消息引用视图文本颜色
chat_reply_message_quoteView_bg_color
回复消息引用视图背景颜色
chat_reply_message_sender_text_color
回复消息发送方文本颜色
chat_reply_message_content_recv_text_color
回复消息接收方文本颜色
chat_reply_message_quoteView_recv_text_color
回复消息接收方引用视图文本颜色
chat_reference_message_content_text_color
引用消息内容文本颜色
chat_reference_message_quoteView_text_color
引用消息视图文本颜色
chat_reference_message_quoteView_bg_color
引用消息视图背景色
chat_reference_message_sender_text_color
引用消息发送者文本颜色
chat_reference_message_content_recv_text_color
引用消息内容接收方文本颜色
chat_reference_message_quoteView_recv_text_color
引用消息引用视图接收方文本颜色
chat_voice_message_send_duration_time_color
语音消息,发送消息时显示的时长文本颜色
chat_voice_message_recv_duration_time_color
语音消息,接收消息时显示的时长文本颜色
chat_voice_message_sender_voice_normal_img
语音消息,发送者语音图标
chat_voice_message_receiver_voice_normal_img
语音消息,接收者语音图标
chat_small_tongue_bg_color
聊天页面,“回到最新位置” 组件的背景色
chat_small_tongue_line_color
聊天页面,“回到最新位置” 组件的分割线颜色
chat_pop_menu_bg_color
聊天页面,长按消息后弹出的菜单页面的背景色
chat_pop_menu_text_color
聊天页面,长按消息后弹出的菜单页面的文本颜色

Conversation 页面样式

存储位置

Conversation 页面样式均存在于 TUIConversation 组件中,供 Conversation 页面使用。
您可以在 TUIConversation 组件的 TUIConversation/Resources/TUIConversationTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key。

UI 样式表


样式 key
样式释义
conversation_cell_bg_color
会话列表页面,普通会话的 UITableViewCell 的背景颜色
conversation_cell_top_bg_color
会话列表页面,置顶会话的 UITableViewCell 的背景颜色
conversation_bg_color
会话列表页面的背景颜色
conversation_message_not_disturb_img
会话列表页面,消息免打扰图标

Group 页面样式

存储位置

Group 页面样式均存在于 TUIGroup 组件中,供 Group 页面使用。
您可以在 TUIGroup 组件的 TUIGroup/Resources/TUIGroupTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key。

UI 样式表


样式 key
样式释义
group_modify_view_bg_color
群/个人信息修改界面,背景色
group_modify_container_view_bg_color
群/个人信息修改界面,容器背景色
group_modify_title_color
群/个人信息修改界面,标题文本颜色
group_modify_desc_color
群/个人信息修改界面,描述信息文本颜色
group_modify_input_bg_color
群/个人信息修改界面,输入框背景颜色
group_modify_input_text_color
群/个人信息修改界面,输入框文本颜色
group_modify_confirm_enable_bg_color
群/个人信息修改界面,确认按钮可点击状态的背景颜色
group_modify_confirm_disable_bg_color
群/个人信息修改界面,确认按钮不可点击状态的背景颜色

Contact 页面样式

存储位置

Contact 页面样式均存在于 TUIContact 组件中,供 Contact 页面使用。
您可以在 TUIContact 组件的 TUIContact/Resources/TUIContactTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key。

UI 样式表


样式 key
样式释义
contact_new_friend_img
通讯录页面,新的联系人图标
contact_blacklist_img
通讯录页面,黑名单图标
contact_public_group_img
通讯录页面,群聊图标
contact_add_contact_tips_text_color
添加好友页面,我的用户 ID 提示文本的颜色
contact_add_contact_nodata_tips_text_color
添加好友页面,查找的用户不存在时的提示文本颜色

Common 页面样式

Common 页面样式均存在于 TIMCommon 组件中,属于IM 组件公共模块,由各个组件引用。
您可以在 TIMCommon 组件的 TIMCommon/Resources/TIMCommonTheme.bundle 下的任一主题文件夹中的 manifest.plist 文件中看到对应样式的 key。
在基础样式中,TIMCommon 提供了公共的 UI 规范,例如:首选背景色、分割线颜色等。您可以通过修改基础样式来同时影响其他各个组件。