融云Android 2.0 IMkit UI样式更改

对融云Android SDK kit UI相关自定义做了整合方便开发者进行 UI更改

1 融云官网推荐的UI 自定义修改

点我跳转自定义文档

官网文档主要介绍了四点 以及 一些自定义

  • 会话列表自定义
  • 会话界面自定义
  • 输入框自定义
  • 会话扩展功能自定义

2 修改会话界面背景颜色布局 layout/rc_fr_messagelist.xml ListView 的 背景属性此处建议用 .9png 渐变色图片

效果如下:

融云Android 2.0 IMkit UI样式更改_第1张图片

3 圆形头像修改

rc_item_conversation.xml 会话列表
rc_item_message.xml 会话页面
的所有的 AsyncImageView 控件增加 如果有重复冲突的删除掉其他添加下方两处
app:RCShape=”circle”
android:scaleType=”centerCrop”

效果如下:

融云Android 2.0 IMkit UI样式更改_第2张图片

4 修改会话界面对话气泡 颜色 或者 形状需要替换布局文件中的气泡 此处需要是 .9png 图片

效果如下:

融云Android 2.0 IMkit UI样式更改_第3张图片
融云Android 2.0 IMkit UI样式更改_第4张图片

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 也能实现

如果你有更多更好的关于融云某些样式的修改上面没有提到 , 欢迎在下方留言 。 贡献自己的一份力量 , 让更多开发者因为你而受益!

你可能感兴趣的:(android,UI,style,样式,融云)