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设置为椭圆形xml到SurfaceView时，它也无法正常工作：

<?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并使用它，那么我应该重写什么？

- Jakub Turcovsky

Answer 1

您可以使用CardView来容纳您的TextureView或SurfaceView，如下所示。

<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>

试一试。

- Kenneth Ngedo

Answer 2

嗯，我认为最简单的方法是在SurfaceView上方放置一个imageView。例如通过xml实现：

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

- Bobby Prabowo

---

背景图片（伦敦）代表我的用户界面，这些元素必须在背景中。 - Jakub Turcovsky

为什么它们必须在后台运行？ 为什么不能使用ImageView创建一个透明的圆形孔，并让SurfaceView的表面通过它显示出来？（或者只需在SurfaceView的视图上绘制，这只是一个透明矩形。） - fadden

抱歉提到了这个问题，ImageView 包含一个带有透明圆的图像，您可以使用 PNG 图像。 - Bobby Prabowo

@2rec 你找到解决方案了吗？我也在尝试创建一个圆形相机预览。 - TOP

@Sunshinetpu 你还没有吗？ - Jakub Turcovsky

@2rec 我也是。太难过了。 - TOP