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