iOS端如何添加自定义UI和控制逻辑_低代码音视频工厂-阿里云帮助中心

背景信息

低代码集成（含UI）接入的互动直播iOS端支持以下自定义功能：

自定义主播端起播页面
自定义主播端和观众端直播间页面
直播弹幕相关自定义配置
添加自定义商品卡片
添加可唤起和收回的自定义UIViewController
观众端小窗播放相关
主播端开启美颜
主播端开启横屏样式
观众端打开横屏样式
观众端开启后台播放模式

前提条件

您已经完成了iOS端集成。

自定义主播端起播页面

在主播端，如果想要改变默认的起播页面，可以在ASLRBLiveRoomViewController的属性livePrestartCustomizedViewHolder添加自定义UI控件。

以下代码演示了如何在livePrestartCustomizedViewHolder添加自定义的直播标题输入、开播按钮、摄像头切换按钮和打开美颜按钮。

说明在livePrestartCustomizedViewHolder上添加自定义UI的逻辑必须在push当前ASLRBLiveRoomViewController前执行。

示例代码

// 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoom.livePrestartCustomizedViewHolder addSubview:({
    UITextField* textField = [[UITextField alloc]initWithFrame:CGRectMake(100, 300, 200, 60)];
    textField.placeholder = @"直播标题";
    textField.backgroundColor = [UIColor colorWithWhite:1 alpha:0.7];
    textField.layer.masksToBounds = YES;
    textField.layer.cornerRadius = 4;
    self.textField = textField;
    textField;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 400, 200, 60)];
    button.backgroundColor = [UIColor redColor];
    [button setTitle:@"开播" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(startLive) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 520, 200, 60)];
    button.backgroundColor = [UIColor greenColor];
    [button setTitle:@"摄像头切换" forState:UIControlStateNormal];
    [button addTarget:vc action:@selector(switchCamera) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

[liveRoomVC.livePrestartCustomizedViewHolder addSubview:({
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 640, 200, 60)];
    button.backgroundColor = [UIColor greenColor];
    [button setTitle:@"打开美颜面板" forState:UIControlStateNormal];
    [button addTarget:vc action:@selector(showBeautyPanel) forControlEvents:UIControlEventTouchUpInside];
    button;
})];

#pragma -mark prestart UIButton selectos
- (void)startLive{
    ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];
    
    config.liveBusinessInfo.liveTitle = self.textField.text; //写入直播标题
    config.liveBusinessInfo.liveCoverURL = @"xxxxxx"; // 透传直播封面地址
    config.liveBusinessInfo.liveCustomData = @{@"xxx" : @"xxx"}; // 透传直播自定义内容
    
    [liveRoomVC startLiveAndUpdateConfig:config];
}

- (void)switchCamera {
    [liveRoomVC switchCamera];
}

- (void)showBeautyPanel {
    [liveRoomVC showBeautyPanel];
}

自定义主播端和观众端直播间页面

在主播端和观众端的直播间页面，如果想要自定义UI，可根据以下图表展示的自定义区域及提示信息操作。


序号	区域	自定义UI
①	左上自定义区域	如果采用默认实现，可以使用`liveInfoViewHolder`，也可以修改`liveInfoViewHolder`。如果需要完全自定义左上角区域，可以在`upperLeftCustomizedViewHolder`中添加自定义UI控件。这里需要显示的直播间人数、点赞数可以通过监听`ASLRBCommonEventLiveDataUpdated`事件获取。
②	右上自定义区域	如果需要完全自定义右上角区域，可以在`upperRightCustomizedViewHolder`中添加自定义UI控件。
③	中心自定义区域	如果需要在头像之下、弹幕区域之上添加自定义UI控件，可在`middleCustomizedVIewHolder`上添加。如需隐藏默认的观众列表button、公告button、加载中UI、主播推流状态UI等，请参考`ASLRBLiveRoomMiddleViewsConfig.h`的说明。
④	弹幕区域	弹幕区域的自定义请参考直播弹幕相关自定义配置。
⑤	底部自定义区域	如果采用默认实现，可以使用`bottomViewsHolder`，也可以修改`bottomViewsHolder`。如果需要完全自定义底部区域，可以在`bottomCustomizedViewHolder`中添加自定义UI控件。

直播弹幕相关自定义配置

直播弹幕view，即liveCommentView支持丰富多样的样式自定义，具体如下。更多的自定义能力，详见ASLRBLiveCommentViewConfig头文件说明。

ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];

