功能预览
本文对 TUILiveKit 中的直播列表页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
双列瀑布流：默认同时预览2个直播间的画面
单列瀑布流：默认同时预览1个直播间的画面
双列瀑布流 | 单列瀑布流 |
 |
 |
注意：
快速接入
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 添加直播列表瀑布流视图
您可以根据需要选择使用单列或双列瀑布流。
import android.content.Contextimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.livelist.LiveListViewimport com.trtc.uikit.livekit.features.livelist.Styleclass YourActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1.创建并初始化瀑布流视图val view = createLiveListView(this)// 2.将创建的 LiveListView 添加到您的 Activity 或 Fragment 中setContentView(view)}fun createLiveListView(context: Context): LiveListView {val liveListView = LiveListView(context)// 此处代码为双列瀑布流初始化示例，若您需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN)liveListView.init(this, Style.DOUBLE_COLUMN)return liveListView}}
import android.content.Context;import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.livelist.LiveListView;import com.trtc.uikit.livekit.features.livelist.Style;public class YourActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1.创建并初始化瀑布流视图LiveListView view = createLiveListView(this);// 2.将创建的 LiveListView 添加到您的 Activity 或 Fragment 中setContentView(view);}private LiveListView createLiveListView(Context context) {LiveListView liveListView = new LiveListView(context);// 此处代码为双列瀑布流初始化示例，若您需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN, null, null);liveListView.init(this, Style.DOUBLE_COLUMN, null, null);return liveListView;}}
步骤 4. 实现直播列表页到观众观看页的跳转
双列瀑布流直播列表和单列瀑布流均会通过
OnItemClickListener回调点击事件，您只需在直播列表瀑布流视图中实现 OnItemClickListener 来响应用户的点击事件，并在 onItemClick 中实现跳转进入观众观看页的功能，观众观看页实现可参考 观众观看 。交互示例：
代码示例：
fun createLiveListView(context: Context): LiveListView {val liveListView = LiveListView(context)// 此处代码为双列瀑布流初始化示例，若您需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN)liveListView.init(this, Style.DOUBLE_COLUMN)liveListView.setOnItemClickListener { view, liveInfo ->// 点击直播列表项时，跳转进入到观众观看页面val intent = Intent(context, YourAudienceActivity::class.java)intent.putExtra("liveId", liveInfo.roomId)context.startActivity(intent)}return liveListView}
private LiveListView createLiveListView(Context context) {LiveListView liveListView = new LiveListView(context);// 此处代码为双列瀑布流初始化示例，若您需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN, null, null);liveListView.init(this, Style.DOUBLE_COLUMN, null, null);liveListView.setOnItemClickListener((view, liveInfo) -> {// 点击直播列表项时，跳转进入到观众观看页面Intent intent = new Intent(context, YourAudienceActivity.class);intent.putExtra("liveId", liveInfo.roomId);context.startActivity(intent);});return liveListView;}
自定义您的界面布局
TUILiveKit 提供了灵活的接口定制直播列表瀑布流组件，您可以根据业务需求自定义数据源和列表项样式。
自定义数据源
如果您的后台有单独的直播列表数据，可以通过实现
LiveListDataSource 接口来自定义数据源，而不使用组件默认的列表数据。// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;// 2.通过实现 LiveListDataSource 自定义数据源val dataSource = object : LiveListDataSource {override fun fetchLiveList(param: FetchLiveListParam,callback: LiveListCallback) {// 对接自己的业务后台，按照下面的格式返回数据给UI组件val liveInfoList = mutableListOf<TUILiveListManager.LiveInfo>()val liveInfo = TUILiveListManager.LiveInfo().apply {roomInfo = TUIRoomDefine.RoomInfo().apply {roomId = "live_123456"name = "live_123456"}}liveInfoList.add(liveInfo)val cursor = "aabbccdd"callback.onSuccess(cursor, liveInfoList)}}// 3.初始化时传入自定义的 dataSourceliveListView.init(this, Style.DOUBLE_COLUMN, dataSource = dataSource)
// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;// 2.通过实现 LiveListDataSource 自定义数据源LiveListDataSource dataSource = (param, callback) -> {//对接自己的业务后台，按照下面的格式返回数据给UI组件List<TUILiveListManager.LiveInfo> liveInfoList = new ArrayList<>();TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();liveInfo.roomInfo = new TUIRoomDefine.RoomInfo();liveInfo.roomInfo.roomId = "live_123456";liveInfo.roomInfo.name = "live_123456";liveInfoList.add(liveInfo);String cursor = "aabbccdd";callback.onSuccess(cursor, liveInfoList);};// 3.初始化时传入自定义的 dataSourceliveListView.init(this, Style.DOUBLE_COLUMN, null, dataSource);
自定义挂件
瀑布流列表项底部默认显示视频流画面或直播封面。如果您需要自定义列表项顶部的 UI 元素（例如主播头像、直播标题等），可以通过实现
LiveListViewAdapter 接口来完成。// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;// 2.通过实现 LiveListViewAdapter 自定义挂件val liveListViewAdapter = object : LiveListViewAdapter {override fun createLiveInfoView(liveInfo: TUILiveListManager.LiveInfo): View {// 自定义挂件 viewval widgetView = YourView(context)widgetView.init(liveInfo)return widgetView}override fun updateLiveInfoView(view: View, liveInfo: TUILiveListManager.LiveInfo) {// 更新挂件 view 中绑定的数据val widgetView = view as YourViewwidgetView.updateLiveInfoView(liveInfo)}}// 3.初始化时传入自定义的 liveListViewAdapterliveListView.init(this, Style.DOUBLE_COLUMN, adapter = liveListViewAdapter)
// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;// 2.通过实现 LiveListViewAdapter 自定义挂件LiveListViewAdapter liveListViewAdapter = new LiveListViewAdapter() {@Overridepublic View createLiveInfoView(TUILiveListManager.LiveInfo liveInfo) {// 自定义挂件viewCustomView widgetView = new CustomView(context);widgetView.init(liveInfo);return widgetView;}@Overridepublic void updateLiveInfoView(View view, TUILiveListManager.LiveInfo liveInfo) {// 更新挂件view中绑定的数据CustomView widgetView = (CustomView) view;widgetView.updateLiveInfoView(liveInfo);}};// 3.初始化时传入自定义的 liveListViewAdapterliveListView.init(this, Style.DOUBLE_COLUMN, liveListViewAdapter, null);
下一步
恭喜您，现在您已经成功集成了直播列表功能。接下来，您可以实现主播开播、观众观看等功能，可参考下表：
常见问题
集成直播列表功能后页面没有任何直播怎么办？
单列瀑布流和双列瀑布流有什么区别？
单列瀑布流一次预览一个直播间画面，而双列瀑布流则同时预览两个直播间画面。您可以根据自己的设计需求选择合适的布局。
