如何在 VideoView 周围绘制带有边框阴影形状的矩形？

问题描述

我有 VideoView，我想在 VideoView 周围绘制这个形状。

我想：

我用我的 xml 代码制作的：

垂直视频：

水平视频：

我的矩形边框与 VideoView 的确切尺寸不符。当视频水平时，在顶部和底部点的背景中有溢出。垂直时，左右有溢出。它们的颜色也不太匹配。

我不希望我的更改对视频分辨率产生负面影响。

我的矩形边框xml：

                <solid
                    android:color="@color/grey_300" />
            </shape>
        </item>

        <item
            android:bottom="2dp"
            android:left="2dp"
            android:right="2dp"
            android:top="2dp">

            <shape>

                <gradient
                    android:angle="270"
                    android:endColor="#ffffff"
                    android:startColor="#ffffff" />

                <stroke
                    android:width="1dp"
                    android:color="@color/grey_300" />

                <corners
                    android:radius="10dp" />

                <padding
                    android:bottom="10dp"
                    android:left="10dp"
                    android:right="10dp"
                    android:top="10dp" />

            </shape>
        </item>
    </layer-list>
</item>

和布局xml：

<RelativeLayout
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/rect_border"
        android:elevation="5dp"
        android:outlineProvider="bounds">

        <VideoView
            android:id="@+id/video_loader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:background="@drawable/bg_rounded"
            android:gravity="center" />

        <ImageView
            android:id="@+id/icon_video_play"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            app:srcCompat="@drawable/ic_baseline_play_circle_filled_24" />
    </RelativeLayout>

解决方法

尝试在 RelativeLayout 内使用 CardView。移除 RelativeLayout 中的海拔、背景和大纲提供者，并将 android:layout_width 的 android:layout_height 和 VideoView 设置为 wrap_content。

,

尝试下面的代码片段来显示带角边框的视频视图

矩形边框xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item
        android:bottom="1px"
        android:left="1px"
        android:right="1px"
        android:top="1px">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#6db23f" />
            <solid android:color="#ffffff" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"></corners>
        </shape>
    </item>

</layer-list>

布局xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardView="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:background="@drawable/rect_border"
    android:orientation="vertical" >

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        cardView:cardBackgroundColor="#ffffff"
        cardView:cardElevation="2dp"
        cardView:cardUseCompatPadding="true">

        <VideoView
            android:id="@+id/contentImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:background="@drawable/bg_rounded" />

    </androidx.cardview.widget.CardView>

</LinearLayout>

,

只需将您的视频视图放入 framelayout 并像您一样向框架布局添加圆形背景，添加轮廓提供程序并将框架布局剪辑到轮廓中。

<FrameLayout
    android:id="@+id/framelayout"
    android:layout_width="90dp" 
    android:layout_height="120dp" 
    android:background="@drawable/rounded_background"
    android:outlineProvider="background">

    <VideoView
        android:id="@+id/vidview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        />

</FrameLayout>

然后以编程方式裁剪到轮廓

framlayout.clipToOutline = true

试着玩玩它。