Android 中 FrameLayout 中的分层 SurfaceView

Question

我正在尝试为 Android 构建增强现实应用程序，并遇到了分层表面视图的问题。我需要一个表面视图来显示我将在其上叠加图形的相机预览，并且我需要一个表面视图来绘制图形。第二个表面也需要绘制在相机预览上方，但具有透明背景。在我当前的实现中，我有两个表面视图按预期工作和显示，但背景不透明，因此没有第二个表面视图的外观，绘制的图形叠加在相机预览表面视图上。如何才能实现这一目标？在搜索大量堆栈溢出问题以及其他论坛时，我遇到了许多与此问题相关的相互矛盾的意见。有人说在 Android 中分层表面视图是不可能的，而另一些人则说这是使用不同布局的问题（FrameLayout 与 LinearLayout？）具体来说，我的实现包括两个视图：一个类 CustomCameraView，它扩展了 SurfaceView，另一个类是CustomDrawView，它还扩展了 FrameLayout 中包含的 SurfaceView，其中 CustomDrawView 出现在 CustomCameraView 之后。如何将它们分层以便 CustomDrawView 看起来叠加在 CustomCameraView 上？

Answer 1

我想很多人都尝试过这个。 Google 工程师明确指出（此处），您应该避免堆叠表面视图。即使有人找到了一些技巧来做到这一点，它也可能是不兼容的并且会导致问题。

我认为这提供了三个选项，具体取决于您的要求：

• 表面视图顶部的视图

使用表面视图进行相机预览，并将视图堆叠在其顶部。这种方法的缺点是在“普通”视图上绘制 a) 速度较慢，b) 发生在 UI 线程中。如果您自己实现线程，则可以绕过 b)。但一般来说，如果您的叠加层包含 UI 元素或一些不需要经常更新的 Drawable 之类的内容，那么这可能是可行的方法。

• 在 SurfaceView 中完成所有操作

这将为您提供更好的性能并减少运行时的开销。您只有一个 SurfaceView。在 SurfaceView 上合成叠加层并在那里绘制所有内容。当然，您可以结合使用这两种方法。

• 在 GLSurfaceView 中完成所有操作

这可能是获得真正性能的方法。与上面类似，但相机视图渲染为 GLSurfaceView。

Answer 2

我使用以下方法在相机的 SurfaceView 上方有 2 个透明视图来完成此工作：

我的活动在 onCreate() 方法中设置其所有视图，我没有为此使用任何布局文件。它看起来如下：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null); //savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

    cameraPreview = new CameraPreview(this);
    addContentView(cameraPreview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

    animationView = new AnimationView(this);
    addContentView(animationView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

    crosslinesView = new CrosslinesView(this);
    addContentView(crosslinesView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}

cameraPreview 的类型为 SurfaceView，animationView 和 crosslinesViews 的类型为 View< /代码>。后两个视图的 onDraw() 如下所示：

protected void onDraw(Canvas canvas) {
    // Have the view being transparent
    canvas.drawARGB(0, 0, 0, 0);
    // Your drawing code goes here
    // ...
}

祝你好运！