ReaderMX.
七牛云

七牛云 QLiveKit，直播间 UI 开发轻松搞定

七七牛云约 5 分钟

Image

在上篇文章《几行代码就能构建连麦 PK 直播间？你需要 QLiveKit》中，为大家介绍了如何通过七牛云 QLiveKit 快速搭建连麦直播间，而 QLiveKit 能做到的不止于此，还可以助你高效轻松地搞定直播间 UI 开发。

UI 设计的代码化，是将 UI 设计通过代码的方式进行管理。七牛云 QLiveKit 互动直播低代码解决方案 SDK，不仅以基础插件的形式提供完整 UI 页面，还有小窗播放、美颜等各类丰富的插件，同时支持便捷定制，更加贴合业务场景。

QLiveKit 的能力

UI 组件可分为事件处理型、UI 展示型和功能型三大类。事件处理型关注于对业务事件做出处理，在页面上可无 UI 表现，例如收到「房主离线」事件则关闭房间；UI 展示型则直接表现为页面显示的 UI；功能型负责实现特定行为功能，例如开始录制视频。

针对以上各个分类，七牛云 QLiveUIKit 平台业务，能快速插拔各个组件，并提供运行管理，可以对内置的组件配置化删除、修改、替换，并快速无侵入式地增加组件。

Image

▲ 架构图

对 UIKit SDK 有哪些要求？

在标准的 UI 开发模式中，通常可以分为命令式和声明式。常见的命令式 UI 例如安卓 xml，常见的声明式 UI 包括 Flutter、Jetpack Compose UI、SwiftUI 等。

//命令式案例：<LinearLayout     android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <TextView        android:id="@+id/tvNotice"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <TextView        android:id="@+id/tvLikeCount"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>
class TestLiveActivity  {    private lateinit var client: QPlayerClient    override fun onCreate(savedInstanceState: Bundle?) {        client.joinRoom("",null)        val room=  client.roomInfo        tvNotice.text = room.notice        ivRoomCover.setImage(room.coverURL)        client.addLikeServiceListener {            tvLikeCount.text = it.count.toString()        }    }}
//声明式案例：class LiveRoomViewModel : ViewModel() {    lateinit var client: QPlayerClient    val noticeLiveData = MutableLiveData<String>()    val likeLiveData = MutableLiveData<String>()    fun join(){        client.joinRoom("",null)        val room=  client.roomInfo        noticeLiveData.value = room.notice        client.getService(QLikeService::class.java).addLikeServiceListener {            likeLiveData.value = it.count.toString()        }    }}
fun LivePage(model: LiveRoomViewModel) {    val notice by model.noticeLiveData.observeAsState("")    val like by model.likeLiveData.observeAsState("")    //列表视图    Column {        //绑定 UI 和模型        Text(text = notice)        Text(text = like)    }}

如果作为 Demo 级 UI 产品，这样的标准开发模式是完全没问题的，但是对于 UIKit SDK 级别的产品，就有更高的要求。在 SDK 运行前，

1、需要支持对 UI 布局编排进行调整

2、要对已存在 UI 删除、修改、替换

3、在某个位置插入某个 UI

假设以标准的 UI 模式提供直播间 UI 页面，要实现以上能力基本方案如下：

方案一：

运行前提供配置参数，运行过程解析参数调整 UI。

案例：直播间底部功能栏通常有如下按钮：美颜、静音、礼物、关播、连麦、PK，可提供如下配置参数：

//按钮集合val buttons = LinkedList<FuncButtonConfig>()class FuncButtonConfig {    var btnID = 0     var btnName = ""    var width =100 //宽    var height=100 //高    var text=""    //显示文本    var isEnable = true //是否启用    var selectIcon = -1 //选中样式    var normalIcon = -1 //正常样式    var onClickListener: OnClickListener? = null //点击事件}

该方案的缺点：

1、实际开发过程中，UI 描述很多，开发前没法定义尽可能多的配置。

2、单个 UI 可以定义样式，对于其在父容器中的布局无法描述，也不支持把该组件切换到其他布局里。

方案二：

直接提供 UI 源码，接入用户修改源码调整 UI。

该方案的缺点：

1、页面 UI 逻辑越复杂，接入用户修改越困难 。

2、SDK 升级时，假设客户已经修改了很多 UI 源码，这时客户升级代码需要同步 SDK 修改的部分，非常困难且耗时。

QLiveUIKit 方案实例

QLiveUIKit 将页面拆分成尽可能小的 UI 组件，每个组件可在页面上下文中独立运行。对于每个组件定义如下：

interface BaseComponent<T : BaseContext>    //绑定平台上下文，拥有获取 fragmentManager，AndroidContext,currentActivity 等能力    fun attachKitContext(context: T)    // 绑定房间客户端回调    //拿到 client 就能拿到所有访问业务服务的能力 如发消息 设置监听    fun attachLiveClient(client: QLiveClient)    //activity 生命周期回调    fun onStateChanged(source: LifecycleOwner, event: Lifecycle.Event)    // 注册 UI 组件之间的通信事件    fun <T : UIEvent?> registerEventAction(clz: Class<T>, call: Function1<T, Unit>)    //发送 UI 通信事件    fun <T : UIEvent?> sendUIEvent(event: T)    // 房间加入成功回调    fun onJoined(roomInfo: QLiveRoomInfo, isResumeUIFromFloating: Boolean)
    // 房间正在进入回调    fun onEntering(roomId: String, user: QLiveUser)    // 当前房间已经离开回调    fun onLeft()
    // client 销毁回调     fun onDestroyed()}

Image

在每个 UI 组件中，基于每个阶段回调，每个组件能完成自己的全部工作，并通过事件通信机制，能和其他组件通信。接下来 SDK 把内置的 UI 组件组装出一个页面：

<FrameLayout>
   <事件处理组件 1/>   <事件处理组件 2/>   <安卓内置布局组件 1    大小/对齐方式/其他样式    >      <UI 组件 1        背景图:""        宽:""        高:""        其他 UI 描述:""/>      <UI 组件 1        宽:""        高:""        其他 UI 描述:""/>   </安卓内置布局组件 1>   <安卓内置布局组件 1>      <UI 组件 1        宽:""        高:""        其他 UI 描述:""/>      <UI 组件 1        宽:""        高:""        其他 UI 描述:""/>   </安卓内置布局组件 1>

</FrameLayout>

在这个安卓布局 xml 中，首先注册了事件处理组件，其次用安卓内置的布局组件，编排了每个通过 QLiveUIKit 实现的内置 UI 组件。

开发者只需拿到一份原本的页面配置文件，便可在此基础上:

1、调节原有的组件样式

2、删除原有的组件

3、任意位置增加组件

4、修改每个组件的编排布局

接下来 QLiveKit 在运行过程中，可根据 UI 配置动态装载 UI 页面。客户在整个接入过程中，只要关注需要调整的页面配置文件即可。通过这样的设计，QLiveKit 甚至可以通过手动拖拽组件，生成页面配置组装出直播页面，大幅提高开发效率。 

Image

/ 长按二维码联系我们 /
 往 期 推 荐 
Image
Image

点击「阅读原文」 

了解观众直播间完整页面配置

KEEP THE THREAD GOING

更多来源文章