本文介绍Android端如何在低代码集成（含UI）方式接入的互动直播默认UI上添加自定义的UI和控制逻辑。

背景信息

建议您先在线体验直播间各页面提供的组件，并同步了解对应组件的定制方法。详情请参见Android端互动直播进阶开发在线体验。

Android端低代码形态的互动直播提供两种定制方法，以满足不同程度的定制需求。

  • 槽位定制：开放低代码集成（含UI）后UI的部分视图区域（槽位），支持客户在集成应用时自定义这部分区域（槽位）的UI或能力，以满足客户基本定制需求。

  • 组件定制：对于一些较为复杂的定制需求，可以通过组件定制的方式满足。

前提条件

你已经完成了Android端集成。

Demo示例

Android端提供自定义功能的Demo示例源码。强烈推荐直接克隆源码，更改配置参数即可运行。源码地址请参见Android端互动直播进阶开发Demo源码。

您也可以根据下述章节逐步实现自定义逻辑。

槽位定制

  1. 在进入直播间之前（比如静态代码块的地方），添加如下槽位配置。
    static {
    LivePrototype.getInstance().setLiveHook(new LiveHook()
            // 设置右上角的槽位视图
            .setUpperRightSlot(context -> buildTextView(context, "右上角视图"))
            // 设置页面中部的槽位视图
            .setMiddleSlot(context -> buildTextView(context, "页面中部视图"))
    );
}

private static TextView buildTextView(Context context, String text) {
    TextView textView = new TextView(context);
    textView.setGravity(Gravity.CENTER);
    textView.setBackgroundColor(Color.parseColor("#66ff0000"));
    textView.setTextColor(Color.WHITE);
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 25);
    textView.setText(text);
    textView.setLayoutParams(new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
    ));
    return textView;
}
  2. 添加上述槽位设置的代码后，请重新运行并安装应用。
    说明

    此时的直播间效果如下图。页面中的红色区域，即为上述代码的槽位设置效果。您可以根据自己的业务需求，在其中添加自定义的视图内容。

    互动直播自定义槽位

组件定制

低代码形态互动直播对应直播间中涉及到视图逻辑非常复杂，视图与视图之间还会存在一定的联动逻辑。例如，底部的点赞和顶部的点赞数分别对应点赞逻辑的写和读，底部的输入框和弹幕面板分别对应弹幕逻辑的写和读。

秉承代码设计的高内聚低耦合原则，抽象出组件的概念，旨在将视图逻辑在一个独立类的范围内自闭环。在房间页面，能看到的每个视图，大到整个信息面板，小到分享、点赞、美颜等图标，都是或者属于一个组件。

考虑到组件与组件之间有着极为复杂的相对位置关系，SDK内部设计通过setContentView传递的XML资源文件来进行组件的灵活配置。

以下内容以自定义一个能够监听弹幕信息的组件为例说明如何自定义组件。

  1. 新建自定义组件CustomMessageView。
    示例代码
    public class CustomMessageView extends AppCompatTextView implements ComponentHolder {

    private final Component component = new Component();

    public CustomMessageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
              setTextColor(Color.RED);
              setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);
    }

    @Override
    public IComponent getComponent() {
        return component;
    }

    private class Component extends BaseComponent {
        @Override
        public void onInit(LiveContext liveContext) {
            super.onInit(liveContext);
            // 设置互动服务的回调监听事件
            chatService.addEventHandler(new SampleChatEventHandler() {
                @Override
                public void onCommentReceived(CommentEvent event) {
                    setText(String.format("%s: %s", event.creatorNick, event.content));
                }
            });
        }
    }
}
  2. 找到低代码形态互动直播默认的布局文件 ilr_activity_live.xml，然后复制一份重命名为activity_custom_live.xml的文件到工程资源目录下。
  3. 在上一步创建的activity_custom_live.xml文件中的LiveContentLayer节点末尾添加自定义信息组件。添加后如下图所示：互动直播自定义组件-代码
  4. 将新的布局文件设置给SDK。
    static {
    LivePrototype.getInstance().setLiveHook(new LiveHook()
            .setLiveLayoutRes(R.layout.activity_custom_live)
    );
}
  5. 运行并安装应用。
    执行结果
    进入直播间后，此时在底部输入框发送弹幕时，可以看到自定义的信息组件。示例代码实现的效果如下图所示：互动直播自定义组件-效果

主播端添加美颜

基础版美颜

dependencies {
    api "com.aliyun.roompaas.biz:liveroom:${LATEST_VERSION}"
    api "com.aliyun.roompaas.biz:beauty_lite:${LATEST_VERSION}"
}

专业版美颜

dependencies {
    api "com.aliyun.roompaas.biz:liveroom:${LATEST_VERSION}"
    api "com.aliyun.roompaas.biz:beauty_pro:${LATEST_VERSION}"
}

直播间横屏逻辑

目前样板间仅支持观众端横屏逻辑，直播端暂不支持。

设置横屏。

// 在Component的onInit之后调用
liveContext.setLandscape(true);

// 恢复竖屏
liveContext.setLandscape(false);

监听横竖屏切换。

@Override
public void onActivityConfigurationChanged(Configuration newConfig) {    
    if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {        
        // 切换到竖屏
    } else if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {        
        // 切换到横屏
    }
}

观众端直播小窗逻辑

直播小窗主要用于支持用户在观看直播过程中还能够同时访问App其他页面（如商品详情页）或切换至后台的场景。

快速开启小窗，只需要在Component中按照如下方式发送切换小窗事件给到LiveRenderView组件即可。

postEvent(LiveRenderView.ACTION_SHOW_FLOAT_WINDOW);

可以通过FloatWindowManager.instance().setConfig(config)设置小窗相关样式，其中包含如下参数配置。 

public class FloatWindowConfig {    
    // 小窗样式    
    public int borderSize = AppUtil.dp(3);    
    public int borderColor = Color.parseColor("#fb622b");    
    public int radius = AppUtil.dp(5);    

    // 小窗大小    
    public int width = AppUtil.getScreenWidth() / 3;    
    public int height = width * 16 / 9;    

    // 小窗位置    
    public int x = AppUtil.getScreenWidth() - width;    
    public int y = (AppUtil.getScreenHeight() - height) / 2;
}

由于切换小窗需要取到渲染的View，而该View是位于LiveRenderView中，所以实际执行切小窗操作的是LiveRenderView这个组件中的showFloatWindow方法，外部是通过发送切小窗事件的形式，让LiveRenderView触发切小窗逻辑的。

业务上如果想更改切换小窗的逻辑，可以通过自定义组件的形式，重写LiveRenderView的showFloatWindow方法，如下，可以更改checkPermission，定制请求小窗权限的交互逻辑。 

@Override
protected void showFloatWindow(final Activity activity) {    
    // 检测悬浮窗权限
    FloatWindowPermissionUtil.checkPermission(activity, new Runnable() {        
        @Override        
        public void run() {                        
            // 有权限时, 开始弹窗
            FloatWindowManager.instance().show(renderView, activity);        
        }    
    });
}