智齿客服SDK对接集成文档V2.2.2（高度自定义UI）
为了咨询客服窗口的界面风格能与集成智齿客服 SDK 的 App 整体统一，智齿客服 SDK 提供了简洁的 UI 自定义配置选项，包括两种UI自定义方式：接口传入参数、修改资源文件。
智齿客服SDK允许对界面头部、聊天部分、底部栏进行UI自定义，比如图片，背景，文字大小以及颜色。
注意：本章文案的阅读对象是熟悉布局修改的Android开发人员。由于本lib库是UI库，每次升级都可能对UI做较大变动，因此如果本次自定义了一些图片等资源文件，建议不直接修改 lib库里的资源文件，而是找到对应资源文件，将其修改后拷贝到主工程目录中，如果资源名称相同的情况下，开发工具会自 动使用主工程下的资源，使用这种方式能极大的提高维护效率。
一、接口传入参数
您只需通过设置对象Information的属性color来实现UI进行自定义，自定义项目参考“二、修改资源文件”。
需注意的是：如果设置这个颜色，以下部分在res中修改无效。如果想都在res修改，此处传空值即可。
二、修改资源文件
1 资源一览
布局文件（layout）
| 文件名 | 功能说明 | |
|---|---|---|
| sobot_chat_activity.xml | 聊天界面 | |
| sobot_layout_titlebar.xml | 聊天界面顶部导航栏 | |
| sobot_layout_chat_bottom.xml | 聊天界面底部栏 | |
| sobot_upload_layout.xml | 聊天界面底部选择图像功能 | |
| sobot_list_item_wo_text.xml | 对话中客户文字类型布局 | |
| sobot_list_item_wo_image.xml | 对话中客户图片类型布局 | |
| sobot_list_item_wo_voice.xml | 对话中客户语音类型布局 | |
| sobot_list_item_robot_text.xml | 对话中机器人(人工客服)文字类型布局 | |
| sobot_other_dialog.xml | 结束对话窗口 | |
| sobot_dialog.xml | 满意度评价窗口 | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 文件名 | 功能说明 | |
|---|---|---|
| sobot_chat_activity.xml | 聊天界面 | |
| sobot_layout_titlebar.xml | 聊天界面顶部导航栏 | |
| sobot_layout_chat_bottom.xml | 聊天界面底部栏 | |
| sobot_upload_layout.xml | 聊天界面底部选择图像功能 | |
| sobot_list_item_wo_text.xml | 对话中客户文字类型布局 | |
| sobot_list_item_wo_image.xml | 对话中客户图片类型布局 | |
| sobot_list_item_wo_voice.xml | 对话中客户语音类型布局 | |
| sobot_list_item_robot_text.xml | 对话中机器人(人工客服)文字类型布局 | |
| sobot_other_dialog.xml | 结束对话窗口 | |
| sobot_dialog.xml | 满意度评价窗口 | |
配置文件
| 文件名 | 功能说明 | |
|---|---|---|
| colors.xml | 颜色修改 | |
| dimens.xml | 字体大小，图片显示大小 | |
| strings.xml | 文案修改 | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 文件名 | 功能说明 | |
|---|---|---|
| colors.xml | 颜色修改 | |
| dimens.xml | 字体大小，图片显示大小 | |
| strings.xml | 文案修改 | |
资源文件夹
| 文件夹名 | 功能说明 | |
|---|---|---|
| drawable-xhdpi | 存放UI布局使用的图片资源文件 | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 文件夹名 | 功能说明 | |
|---|---|---|
| drawable-xhdpi | 存放UI布局使用的图片资源文件 | |
2 资源定义详细说明
顶部导航栏
- layout: sobot_layout_titlebar.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 背景颜色 | colors.xml sobot_color_title_bar_bg | ||
| 中间文字 | TextView: sobot_text_title | ||
| 中间文字大小 | dimens.xml sobot_text_title | ||
| 中间文字颜色 | colors.xml sobot_color_title_bar_title | ||
| 返回按钮 | TextView: sobot_tv_left | ||
| 返回按钮文字 | sobot_back | ||
| 返回按钮文字颜色 | sobot_bg_white | ||
| 返回按钮文字大小 | dimens.xml sobot_text_title | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 背景颜色 | colors.xml sobot_color_title_bar_bg | ||
| 中间文字 | TextView: sobot_text_title | ||
| 中间文字大小 | dimens.xml sobot_text_title | ||
| 中间文字颜色 | colors.xml sobot_color_title_bar_title | ||
| 返回按钮 | TextView: sobot_tv_left | ||
| 返回按钮文字 | sobot_back | ||
| 返回按钮文字颜色 | sobot_bg_white | ||
| 返回按钮文字大小 | dimens.xml sobot_text_title | ||
聊天区域背景
- layout: sobot_chat_activity.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 聊天区域背景颜色 | colors.xml sobot_lv_message_bg | DropdownListView: sobot_lv_message | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 聊天区域背景颜色 | colors.xml sobot_lv_message_bg | DropdownListView: sobot_lv_message | |
提示气泡（时间、接通客服等提示）
- 时间、接通客服提示：sobot_toast_selector.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 提示气泡 | TextView: sobot_center_Remind_note | ||
| 时间提示气泡样式 | style:sobot_center_remind_time | ||
| 消息提示气泡样式 | style:sobot_center_remind_note | ||
| 提示气泡文字颜色 | colors：sobot_listview_remind_text_color | ||
| 超链颜色 | colors:sobot_color_link_remind | ||
| 提示气泡文字大小 | dimens:sobot_listview_remind_text_size | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 提示气泡 | TextView: sobot_center_Remind_note | ||
| 时间提示气泡样式 | style:sobot_center_remind_time | ||
| 消息提示气泡样式 | style:sobot_center_remind_note | ||
| 提示气泡文字颜色 | colors：sobot_listview_remind_text_color | ||
| 超链颜色 | colors:sobot_color_link_remind | ||
| 提示气泡文字大小 | dimens:sobot_listview_remind_text_size | ||
客服消息（文字类型、图片类型）
文字类型 layout: sobot_chat_msg_item_txt_l.xml
图片类型 layout: sobot_chat_msg_item_imgt_l.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 气泡背景 | drawable-xhdpi sobot_chatfrom_bg_normal.9.png | LinearLayout: sobot_ll_content | |
| 文字颜色 | colors.xml robot_msg_text_color | TextView: sobot_msg | |
| 超链颜色 | colors.xml sobot_color_rlink | ||
| 文字大小 | dimens.xml robot_msg_text_size | ||
| 阅读全文 | colors.xml sobot_color_read_all | TextView:sobot_rendAllText | |
| 向导问题颜色 (非历史记录) | colors.xml sobot_color_suggestion +对话框 | ||
| 向导问题颜色(历史记录) | colors.xml sobot_color_suggestion_history | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 气泡背景 | drawable-xhdpi sobot_chatfrom_bg_normal.9.png | LinearLayout: sobot_ll_content | |
| 文字颜色 | colors.xml robot_msg_text_color | TextView: sobot_msg | |
| 超链颜色 | colors.xml sobot_color_rlink | ||
| 文字大小 | dimens.xml robot_msg_text_size | ||
| 阅读全文 | colors.xml sobot_color_read_all | TextView:sobot_rendAllText | |
| 向导问题颜色 (非历史记录) | colors.xml sobot_color_suggestion +对话框 | ||
| 向导问题颜色(历史记录) | colors.xml sobot_color_suggestion_history | ||
用户消息（文字类型、图片类型、语音类型）
文字类型 layout: sobot_chat_msg_item_txt_r.xml
图片类型 layout:sobot_chat_msg_item_imgt_r.xml
语音类型 layout: sobot_chat_msg_item_audiot_r.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 气泡背景 | drawable-xhdpi sobot_chatto_bg_normal.9.png | LinearLayout: sobot_ll_content | |
| 文字颜色 | colors.xml sobot_msg_text_color | TextView: sobot_msg | |
| 超链颜色 | colors.xml sobot_color_link | ||
| 文字大小 | dimens.xml sobot_msg_text_size | ||
| 语音时长 | TextView: sobot_voiceTimeLong | ||
| 语音时长字体颜色 | colors.xml sobot_msg_voice_text_color | ||
| 语音时长字体大小 | dimens.xml sobot_msg_voice_text_size | ||
| 播放语音帧动画 | ImageView: sobot_iv_voice | ||
| 播放语音默认背景 | drawable-xhdpi sobot_chatto_bg_normal.9.png | ||
| 帧动画的资源文件 | drawable-xhdpi sobot_pop_voice_send_anime_1.png(以 sobot_pop_voice_send_anime_开头多张) | drawable:sobot_voice_to_icon.xml | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 气泡背景 | drawable-xhdpi sobot_chatto_bg_normal.9.png | LinearLayout: sobot_ll_content | |
| 文字颜色 | colors.xml sobot_msg_text_color | TextView: sobot_msg | |
| 超链颜色 | colors.xml sobot_color_link | ||
| 文字大小 | dimens.xml sobot_msg_text_size | ||
| 语音时长 | TextView: sobot_voiceTimeLong | ||
| 语音时长字体颜色 | colors.xml sobot_msg_voice_text_color | ||
| 语音时长字体大小 | dimens.xml sobot_msg_voice_text_size | ||
| 播放语音帧动画 | ImageView: sobot_iv_voice | ||
| 播放语音默认背景 | drawable-xhdpi sobot_chatto_bg_normal.9.png | ||
| 帧动画的资源文件 | drawable-xhdpi sobot_pop_voice_send_anime_1.png(以 sobot_pop_voice_send_anime_开头多张) | drawable:sobot_voice_to_icon.xml | |
满意度评价窗口
- layout:sobot_dialog.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 提交评价按钮背景 | rawable sobot_subbutton_shap | Button | |
| 提交评价按钮文字颜色 | colors.xml sobot_text_btn_color | Button | |
| 评价选择默认背景色 | drawable sobot_login_edit_nomal | ||
| 评价选择默认文字颜色 | colors.xml sobot_color_evaluate_text_normal | ||
| 评价选择选中背景色 | drawable sobot_login_edit_pressed | ||
| 评价选择选中文字颜色 | colors.xml sobot_color_evaluate_text_pressed | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 提交评价按钮背景 | rawable sobot_subbutton_shap | Button | |
| 提交评价按钮文字颜色 | colors.xml sobot_text_btn_color | Button | |
| 评价选择默认背景色 | drawable sobot_login_edit_nomal | ||
| 评价选择默认文字颜色 | colors.xml sobot_color_evaluate_text_normal | ||
| 评价选择选中背景色 | drawable sobot_login_edit_pressed | ||
| 评价选择选中文字颜色 | colors.xml sobot_color_evaluate_text_pressed | ||
结束对话窗口
- layout:sobot_other_dialog.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 是(否)按钮文字颜色 | drawable sobot_text_selector | Button | |
| 是(否)按钮背景 | drawable sobot_button_selector | Button | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 是(否)按钮文字颜色 | drawable sobot_text_selector | Button | |
| 是(否)按钮背景 | drawable sobot_button_selector | Button | |
输入栏和加号菜单
底部 layout: sobotlayoutchat_bottom.xml
图片选择 layout: sobot_upload_layout.xml
| 配置项 | 参数名 | 备注 | | | :--- | :--- | :--- | :--- | | 背景 | colors.xml sobot_color_bottom_bg | LinearLayout: sobot_rl_bottom | | | 人工转接按钮 | drawable-xhdpi sobot_icon_manualwork_pressed.png，sobot_icon_manualwork_normal.png | Button: sobot_btn_set_mode_rengong | | | 键盘按钮 | drawable-xhdpi sobot_keyboard_pressed.png, sobot_keyboard_normal.png | Button: sobot_btn_model_edit | | | 语音按钮 | drawable-xhdpi sobot_icon_vioce_pressed.png，sobot_icon_vioce_normal.png- xhdpi | Button: sobot_btn_model_voice | | | 上传图片 | drawable-xhdpi sobot_picture_pressed.png, soot_picture_normal.png | Button: sobot_btn_upload_view | | | 发送 | drawble sobot_btn_sendmsg_selector.xml | Button: sobot_btn_send | | | 输入框背景色 | colors.xml sobot_color_bottom_edittext_text | ContainsEmojiEditText:sobot_et_sendmessage | | | 按住说话按钮父背景 | drawble sobot_chat_press_speak_btn.xml | LinearLayout:sobot_btn_press_to_speak | | | 按住说话按钮文字颜色 | colors.xml sobot_color_bottom_btn_voice | TextView:sobottxtspeak_content | | | 按住说话按钮文字大小 | dimens .xml sobot_text_font_normal | TextView:sobot_txt_speak_content | | | | | | |
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 背景 | colors.xml sobot_color_bottom_bg | LinearLayout: sobot_rl_bottom | |
| 人工转接按钮 | drawable-xhdpi sobot_icon_manualwork_pressed.png，sobot_icon_manualwork_normal.png | Button: sobot_btn_set_mode_rengong | |
| 键盘按钮 | drawable-xhdpi sobot_keyboard_pressed.png, sobot_keyboard_normal.png | Button: sobot_btn_model_edit | |
| 语音按钮 | drawable-xhdpi sobot_icon_vioce_pressed.png，sobot_icon_vioce_normal.png- xhdpi | Button: sobot_btn_model_voice | |
| 上传图片 | drawable-xhdpi sobot_picture_pressed.png, soot_picture_normal.png | Button: sobot_btn_upload_view | |
| 发送 | drawble sobot_btn_sendmsg_selector.xml | Button: sobot_btn_send | |
| 输入框背景色 | colors.xml sobot_color_bottom_edittext_text | ContainsEmojiEditText:sobot_et_sendmessage | |
| 按住说话按钮父背景 | drawble sobot_chat_press_speak_btn.xml | LinearLayout:sobot_btn_press_to_speak | |
| 按住说话按钮文字颜色 | colors.xml sobot_color_bottom_btn_voice | TextView:sobottxtspeak_content | |
| 按住说话按钮文字大小 | dimens .xml sobot_text_font_normal | TextView:sobot_txt_speak_content | |
图片选择
图片选择 layout: sobot_upload_layout.xml
背景 drawable: sobot_linearlayout_border.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 相册按钮背景 | drawable sobot_login_edit_nomal1.xml | TextView:sobot_btn_picture | |
| 相册按钮中小图 | drawable-xhdpi sobot_uploadpicture.png | ||
| 相册按钮文字颜色 | color.xml sobot_color_bottom_upload_btn_color | ||
| 相册按钮文字大小 | dimens .xml sobot_text_font_small | ||
| 拍照 | TextView:sobot_btn_take_picture drawable sobot_login_edit_nomal1.xml | ||
| 拍照按钮中小图 | drawable-xhdpi sobot_takephoto.png | ||
| 拍照按钮文字颜色 | color.xml sobot_color_bottom_upload_btn_color | ||
| 拍照按钮文字大小 | dimens .xml sobot_text_font_small | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 相册按钮背景 | drawable sobot_login_edit_nomal1.xml | TextView:sobot_btn_picture | |
| 相册按钮中小图 | drawable-xhdpi sobot_uploadpicture.png | ||
| 相册按钮文字颜色 | color.xml sobot_color_bottom_upload_btn_color | ||
| 相册按钮文字大小 | dimens .xml sobot_text_font_small | ||
| 拍照 | TextView:sobot_btn_take_picture drawable sobot_login_edit_nomal1.xml | ||
| 拍照按钮中小图 | drawable-xhdpi sobot_takephoto.png | ||
| 拍照按钮文字颜色 | color.xml sobot_color_bottom_upload_btn_color | ||
| 拍照按钮文字大小 | dimens .xml sobot_text_font_small | ||
开始新会话(LinearLayout:sobot_ll_restart_talk)
- layout: sobot_layout_chat_bottom.xml
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 背景 | drawable sobot_chat_press_speak_btn1.xml | ||
| 文字颜色 | color.xml sobot_txt_restart_talk | ||
<div> 您需要开启javascript功能才能正常使用表格 </div>
| 配置项 | 参数名 | 备注 | |
|---|---|---|---|
| 背景 | drawable sobot_chat_press_speak_btn1.xml | ||
| 文字颜色 | color.xml sobot_txt_restart_talk | ||