Блог

У меня есть видеообзор, и я хочу нарисовать эту фигуру вокруг видеообзора.

Я хочу:

Я сделал с помощью своего XML-кода:

Вертикальное видео:

Горизонтальное видео:

Моя прямоугольная граница не соответствует точным размерам видеообзора. Когда видео горизонтальное, на заднем плане в верхней и нижней точках происходит переполнение. При вертикальном положении справа и слева происходит переполнение. Их цвета также плохо сочетаются.

Я не хочу, чтобы мои изменения отрицательно влияли на разрешение видео.

Мой прямоугольник границы 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 inside of CardView . Удалите elevation, background и outlineProvider в 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

попробуйте и поиграйте с ним.