集成会话消息界面 - IM 即时通讯 UIKit

开发者中心

IM 即时通讯 UIKit

集成开发

集成会话消息界面

更新时间： 2024/07/26 13:39:23

IM UIKit 提供两种会话界面（chatkit-ui）的集成方式，即基于 Activity 集成和基于 Fragment 集成。通过这两种方式集成的会话界面，都支持个性化定制界面 UI。

效果展示

会话消息界面效果.png

前提条件

已实现登录。

实现方法

集成方式	说明
基于 Activity 集成	使用 IM UIKit 提供的默认会话界面。界面支持一个标题栏和一个会话。在 IM UIKit 内部已经为该界面定义了跳转路径：其他界面需要跳转到会话时，将跳转到默认的会话 Activity。
基于 Fragment 集成	在您应用的 Activity 中集成 IM UIKit 提供的会话 Fragment。注意：您需要将自定义会话 Activity 注册到 IMUIKit 的路由 XKitRouter 中，从而将默认的会话 Activity 替换为自定义会话 Activity 。

基于Activity 集成

IM UIKit 提供默认单聊和群聊会话 Activity 的类名为ChatP2PActivity和ChatTeamActivity。

您可以使用 IM UIKit 提供的路由XKitRouter跳转到默认会话界面ChatP2PActivity或ChatTeamActivity。

XKitRouter原型-单聊

java//跳转到单聊界面
XKitRouter.withKey(RouterConstant.PATH_CHAT_P2P_PAGE)
        .withParam(RouterConstant.CHAT_ID_KRY, userId).withContext(context).navigate();

XKitRouter单聊参数说明

参数	类型	说明
`RouterConstant.PATH_CHAT_P2P_PAGE`	String	IM UIKit 默认注册的会话界面地址
`userId`	String	用户的Account id
`context`	Context	Activity 上下文

XKitRouter原型-群聊

java//跳转到群聊界面
XKitRouter.withKey(RouterConstant.PATH_CHAT_TEAM_PAGE).withParam(CHAT_KRY, teamInfo).withContext(context).navigate();

XKitRouter参数说明

参数	类型	说明
`RouterConstant.PATH_CHAT_TEAM_PAGE`	String	IM UIKit 默认注册的会话界面地址
`teamInfo`	V2NIMTeam	IM SDK 群组信息实体类
`context`	Context	Activity 上下文

基于 Fragment 集成

集成单聊界面

IM UIKit 提供的单聊 Fragment 的类名为ChatP2PFragment。您可以在应用的 Activity 中集成ChatP2PFragment从而构建您的单聊界面。

本节假设您的应用的 Acitiviy 为MyChatP2PActivity，进行相应说明。

创建您的应用 Activity 的布局文件my_chat_p2p_activity.xml。

示例代码如下：

java<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="MissingDefaultResource">

//用来放置Fragment
    <FrameLayout
        android:id="@+id/chat_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

创建 Activity。本步骤以应用的 Acitivity 采用视图绑定（ViewBinding）模式为例进行说明。

示例代码如下：

javapublic class MyChatP2PActivity extends AppCompatActivity {


    private MyChatP2PActivityBinding viewBinding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        viewBinding = MyChatP2PActivityBinding.inflate(LayoutInflater.from(this));
        //设置Activity界面布局，非ViewBinding采用setContentView(R.layout.my_chat_p2p_activity);
        setContentView(viewBinding.getRoot());
        String userId =  getIntent().getStringExtra(RouterConstant.CHAT_ID_KRY);
        if (userId == null) {
            finish();
        }
        FragmentManager fragmentManager = getSupportFragmentManager();
        //创建ChatP2PFragment
        P2PChatFragmentBuilder fragmentBuilder = new P2PChatFragmentBuilder();
        ChatP2PFragment chatFragment = fragmentBuilder.build();
        Bundle bundle = new Bundle();
        bundle.putSerializable(RouterConstant.CHAT_ID_KRY, accId);
        chatFragment.setArguments(bundle);
        //将ChatP2PFragment加载到Activity中
        fragmentManager
                .beginTransaction()
                .add(R.id.chat_container, chatFragment)
                .commitAllowingStateLoss();

    }
}

在AndroidManfest.xml中声明 Activity。

示例代码如下：

