diff --git a/docs/.vuepress/public/images/uikit/chatuikit/android/custom_chat.png b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_chat.png
new file mode 100644
index 000000000..8b8bf5685
Binary files /dev/null and b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_chat.png differ
diff --git a/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_details.png b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_details.png
new file mode 100644
index 000000000..98bff612e
Binary files /dev/null and b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_details.png differ
diff --git a/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_list.png b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_list.png
new file mode 100644
index 000000000..956a8386c
Binary files /dev/null and b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_contact_list.png differ
diff --git a/docs/.vuepress/public/images/uikit/chatuikit/android/custom_conversation_list.png b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_conversation_list.png
new file mode 100644
index 000000000..40bc3bab7
Binary files /dev/null and b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_conversation_list.png differ
diff --git a/docs/.vuepress/public/images/uikit/chatuikit/android/custom_group_details.png b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_group_details.png
new file mode 100644
index 000000000..49009e5fe
Binary files /dev/null and b/docs/.vuepress/public/images/uikit/chatuikit/android/custom_group_details.png differ
diff --git a/docs/uikit/chatuikit/android/chatuikit_chat.md b/docs/uikit/chatuikit/android/chatuikit_chat.md
index 0b7980d39..b4ca88d03 100644
--- a/docs/uikit/chatuikit/android/chatuikit_chat.md
+++ b/docs/uikit/chatuikit/android/chatuikit_chat.md
@@ -41,7 +41,11 @@ class ChatActivity: AppCompactActivity() {
![img](/images/uikit/chatuikit/android/buble1.png =500x900)
-## 自定义界面概览
+## 自定义聊天页面概览
+
+你可以配置聊天页面的标题栏、消息列表项和输入菜单等。
+
+![img](/images/uikit/chatuikit/android/custom_chat.png)
### 通过 EaseChatFragment.Builder 自定义设置
@@ -293,8 +297,6 @@ override fun onChatExtendMenuItemClick(view: View?, itemId: Int): Boolean {
### 设置消息长按后的菜单项
-TODO:// 设置消息长按后的菜单项// 新增的这个标题下的内容可以移掉。
-
- 增加自定义菜单条目
```kotlin
@@ -303,6 +305,14 @@ binding?.let {
}
```
+- 显示或隐藏指定菜单
+
+```kotlin
+binding?.let {
+ it.findItemVisible(itemId: Int, visible: Boolean)
+}
+```
+
`EaseChatLayout` 提供的长按菜单方法如下表所示:
| 方法 | 描述 |
@@ -414,15 +424,15 @@ binding?.let {
}
```
-## 自定义界面示例
+## 自定义聊天页面样式
你可以配置聊天页面的标题栏、消息列表项等。以下设置均以使用或继承 `EaseChatFragment` 为前提条件。
![img](/images/uikit/chatuikit/ios/custom_chat.png)
-### 标题栏
+### 设置标题栏
-聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议自定义标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[自定义会话列表页面的标题栏](chatuikit_custom_conversation_list.html#自定义标题栏)。
+聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议自定义标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[设置会话列表页面的标题栏](chatuikit_custom_conversation_list.html#设置标题栏)。
### 消息列表项
@@ -564,6 +574,10 @@ class CustomMessageAdapter: EaseMessagesAdapter() {
builder.setCustomAdapter(CustomMessageAdapter())
```
+### 设置头像和昵称
+
+关于设置头像和昵称,详见[用户自定义信息文档中的介绍](chatuikit_userinfo.html#设置会话头像和昵称)。
+
#### 设置列表相关事件
`EaseChatFragment#Builder` 设置消息条目的点击事件监听,包括气泡区域及头像的点击及长按事件。
diff --git a/docs/uikit/chatuikit/android/chatuikit_contactlist.md b/docs/uikit/chatuikit/android/chatuikit_contactlist.md
index f7f078d94..7f5cb480e 100644
--- a/docs/uikit/chatuikit/android/chatuikit_contactlist.md
+++ b/docs/uikit/chatuikit/android/chatuikit_contactlist.md
@@ -25,9 +25,13 @@ class ContactListActivity: AppCompactActivity() {
}
```
-## 自定义界面
+## 自定义联系人列表页面
-### 通过 EaseContactsListFragment.Builder 自定义设置
+你可以设置联系人页面标题栏、联系人列表 Header 和联系人列表条目。
+
+![img](/images/uikit/chatuikit/android/custom_contact_list.png)
+
+### 通过 EaseContactsListFragment.Builder 自定义
`EaseContactsListFragment` 提供了 Builder 构建方式,方便开发者进行一些自定义设置。目前提供的设置项如下:
@@ -75,16 +79,14 @@ EaseContactsListFragment.Builder()
| setCustomAdapter() | 设置自定义的适配器,默认为 `EaseContactListAdapter`。 |
| setCustomFragment() | 设置自定义聊天 Fragment,需要继承自 `EaseContactsListFragment`。 |
-### 自定义标题栏
+### 设置标题栏
-聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议自定义标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[自定义会话列表页面的标题栏](chatuikit_custom_conversation_list.html#自定义标题栏)。
+聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议自定义标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[自定义会话列表页面的标题栏](chatuikit_custom_conversation_list.html#设置标题栏)。
### 自定义联系人列表 Header
本节中的自定义联系人列表 header 基于使用 `EaseContactsListFragment`。
-### 设置联系人列表 Header List 数据源
-
你可以通过 `EaseContactsListFragment#Builder中的setHeaderItemList` 设置联系人列表 Header List 数据源。
下面的示例代码展示如何设置数据项:
@@ -118,11 +120,7 @@ EaseContactsListFragment.Builder()
```
-![img](/images/uikit/chatuikit/.png)
-
-### 自定义联系人列表
-
-#### 添加自定义联系人布局
+### 添加自定义联系人布局
开发者可以继承 `EaseContactListAdapter` 实现自己的 `CustomContactListAdapter`,然后将 `CustomContactListAdapter` 设置到 `EaseContactsListFragment#Builder#setCustomAdapter` 中。
@@ -152,7 +150,7 @@ builder.setCustomAdapter(CustomContactListAdapter)
![img](/images/uikit/chatuikit/android/group_creating.png =350x600)
-#### 设置成可选择的联系人列表
+### 设置成可选择的联系人列表
例如,创建群组时需添加多个用户,可点击联系人对应的复选框进行选择。
@@ -162,10 +160,10 @@ builder.setSearchType(EaseSearchType.SELECT_USER)
![img](/images/uikit/chatuikit/android/contactlist_configurable.png)
-#### 设置联系人头像
+### 设置联系人头像样式
```kotlin
- // ease_configures.xml style文件 支持修改以下配置
+ // ease_configures.xml style 文件 支持修改以下配置:
2
@@ -176,7 +174,7 @@ builder.setSearchType(EaseSearchType.SELECT_USER)
@color/ease_color_primary
```
-## 事件监听 // TODO:// 是自定义界面的一部分?
+## 事件监听
```kotlin
EaseContactsListFragment.Builder()
@@ -187,8 +185,8 @@ EaseContactsListFragment.Builder()
.build()
```
-| 方法 | 描述 |
-|----------------------------------|-----------------------------------------------------------------------------------------------|
+| 方法 | 描述 |
+|----------------------|----------------|
| setOnHeaderItemClickListener() | 设置列表头部 Item 点击事件。 |
| setOnUserListItemClickListener() | 设置列表条目点击事件。 |
| setOnItemLongClickListener() | 设置条目长按事件监听器。 |
diff --git a/docs/uikit/chatuikit/android/chatuikit_conversation.md b/docs/uikit/chatuikit/android/chatuikit_conversation.md
index 7beb3564c..52ec6f5f9 100644
--- a/docs/uikit/chatuikit/android/chatuikit_conversation.md
+++ b/docs/uikit/chatuikit/android/chatuikit_conversation.md
@@ -35,11 +35,11 @@ class ConversationListActivity: AppCompactActivity() {
}
```
-## 自定义界面
+## 自定义会话列表页面
你可以配置会话列表页面的标题栏、会话列表项。
-![img](/images/uikit/chatuikit/ios/custom_conversation_list.png)
+![img](/images/uikit/chatuikit/android/custom_conversation_list.png)
### 通过 EaseConversationListFragment.Builder 自定义设置
@@ -116,9 +116,9 @@ builder.setCustomFragment(customConversationListFragment);
![img](/images/uikit/chatuikit/android/conversation_list_custom.png)
-### 自定义标题栏
+### 设置标题栏
-会话列表页面、聊天页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果会话列表页面的标题栏不满足需求,建议根据自身需求自定义标题栏。
+会话列表页面、聊天页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果会话列表页面的标题栏不满足需求,建议根据自身需求设置标题栏。
会话列表页面的标题栏包含左、中、右三个区域,本节介绍如何在使用 `EaseConversationListFragment` 的前提下配置这些区域。
@@ -176,7 +176,8 @@ binding?.titleConversations?.setTitleEndDrawable(R.drawable.conversation_title)
#### 设置右侧显示图标
一般情况下,右侧会支持设置多个图标。我们采用设置 Menu 的方式进行设置。
-EaseConversationListFragment 中有默认实现一个 defaultMenu() 的方法 添加默认的 menu 菜单。若默认菜单不满足需求,可以替换为自己的 menu 菜单,重写 defaultMenu() 方法。
+
+`EaseConversationListFragment` 中有默认实现一个 `defaultMenu()` 的方法 添加默认的 menu 菜单。若默认菜单不满足需求,可以替换为自己的 menu 菜单,重写 `defaultMenu()` 方法。
```kotlin
// 添加 menu
@@ -205,7 +206,7 @@ EaseConversationListFragment 中有默认实现一个 defaultMenu() 的方法
```
-#### 设置标题栏返回按钮和事件监听
+#### 设置返回按钮和事件监听
```kotlin
@@ -228,13 +229,13 @@ binding?.titleConversations?.setBackgroundColor(ContextCompat.getColor(mContext,
![img](/images/uikit/chatuikit/ios/configurationitem/conversation/Appearance_conversation_list_more.png)
-### 搜索区域 // TODO:会话列表、联系人列表、历史消息
+### 设置搜索区域
#### 设置是否需要搜索功能
```kotlin
-// 是否使用默认的搜索功能(跳转 `EaseSearchActivity` 搜索页面 目前支持搜索:用户、会话、消息、黑名单用户)。
+// 是否使用默认的搜索功能(跳转 EaseSearchActivity 搜索页面 目前支持搜索用户、会话、消息、黑名单用户。
// true:是;(默认) false: 否。
EaseConversationListFragment.Builder().useSearchBar(true)
diff --git a/docs/uikit/chatuikit/android/chatuikit_custom_contact_details.md b/docs/uikit/chatuikit/android/chatuikit_custom_contact_details.md
new file mode 100644
index 000000000..f99ead765
--- /dev/null
+++ b/docs/uikit/chatuikit/android/chatuikit_custom_contact_details.md
@@ -0,0 +1,63 @@
+# 设置联系人详情页面
+
+你可以配置联系人详情页面的标题栏和中间的按钮等。
+
+![img](/images/uikit/chatuikit/ios/custom_contact_details.png)
+
+## 设置标题栏
+
+聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议设置标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[设置会话列表页面的标题栏](chatuikit_custom_conversation_list.html#设置标题栏)。
+
+## 自定义按钮
+
+联系人详情页面中按钮数据源可配项以及按钮点击事件,例如,添加音频通话、视频通话按钮。默认情况下,`super.getDetailItem()` 包含聊天和搜索。
+
+```kotlin
+ // 实现 MyContactDetailActivity 继承 EaseContactDetailsActivity 并重写以下方法
+
+ override fun getDetailItem(): MutableList? {
+ val list = super.getDetailItem()
+ val audioItem = EaseMenuItem(
+ title = getString(R.string.detail_item_audio),
+ resourceId = R.drawable.ease_phone_pick,
+ menuId = R.id.contact_item_audio_call,
+ titleColor = ContextCompat.getColor(this, com.hyphenate.easeui.R.color.ease_color_primary),
+ order = 2
+ )
+
+ val videoItem = EaseMenuItem(
+ title = getString(R.string.detail_item_video),
+ resourceId = R.drawable.ease_video_camera,
+ menuId = R.id.contact_item_video_call,
+ titleColor = ContextCompat.getColor(this, com.hyphenate.easeui.R.color.ease_color_primary),
+ order = 3
+ )
+ list?.add(audioItem)
+ list?.add(videoItem)
+ return list
+ }
+
+ override fun onMenuItemClick(item: EaseMenuItem?, position: Int): Boolean {
+ item?.let {
+ when(item.menuId){
+ R.id.contact_item_audio_call -> {
+ CallKitManager.startSingleAudioCall(user?.userId)
+ return true
+ }
+ R.id.contact_item_video_call -> {
+ CallKitManager.startSingleVideoCall(user?.userId)
+ return true
+ }
+ else -> {
+ return super.onMenuItemClick(item, position)
+ }
+ }
+ }
+ return false
+ }
+
+
+```
+
+
+
\ No newline at end of file
diff --git a/docs/uikit/chatuikit/android/chatuikit_custom_group_details.md b/docs/uikit/chatuikit/android/chatuikit_custom_group_details.md
new file mode 100644
index 000000000..96a8def0a
--- /dev/null
+++ b/docs/uikit/chatuikit/android/chatuikit_custom_group_details.md
@@ -0,0 +1,60 @@
+# 设置群组详情页面
+
+你可以配置群组详情页面的标题栏和中间的按钮等。
+
+![img](/images/uikit/chatuikit/android/custom_group_details.png)
+
+## 设置标题栏
+
+聊天页面、会话列表页面、联系人列表页面、群详情页面和联系人详情页面的标题栏均使用 `EaseTitleBar`。如果聊天页面的标题栏不满足需求,建议设置标题栏。关于标题栏中的标题、头像、背景色、标题栏右侧按钮的显示图片和左侧的头像,详见[设置会话列表页面的标题栏](chatuikit_custom_conversation_list.html#设置标题栏)。
+
+## 自定义按钮
+
+群组详情页面中按钮数据源可配项以及按钮点击事件,例如,添加音频通话、视频通话按钮。默认情况下,`super.getDetailItem()` 包含聊天和搜索。
+
+```kotlin
+ // 实现 MyGroupDetailActivity 继承 EaseGroupDetailActivity 并重写以下方法
+
+ override fun getDetailItem(): MutableList? {
+ val list = super.getDetailItem()
+ val audioItem = EaseMenuItem(
+ title = getString(R.string.detail_item_audio),
+ resourceId = R.drawable.ease_phone_pick,
+ menuId = R.id.contact_item_audio_call,
+ titleColor = ContextCompat.getColor(this, com.hyphenate.easeui.R.color.ease_color_primary),
+ order = 2
+ )
+
+ val videoItem = EaseMenuItem(
+ title = getString(R.string.detail_item_video),
+ resourceId = R.drawable.ease_video_camera,
+ menuId = R.id.contact_item_video_call,
+ titleColor = ContextCompat.getColor(this, com.hyphenate.easeui.R.color.ease_color_primary),
+ order = 3
+ )
+ list?.add(audioItem)
+ list?.add(videoItem)
+ return list
+ }
+
+ override fun onMenuItemClick(item: EaseMenuItem?, position: Int): Boolean {
+ item?.let {
+ when(item.menuId){
+ R.id.contact_item_audio_call -> {
+ CallKitManager.startSingleAudioCall(user?.userId)
+ return true
+ }
+ R.id.contact_item_video_call -> {
+ CallKitManager.startSingleVideoCall(user?.userId)
+ return true
+ }
+ else -> {
+ return super.onMenuItemClick(item, position)
+ }
+ }
+ }
+ return false
+ }
+
+
+```
\ No newline at end of file