一、Android 平台
腾讯云实时音视频、直播点播播放器等产品均会涉及到视频渲染控件的使用。在 Android 平台，通常使用腾讯云自定义的视频渲染控件 TXCloudVideoView。该控件本身不支持直接设置阴影、圆角等效果，因此我们通常会借助 CardView 视图组件来实现个性化的样式布局，实现步骤如下。
二、步骤一：添加依赖
在 build.gradle 文件中添加 CardView 的依赖。
dependencies { implementation 'androidx.cardview:cardview:1.0.0'}
三、步骤二：自定义 CardView
在 XML 布局文件中，可以像使用其他视图组件一样使用 CardView。你可以通过 card_view 命名空间中的属性来自定义 CardView 的外观：
·cardCornerRadius：设置卡片的圆角半径。
·cardElevation：设置卡片的阴影高度。
·cardBackgroundColor：设置卡片的背景颜色。
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="12dp" card_view:cardElevation="6dp" card_view:cardBackgroundColor="@color/white"> <!– 内部布局 –></androidx.cardview.widget.CardView>
四、步骤三：添加 TXCloudVideoView
使用 CardView 包裹 TXCloudVideoView，从而使得腾讯云视频渲染控件实现阴影、圆角等效果。
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="12dp" card_view:cardElevation="6dp" card_view:cardBackgroundColor="@color/white"> <com.tencent.rtmp.ui.TXCloudVideoView android:id="@+id/live_cloud_view_main" android:layout_width="match_parent" android:layout_height="match_parent" /></androidx.cardview.widget.CardView>
五、在代码中动态创建和操作 CardView
当然，除了在布局文件中使用 CardView，也可以在代码中动态创建和操作 CardView，示例代码如下。
// 初始化 CardView
CardView cardView = new CardView(context);
// 设置 CardView 的属性
cardView.setRadius(12f); // 设置圆角半径
cardView.setCardElevation(6f); // 设置阴影高度
cardView.setCardBackgroundColor(ContextCompat.getColor(this, R.color.white)); // 设置背景颜色
// 初始化 TXCloudVideoView
TXCloudVideoView txCloudVideoView = new TXCloudVideoView(context);
// 将 TXCloudVideoView 添加到 CardView
cardView.addView(txCloudVideoView);
// 将 CardView 添加到父布局
parentLayout.addView(cardView);
六、iOS 平台
腾讯云实时音视频、直播和点播播放器等产品均会涉及到视频渲染控件的使用。在 iOS 平台，可以直接使用 UIView 来设置圆角和阴影等效果。
七、设置圆角效果
如果你需要单独设置圆角效果，可参考如下代码示例实现。
UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];contentView.backgroundColor = [UIColor whiteColor];contentView.layer.cornerRadius = 20;// 剪切以显示圆角contentView.clipsToBounds = YES; // 添加到主视图[self.view addSubview:contentView];// 开启本地摄像头的预览画面[self.trtcCloud startLocalPreview:self.isFrontCamera view:contentView];
八、设置圆角和阴影
如果你需要同时设置圆角和阴影效果，此时需要使用两个视图：一个视图用于显示阴影，另一个视图用于显示内容并设置圆角。这样可以确保圆角和阴影都能正确显示。下面是详细的步骤和代码示例。
// 容器视图，用于阴影UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];shadowView.layer.shadowColor = [UIColor redColor].CGColor;shadowView.layer.shadowOpacity = 0.5;shadowView.layer.shadowOffset = CGSizeMake(5, 5);shadowView.layer.shadowRadius = 10;shadowView.backgroundColor = [UIColor clearColor];shadowView.clipsToBounds = NO; // 保持为NO以显示阴影// 内容视图，用于显示内容和设置圆角UIView *contentView = [[UIView alloc] initWithFrame:shadowView.bounds];contentView.backgroundColor = [UIColor whiteColor];contentView.layer.cornerRadius = 20;contentView.clipsToBounds = YES; // 剪切以显示圆角[shadowView addSubview:contentView]; // 将内容视图添加到阴影视图[self.view addSubview:shadowView]; // 将阴影视图添加到主视图// 开启本地摄像头的预览画面[self.trtcCloud startLocalPreview:self.isFrontCamera view:contentView];