java<activity
        android:name=".activity.MyChatP2PActivity"
        android:launchMode="singleTop"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="stateHidden|adjustResize">
</activity>

注册会话界面。

调用XKitRouter中的会话注册方法registerRouter，同时进行相应配置（参考本步骤的示例代码），将 IM UIKit 的默认会话界面替换为您的 Activity 界面。
- 方法原型
```
javaXKitRouter.registerRouter(path,activity);
```
- 参数说明
参数类型说明

path String Activity 的跳转地址

activity Class 跳转的目标 Activity
- 示例代码
```
javaXKitRouter.registerRouter(RouterConstant.PATH_CHAT_P2P_PAGE, MyChatP2PActivity.class);
```

参数	类型	说明
`path`	String	Activity 的跳转地址
`activity`	Class	跳转的目标 Activity

使用 IM UIKit 提供的路由器XKitRouter进行跳转。

示例代码如下：

javaXKitRouter.withKey(RouterConstant.PATH_CHAT_P2P_PAGE).withContext(context).navigate();

集成群聊界面

IM UIKit 提供的群聊 Fragment 的类名为ChatTeamFragment。您可以在应用的 Activity 中集成ChatTeamFragment从而构建您的群聊界面。

本节假设您的应用的 Acitiviy 为ChatTeamActivity，进行相应说明。

创建您的应用 Activity 的布局文件my_chat_team_activity.xml。

示例代码如下：

java<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:ignore="MissingDefaultResource">

//用来放置Fragment
    <FrameLayout
        android:id="@+id/chat_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

创建 Activity。本步骤以应用的 Acitivity 采用视图绑定（ViewBinding）模式为例进行说明。

示例代码如下：

javapublic class MyChatTeamActivity extends Activity {


    private MyChatTeamActivityBinding viewBinding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        viewBinding = MyChatTeamActivityBinding.inflate(LayoutInflater.from(this));
        //设置Activity界面布局，非ViewBinding采用setContentView(R.layout.my_chat_p2p_activity);
        setContentView(viewBinding.getRoot());
        V2NIMTeam teamInfo = (V2NIMTeam) getIntent().getSerializableExtra(RouterConstant.CHAT_KRY);
        if (teamInfo == null) {
            finish();
            return();
        }
        FragmentManager fragmentManager = getSupportFragmentManager();
        //创建ChatP2PFragment
        ChatTeamFragment chatFragment = new ChatTeamFragment();
        Bundle bundle = new Bundle();
        bundle.putSerializable(RouterConstant.CHAT_KRY, teamInfo);
        chatFragment.setArguments(bundle);
        //将ChatP2PFragment加载到Activity中
        fragmentManager
                .beginTransaction()
                .add(R.id.chat_container, chatFragment)
                .commitAllowingStateLoss();

    }
}

在AndroidManfest.xml中声明 Activity。

示例代码如下：

java<activity
        android:name=".activity.MyChatTeamActivity"
        android:launchMode="singleTop"
        android:screenOrientation="portrait"
        android:windowSoftInputMode="stateHidden|adjustResize">
</activity>

注册会话界面。

调用XKitRouter中的会话注册方法registerRouter，同时进行相应配置（参考本步骤的示例代码），将 IM UIKit 的默认会话界面替换为您的 Activity 界面。
- 方法原型
```
javaXKitRouter.registerRouter(path,activity);
```
- 参数说明
参数类型说明

path String Activity 的跳转地址

activity Class 跳转的目标 Activity
- 示例代码
```
javaXKitRouter.registerRouter(RouterConstant.PATH_CHAT_TEAM_PAGE, MyChatTeamActivity.class);
```
使用 IM UIKit 提供的路由器XKitRouter进行跳转。

示例代码如下：
```
javaXKitRouter.withKey(RouterConstant.PATH_CHAT_TEAM_PAGE).withContext(context).navigate();
```
路由器XKitRouter的具体使用说明，请参见界面跳转。

参数	类型	说明
`path`	String	Activity 的跳转地址
`activity`	Class	跳转的目标 Activity

注意事项

会话界面的部分功能需要在云信控制台开通后才能使用。具体请参见控制台开通。

效果展示

前提条件

实现方法

基于Activity 集成

基于 Fragment 集成

集成单聊界面

集成群聊界面

注意事项

相关参考