Android：如何制作圆形相机预览？

Question

如何创建像这样的圆形/椭圆形或圆角相机预览（中间的圆圈应该是相机预览）？

伦敦图片用按钮和视图代表ui的其余部分，因此必须是可见的整体，这就是为什么我不能使用添加android:background之类的解决方案作为像这样的半径形状矩形：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="50dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

当我尝试将android:background设置为SurfaceView的椭圆形xml时，它也不起作用：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="120dp"
        android:height="120dp"/>

    <stroke
        android:color="#FF000000"
        android:width="2dp" />
</shape>

如果有可能以某种方式扩展SurfaceView并使用它，我该怎么改写呢？

Answer 1

您可以像这样使用CardView来放置您的textureView或surfaceArea。

<androidx.cardview.widget.CardView
        android:id="@+id/cameraWrapper"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:cardCornerRadius="360dp"
        android:foreground="@drawable/background_camera_overlay_circle_inactive"
        app:cardElevation="0dp"
        android:padding="-20dp">

        <com.mobile.myapp.CustomViews.CameraSourcePreview //you can use SurfaceView, TextView, ImageView
            android:id="@+id/preview"
            android:layout_width="400dp"
            android:layout_height="400dp"/></androidx.cardview.widget.CardView>

要注意的关键事项。

• cornerRadius设置为360以使CardView具有圆形形状
• cardElevation设置为零以除去高程，从而使CardView平坦
• padding设置为负值，以便很好地将子视图隐藏起来
子视图的
• layout_width和layout_height值大于cardView的值。
• CardView具有一个前台属性，该属性已设置为可绘制文件background_camera_overlay_circle，该文件仅绘制圆形边框

background_camera_overlay_circle

的内容

<?xml version="1.0" encoding="utf-8"?>
    <shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
     <stroke android:width="5dp" android:color="@color/colorRed_FB7B7B"/>
  </shape>

尝试一下。

Answer 2

嗯，我认为最简单的方法是在SurfaceView上放置一个imageView 示例来自xml：

<RelativeLayout ....>
  <SurfaceView ... />
  <ImageView ... />
</RelativeLayout>