tencent cloud

即时通信 IM

Android(Compose)

下载
聚焦模式
字号
最后更新时间: 2026-06-03 16:32:11
本文会引导您构建聊天界面。

开发环境要求

Android Studio Arctic Fox (2020.3.1) 及以上
Android SDK API Level 21 (Android 5.0) 及以上

前置条件

在构建界面之前,请确保您已经完成了以下 4 件事:
1. 在控制台创建了一个应用。
2. 在控制台创建了至少 2 个用户账号。
3. 集成了 TUIKit Compose
4. 调用 LoginStorelogin 接口登录组件。
注意:
1. 每次启动应用,登录一次即可。
2. 请确保登录成功,我们建议您在登录成功的回调里进行下文的操作。
如果您尚未完成以上 4 步,请先参考 快速开始 中的对应步骤完成,否则在实现下文功能时可能遭遇阻碍。
如果您已经完成,请继续阅读下文。

步骤说明

单聊界面

如果跳转到单聊消息界面,可以直接参考 快速开始

群聊界面

如果跳转到群聊消息界面,需要传入有效 groupID。这里需要你有一个已经存在群组的 groupID。
如果没有群组,请前往 控制台 创建一个群组,操作路径:Chat > 群组管理 > 添加群组。
创建成功后,您可以直接在当前页看到 groupID:

群聊界面依然由 MessageListMessageInput 两个 @Composable 组件拼接而成。
注意,如果直接使用下列示例代码,需要预填充这几个参数:
sdkAppID,上文获取的 sdkAppID。
senderUserID,发送消息者的 userID,也就是 快速开始 中创建的 user1。
senderUserSig,发送消息者的 userSig,也就是 快速开始 中创建的 user1 的 userSig。
groupID,群组 ID。
App 启动即加载群聊消息列表页,示例代码如下:
// GroupChatActivity.kt
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.trtc.tuikit.atomicx.basecomponent.theme.LocalTheme
import io.trtc.tuikit.atomicx.messageinput.ui.MessageInput
import io.trtc.tuikit.atomicx.messagelist.ui.MessageList
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore

class GroupChatActivity : AppCompatActivity() {

private val sdkAppID: Int = 1234567890 // TODO: Fill in the sdkAppID here
private val senderUserID = "" // TODO: Fill in your userID here
private val senderUserSig = "" // TODO: Fill in your generated userSig here
private val groupID = "" // TODO: Fill in the groupID here

// C2C conversationID: "c2c_${userID}", Group conversationID: "group_${groupID}"
private val conversationID: String get() = "group_${groupID}"

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
login()
}

private fun login() {
LoginStore.shared.login(this, sdkAppID, senderUserID, senderUserSig, object : CompletionHandler {
override fun onSuccess() {
showGroupChatPage()
}
override fun onFailure(code: Int, desc: String) {
// Handle login failure
}
})
}

private fun showGroupChatPage() {
setContent {
val colors = LocalTheme.current.colors
Column(
modifier = Modifier
.fillMaxSize()
.background(color = colors.bgColorOperate)
.statusBarsPadding()
) {
// Navigation Bar
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
.height(44.dp),
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = groupID,
fontSize = 17.sp,
fontWeight = FontWeight.W600,
color = colors.textColorPrimary
)
}

HorizontalDivider(color = colors.strokeColorPrimary)

// MessageList
Box(modifier = Modifier.weight(1f)) {
MessageList(
conversationID = conversationID,
onUserClick = { userID ->
// Handle user avatar click
}
)
}
// MessageInput
MessageInput(
conversationID = conversationID,
modifier = Modifier.navigationBarsPadding()
)
}
}
}
}
运行效果示意图:


更多实践

您可以本地 运行 Chat Demo 源码,探索更多的界面实现。

联系我们

如果您在接入或使用过程中有任何疑问或者建议,欢迎 联系我们 提交反馈。


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