音视频场景会高频使用到视频渲染控件，例如直播播放、点播播放、本地摄像头预览等。为了更加美观，我们可以为视频渲染控件设置个性化的样式布局，例如阴影和圆角效果。下面我们将分别介绍 Android 平台 以及 iOS 平台 的视频渲染控件样式布局实现方式。
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.CardViewxmlns: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.CardViewxmlns: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.TXCloudVideoViewandroid: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];
