tencent cloud

即时通信 IM

Android(Compose)

下载
聚焦模式
字号
最后更新时间: 2026-06-03 16:38:18
本文会引导您构建联系人界面。

开发环境要求

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 步,请先参考 快速开始 中的对应步骤完成,否则在实现下文功能时可能遭遇阻碍。
如果您已经完成,请继续阅读下文。

步骤说明

联系人界面由 ContactList 这个 @Composable 组件构成。
注意:
如果您事先没有添加过联系人,加载出来的联系人界面是空的。添加联系人后,联系人会显示在界面列表中。通过 TUIKit Compose 添加联系人的步骤可参考文档:添加联系人
注意,如果你直接使用我们的示例代码,需要预填充这几个参数:
sdkAppID,上文获取的 sdkAppID。
userID,操作者的 userID,也就是 快速开始 中创建的 user1。
userSig,操作者的 userSig,也就是 快速开始 中创建的 user1 的 userSig。
App 启动即加载联系人界面,示例代码如下:
// ContactListActivity.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.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
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.contactlist.ui.ContactList
import io.trtc.tuikit.atomicxcore.api.CompletionHandler
import io.trtc.tuikit.atomicxcore.api.login.LoginStore

class ContactListActivity : AppCompatActivity() {

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

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

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

private fun showContactListPage() {
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 = "Contacts",
fontSize = 17.sp,
fontWeight = FontWeight.W600,
color = colors.textColorPrimary
)
}

HorizontalDivider(color = colors.strokeColorPrimary)

// ContactList
ContactList(
onContactClick = { contact ->
// Handle contact click
// contact.contactID
},
onGroupClick = { group ->
// Handle group click
// group.contactID
}
)
}
}
}
}
运行效果如下图所示:

ContactList 对该界面的点击行为做了默认处理,如下:
动作
效果
点击新的联系人
展示未处理的加好友请求。
点击群组申请
展示加群申请列表。
点击群聊
展示当前登录账号的所有群聊。
点击黑名单
展示当前登录账号的黑名单。

更多实践

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

联系我们

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


帮助和支持

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

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

文档反馈