【问题标题】:how to create rounded corner videoview in android?如何在android中创建圆角视频视图?
【发布时间】:2013-06-13 10:28:20
【问题描述】:

在我的应用程序中,我想将 videoview 显示为圆角。我尝试将 videoview/surfaceview 放置在线性布局内,圆角设置为线性布局。但它并不完美。我无法将圆角设置为 videoview/surfaceview。我想将视图设置为下图:

有人知道怎么做吗?

【问题讨论】:

  • 你不能塑造它吗?你试过什么?
  • 我试过下面的代码:
  • schemas.android.com/apk/res/android" android:shape="rectangle">
  • 只需删除所有其他标签,如“渐变”、“中风”。只需使用“角落”。这会给你想要的输出。

标签: android android-videoview rounded-corners


【解决方案1】:

这是 rounded VideoView 的 XML 代码。

<androidx.cardview.widget.CardView
            android:id="@+id/videoCard"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            app:cardCornerRadius="20dp"
            card_view:cardBackgroundColor="@color/white">

            <VideoView
                android:id="@+id/relativeVideo"
                android:layout_width="match_parent"
                android:layout_height="225dp"
                android:paddingTop="-10dp"
                android:paddingBottom="-10dp" />
        </androidx.cardview.widget.CardView>

负内边距很重要,否则 VideoView 的高度在顶部和底部都小于 cardview 的一半cornerRadius。您可以随意设置高度,但负边距应始终为 cardCornerRadius 的一半。图中紫色为视频预览,与xml无关。

祝你有美好的一天!

【讨论】:

    【解决方案2】:

    很简单, 1.创建一个圆角的drawable,如@sunil kumar所述 2.将该drawable设置为您的布局作为背景 3. 使用该布局集时 layout(your layout item name).clipToOutline = true

    【讨论】:

      【解决方案3】:

      当解决方案非常简单时(只要你的 min sdk > 21),不知道为什么会有这么多不好的答案。创建一个形状并将其放在视频上方是行不通的,因为您显然希望背景透明以查看其背后的视图。

      我在这里找到了答案Android View Clipping。您只需将视频视图放在框架布局中,为框架布局添加圆形背景,添加轮廓提供程序并将框架布局剪辑到轮廓。

      后台rounded_video_background:

      <shape xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle">
          <solid android:color="#000000"/>
          <corners android:radius="16dp" />
      
      </shape>
      

      里面的frame layout和video view:

      <FrameLayout
              android:id="@+id/video_view_container"
              android:layout_width="90dp"
              android:layout_height="120dp"
              android:background="@drawable/rounded_video_background"
              android:outlineProvider="background">
      
              <VideoView
                  android:id="@+id/video_view"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:layout_gravity="center"
                  />
      
          </FrameLayout>
      

      最后一步是剪裁到轮廓(没有看到在 xml 中执行此操作的方法,所以我以编程方式执行此操作): video_view_container.clipToOutline = true

      【讨论】:

        【解决方案4】:

        您可以使用 FramLayout 和 XML drawable 来制作它

        框架布局

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
        
                    <VideoView
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/dp_240"
                        android:layout_margin="@dimen/dp_24"/>
        
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@drawable/rounded_corner_video_bg" />
                </FrameLayout>
        

        XML 可绘制对象

        <?xml version="1.0" encoding="utf-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <stroke
                android:width="@dimen/dp_24"
                android:color="@color/md_white_1000" />
            <corners android:radius="@dimen/dp_24" />
        </shape>
        

        【讨论】:

          【解决方案5】:

          它对我有用,

                  <android.support.v7.widget.CardView
                  xmlns:card_view="http://schemas.android.com/apk/res-auto"
                  android:layout_gravity="center"
                  android:layout_width="match_parent"
                  card_view:cardCornerRadius="25dp"
                  android:layout_height="wrap_content">
              <VideoView
                  android:id="@+id/video"
                  android:layout_width="match_parent"
                  android:layout_height="215dp" />
              </android.support.v7.widget.CardView>
          

          【讨论】:

          • 卡片视图是垃圾,因为内部视频视图,它没有圆角半径,正方形会出来。
          【解决方案6】:

          这直接是不可能的,但您可以通过在 videoview 顶部绘制一个 imageview 并设置一个从中间透明并在角上设置为圆形纯色的图像来做到这一点。 检查这个:Click here

          【讨论】:

            【解决方案7】:

            您可以尝试将不同的视图叠加在一起,以创建您正在寻找的圆角。尝试在每个角的 VideoView 上放置四个 ImageView,以实现所需的圆角。我已经成功使用 RelativeLayout 来完成此操作,但您也可以尝试使用 FrameLayout 将视图保持在一起。

            【讨论】:

              【解决方案8】:

              在名为 shape_video.xml 的可绘制文件夹中创建一个 xml 文件

              <?xml version="1.0" encoding="utf-8"?>
              <shape xmlns:android="http://schemas.android.com/apk/res/android"
                  android:shape="rectangle" >
                     <corners android:radius="6dp" />
               </shape>
              

              根据您的 rqmnt 和 videoview 的背景属性更改半径,给

              android:background="@drawable/shape_video"
              

              【讨论】:

                【解决方案9】:

                将rounded.xml放入你的drawable文件夹并设置视频的framelayout,如android:background="@drawable/rounded.xml"

                <?xml version="1.0" encoding="utf-8"?>
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle" android:padding="10dp">
                
                    <solid android:color="#FFFFFFFF" />
                    <corners android:radius="7dp" />
                
                </shape>
                

                【讨论】:

                • 我使用了您的代码,上面设置为框架布局背景,但它不起作用。唯一的问题是 videoview/surfaceview,而不是任何其他组件。
                猜你喜欢
                • 2019-11-14
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2014-01-26
                • 1970-01-01
                • 1970-01-01
                • 2014-04-07
                • 1970-01-01
                相关资源
                最近更新 更多