对融云Android SDK kit UI相关自定义做了整合方便开发者进行 UI更改
1 融云官网推荐的UI 自定义修改
官网文档主要介绍了四点 以及 一些自定义
- 会话列表自定义
- 会话界面自定义
- 输入框自定义
- 会话扩展功能自定义
2 修改会话界面背景颜色布局 layout/rc_fr_messagelist.xml ListView 的 背景属性此处建议用 .9png 渐变色图片
效果如下:
3 圆形头像修改
rc_item_conversation.xml 会话列表
rc_item_message.xml 会话页面
的所有的 AsyncImageView 控件增加 如果有重复冲突的删除掉其他添加下方两处
app:RCShape=”circle”
android:scaleType=”centerCrop”
效果如下:
4 修改会话界面对话气泡 颜色 或者 形状需要替换布局文件中的气泡 此处需要是 .9png 图片
效果如下:
5 通过修改Kit res 下 rc_theme.xml 来改变部分字体 size 和 样式
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="RCTheme" parent="@android:style/Theme.Light">
<item name="android:listDivider">@android:color/transparent</item>
<item name="android:listSelector">@android:color/transparent</item>
<item name="android:textColorPrimary">@color/rc_text_color_primary</item>
<item name="android:textColorSecondary">@color/rc_text_color_secondary</item>
<item name="android:textColorTertiary">@color/rc_text_color_tertiary</item>
<item name="android:textColorPrimaryInverse">@color/rc_text_color_primary_inverse</item>
<item name="android:windowNoTitle">true</item>
</style>
<style name="RCTheme.TextView" parent="android:Widget.TextView">
</style>
<style name="RCTheme.TextView.Small" parent="RCTheme.TextView">
</style>
<style name="RCTheme.TextView.Large" parent="RCTheme.TextView">
</style>
<style name="RCTheme.TextView.Medium" parent="RCTheme.TextView">
</style>
<style name="RCTheme.TextView.Large.Inverse" parent="RCTheme.TextView.Large">
<item name="android:textColor">@color/rc_text_color_primary_inverse</item>
</style>
<style name="RCTheme.TextView.New" parent="RCTheme.TextView">
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/rc_text_color_primary_inverse</item>
<item name="android:background">@drawable/rc_unread_count_bg</item>
</style>
<style name="RcDialog" parent="@android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowNoTitle">false</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:background">@android:color/transparent</item>
</style>
<!--
size:24px color:#ffffff
1、会话页面时间 字体
2、InformationNotificationMessage 字体
3、DiscussionNotificationMessage 字体
-->
<style name="RCTheme.Notification" parent="RCTheme.TextView">
<item name="android:background">@color/rc_notification_bg</item>
<item name="android:textSize">12sp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">7dp</item>
<item name="android:paddingBottom">7dp</item>
<item name="android:textColor">@color/rc_text_color_primary_inverse</item>
</style>
<!--
size:32px color:#353535
1、TextMessage 字体
2、RichContentMessage 标题字体
3、会话列表 title
-->
<style name="RCTheme.Message.TextView" parent="RCTheme.TextView">
<item name="android:textSize">16sp</item>
<item name="android:textColor">@color/rc_text_color_primary</item>
</style>
<!--
size:24px color:#838383
消息的用户名
-->
<style name="RCTheme.Message.Username.TextView" parent="RCTheme.TextView">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/rc_message_user_name</item>
<item name="android:paddingLeft">8dp</item>
</style>
<!--
size:28px color:#999999
1、RichContentMessage content 字体
2、会话列表 item message 字体
3、异常弹出条 字体
-->
<style name="RCTheme.Message.RichContent.TextView" parent="RCTheme.TextView">
<item name="android:textSize">13sp</item>
<item name="android:textColor">@color/rc_text_color_secondary</item>
</style>
</resources>
6 常用布局文件释义
会话列表 | 会话界面 |
---|---|
rc_fr_conversationlist.xml | rc_fr_messagelist.xml |
会话列表item | 会话界面item |
rc_item_conversation.xml | rc_item_message.xml |
开发者贡献:
会话列表 item 的颜色修改 : rc_text_color_primary_inverse
很多效果 和 样式的修改 不仅仅局限于上面这些方法, 比如我需要去改一个样式 我把 SDK kit 自带的 res 图片替换成和自己APP 主题符合的图片就能实现 , 再比如需要隐藏某个布局 但是无法对源码进行修改可能通过 Gone 或者更改 witht higth 为 0dp 也能实现
如果你有更多更好的关于融云某些样式的修改上面没有提到 , 欢迎在下方留言 。 贡献自己的一份力量 , 让更多开发者因为你而受益!