如何正确地在SurfaceView上叠加UI小部件？

Question

我已经成功在RelativeLayout中实现了肖像相机预览、一个按钮和一个文本视图。它们都存在，但是不可见，它们可以正确响应触摸操作。我该如何设置Z-Order或优先级？这是我的main.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+layout/frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

<SurfaceView android:id="@+id/surface" android:layout_width="fill_parent" android:layout_height="fill_parent"></SurfaceView>
<Button android:layout_height="wrap_content" android:layout_width="match_parent" android:onClick="hablar" android:text="Button" android:id="@+id/button1"></Button>
<EditText android:layout_height="wrap_content" android:layout_width="match_parent" android:text="EditText" android:id="@+id/edita"></EditText>
</RelativeLayout>
</FrameLayout>

- AlfredoVR

---

我也遇到了同样的问题，这个问题困扰了我两天了，你找到解决方法了吗？ - User7723337

以下网址提供了一些相关的好信息：https://dev59.com/IkzSa4cB1Zd3GeqPorL0 http://github.com/commonsguy/cw-advandroid/tree/master/Camera/Preview/ - user1508921

Answer 1

只需在SurfaceView上方添加一个View即可：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <SurfaceView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="lalalalala" />
</FrameLayout>

- xuxu

Answer 2

在ApiDemos中的SurfaceView覆盖示例展示了如何实现这一点。请查看此处的“SurfaceView Overlay”部分：http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/index.html

- hackbod

---

我看过那个例子，但我正在使用SurfaceView，它不起作用。有没有办法使它那样工作？ - AlfredoVR

@hackbod，我能在小部件中使用SurfaceView吗？（我已经读到它不支持）另外，您能否看一下这个问题：如何在Nexus S和Galaxy SII的小部件中打开相机。 - Viktor Apoyan

Answer 3

答案一点也不直观，但我找到了如何做。 与线性布局不同，在相对布局中，声明的顺序不定义Z顺序。 我能够通过在XML中声明两个视图，并在Activity的onCreate方法中以编程方式叠加它们来覆盖Camera Preview上的TextView。

假设您有一个带有漂亮透明背景的TextView的XML，您想将其覆盖在相机预览框架布局上，因为为什么不呢？这看起来很酷！

<RelativeLayout>
      <TextView
        android:id="@+id/txtnombotiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ola ke ase"
        android:textColor="#000000"
        android:textSize="16sp"    
        android:background="#55ffffff" 
       />
  <FrameLayout
      android:id="@+id/cameraPreview"
      android:layout_width="match_parent"
      android:layout_height="240dp">     
  </FrameLayout>
</RelativeLayout>

如果不处理，相机会遮挡您的文本，无论如何 :( 要解决此问题，让我们进行编程处理，并执行以下操作： 1）将TextView从其父布局中分离 2）将其附加到相机的帧布局中，在首先附加相机之后。

这是代码：

OnCreate(){ ...blaa blaaa...

//Create camera instance and reference to our frame Layout
mPreview = new CameraPreview(this, mCamera, previewCb, autoFocusCB);        
FrameLayout preview = (FrameLayout) findViewById(R.id.cameraPreview);
//Add camera to the Frame Layout
preview.addView(mPreview);
//Get reference to the TextView you want to overlay and type something funny
TextView txt=(TextView)findViewById(R.id.txtnombotiga);     
txt.setText("ola keee aseee!");
//1) Step 1, here comes the magic! dettach the textView from its original Layout
((ViewGroup)txt.getParent()).removeView(txt);
//1) Step 2, voila! attach it to the View, order matters here so it will appear on 
//top of the camera!
preview.addView(txt);

这是一般的做法，如果您需要更多细节，请告诉我。 我需要在工作中遵守截止日期，因此我使用脑海中首先想到的解决方案，有时并不是最优雅或最有效的方法。如果您知道更好的方法，请与我们分享！

- Josh

---

如果您在RelativeLayout中更改TextView和FrameLayout的顺序，文本将位于相机顶部。<RelativeLayout><FrameLayout><TextView></RelativeLayout>而且您的解决方案是有效的。 - JOE

Answer 4

嗯，我把它放在了一个FrameLayout中，其中SurfaceView是ZoomControl的兄弟节点。也就是说，对我来说，这种结构是可行的：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <SurfaceView
        android:id="@+id/surface"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <ZoomControls
        android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        />
</FrameLayout>

也许是RelativeLayout出了问题？

- DuneCat