//进入直播间时是否展示历史弹幕以及展示的条数，默认不展示
config.liveCommentViewsConfig.countOfHistoryCommentsWhenEntered = 100;

//修改进入直播间弹幕区展示的公告内容, 默认是 "欢迎大家来到直播间！直播间内严禁出现违法违规、低俗色情、吸烟酗酒等内容，若有违规行为请及时举报。"
config.liveCommentViewsConfig.liveCommentWarningNotice = @"这是一个新的直播间公告说明";

//修改直播间弹幕区展示的公告文本的颜色，默认"#12DBE6"
config.liveCommentViewsConfig.liveCommentWarningNoticeTextColor = [UIColor redColor];

//修改直播弹幕发送人昵称的文本的统一颜色，默认是根据发送人nick hash出的随机颜色
config.liveCommentViewsConfig.defaultLiveCommentSenderColor = [UIColor redColor];

监听直播弹幕view的手势识别结果。

// 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例

//设置delegate
liveRoomVC.liveCommentView.delegate = self;

//实现以下回调方法
/**
 * 直播评论区某条评论长按事件回调
 */
- (void) onASLRBLiveCommentViewCommentLongPressed:(ASLRBLiveCommentModel*)comment;
/**
 * 直播评论区某条评论单击事件回调
 */
- (void) onASLRBLiveCommentViewCommentTapped:(ASLRBLiveCommentModel*)comment;

监听并修改直播弹幕文本内容。

// 这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
liveRoomVC.liveCommentView.delegate = self;

- (void) onASLRBLiveCommentJustAboutToPresent:(ASLRBLiveCommentModel*)comment {
    
    // 特定修改某个nick的内容和颜色
    if ([comment.senderNick.string isEqualToString:@"xxx"]) {
        comment.sentContent = @"xxxxxxx"; //修改弹幕内容
        comment.senderNickColor = [UIColor greenColor]; //
    }
    
    // 特定修改包含某些敏感词的弹幕内容
    if ([comment.sentContent isEqualToString:@"fxxk"] || [comment.sentContent isEqualToString:@"他xxx嘛"]) {
        comment.sentContent = @"***"; //修改弹幕内容，对敏感词操作脱敏
    }
}

添加自定义商品卡片

只要在bottomCustomizedViewHolder（或bottomViewsHolder）和liveCommentView之间插入自定义view，就能实现插入商品卡片。

示例代码

//第一步，先自定义一个商品卡片view并以bottomCustomizedViewHolder的上边沿作为商品卡片的下边边界
UIView* goodsCardView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"直播-商品卡片"]];

//第二步，把商品卡片view添加到liveRoomVC的view上作为子view
[liveRoomVC.view addSubview:goodsCardView];
[goodsCardView mas_makeConstraints:^(MASConstraintMaker * _Nonnull make) {
make.bottom.equalTo(liveRoomVC.bottomCustomizedViewHolder.mas_top);
     make.left.equalTo(liveRoomVC.view).with.offset(14);
     make.height.mas_equalTo(80);
     make.width.mas_equalTo(260);
}];
                
//第三步，把直播弹幕liveCommentView往上移动，宽、高、左边沿坐标保持不变，如下
[liveRoomVC.liveCommentView mas_remakeConstraints:^(MASConstraintMaker * _Nonnull make) {
   make.left.equalTo(self.liveRoomVC.view).with.offset(liveRoomVC.liveCommentView.frame.origin.x);
   make.bottom.equalTo(goodsCardView.mas_top);
   make.height.mas_equalTo(liveRoomVC.liveCommentView.bounds.size.height);
   make.width.mas_equalTo(liveRoomVC.liveCommentView.bounds.size.width);
}];

添加可唤起和收回的自定义UIViewController

ASLRBLiveRoomViewController内部有对系统UIViewController的扩展，支持以非常便捷的方式添加自定义UIViewController。以下代码演示了在直播liveRoomVC上从底部向上展示一个自定义的UIViewController。

示例代码

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
CGRect frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height - [UIScreen mainScreen].bounds.size.width * 1.2, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.width * 1.2);

UIViewController* shopWindowVC = [[UIViewController alloc] init];
[liveRoomVC presentChildViewController:shopWindowVC animated:YES presentedFrame:frame direction:AIRBDViewControllerPresentFromBottom];
liveRoomVC.presentedChildViewController = shopWindowVC;

//默认情况下，只要手动点击当前没有被shopWindowVC覆盖的liveRoomVC区域，shopWindowVC就可以自动收起，但可以使用以下方法来主动收起
[liveRoomVC dismissChildViewController:shopWindowVC animated:YES];

观众端小窗播放相关

观众端可以一键开启小窗播放能力（1.7.0版本及以上支持），可以配合在直播间页面跳转到其他页面需要同时看直播的时候使用，代码如下

在直播间唤起其他页面并进入小窗模式播放。

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoomVC enterFloatingMode:YES]; //进入小窗模式

[liveRoomVC presentViewController:xxxViewController]; // 跳转到某个其他ViewController

在小窗模式下，点击小窗从而退出小窗模式，即从当前页面回到直播间页面。

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
- (void)onASLRBLiveRoomEventInViewController:(nonnull ASLRBLiveRoomViewController *)liveRoomVC liveRoomEvent:(ASLRBEvent)liveRoomEvent info:(nonnull NSDictionary *)info {
   switch (liveRoomEvent) {
        case ASLRBAudienceEventFloatingPlayWindowTapped:{
             // 跳转到当前ASLRBLiveRoomViewController实例页面
         }
        break;
    ...
}

在小窗模式下，调用代码退出小窗模式。

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoomVC enterFloatingMode:NO]; //退出小窗模式

小窗模式下，切后台再回到前台会隐藏小窗，如果需要关闭这个功能，即小窗模式下切后台再回到前台后继续保持小窗，需要主动进行以下配置。
```
//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
liveRoomVC.floatingPlayWindow.disappearAfterResignActive = NO;
```

说明这里的小窗模式不是iOS系统级浮动小窗模式，即小窗不会出现iOS系统桌面上。

主播端开启美颜

主播端美颜是内部已经默认实现了的一个ViewController，可以一键打开，需要版本1.7.0及以上。

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
[liveRoomVC showBeautyPanel]; //打开美颜， 关闭美颜只要手动触动美颜VC之外的区域即可。

//另外，美颜面板的打开和收起，会自动触发以下事件
ASLRBCommonEventFaceBeautyViewControllerWillAppear  // 美颜面板打开事件（2.0.0及之后版本，如果控制台未主动开启美颜，则不会触发此事件）
ASLRBCommonEventFaceBeautyViewControllerWillDisappear // 美颜面板收起

说明从2.0.0版本开始，美颜功能默认关闭，如需打开，需要在控制台应用列表中找到具体应用，在其应用配置中的直播配置->推流配置中打开。

主播端开启横屏样式

主播端可以在打开直播间时开启横屏样式（2.0.0版本及以上支持，横屏下暂不支持美颜），方法如下：

__weak typeof(self) weakSelf = self;
[[ASLRBLiveRoomManager sharedInstance] createLiveRoomVCWithConfig:({
    ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc] init];
    config.liveID = @"<您的liveID>"; //低代码集成场景下主播侧liveID非必传，为空时内部会自动创建新直播
    config.role = ASLRBUserRoleAnchor; //主播侧必填ASLRBUserRoleAnchor
    config.pushOrientation = 1; //开启横屏样式
    config;
}) onSuccess:^(ASLRBLiveRoomViewController * _Nonnull liveRoomVC) {
    [weakSelf setupLiveRoomViewController:liveRoomVC];
} onFailure:^(NSString * _Nonnull errorMessage) {
    NSLog(@"获取直播ViewController失败：%@", errorMessage);
}];

观众端打开横屏样式

观众端可以打开横屏样式，方法如下：

//这里的liveRoomVC即已经初始化好的ASLRBLiveRoomViewController实例
//允许横竖屏切换
liveRoomVC.enableViewRotation = YES;
//可以使用以下接口切换横竖屏，也可以旋转设备自动切换横竖屏
[liveRoomVC switchViewOrientation];

//配置好开关后，每当切换横竖屏过程中，都会触发以下事件，可以通过以下方法来监听ASLRBCommonEventViewOrientationChanged获取通知
//具体旋转后的屏幕方法可以在info字段中看到

-(void)onASLRBLiveRoomEventInViewController:liveEvent:info:

观众端开启后台播放模式

默认情况下，观众端进入后台会停止播放，如果需要开启后台播放，首先需要做以下设置。

ASLRBLiveInitConfig* config = [[ASLRBLiveInitConfig alloc]init];
config.enableBackgroundLivePlaying = YES;

然后，需要打开当前应用的后台模式，如下图所示。 iOS后台模式