1

我想要一个基于 RelativeLayout 的 android UI，它看起来像下面的模拟图形： 在此处输入图像描述

下面是我的布局xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayoutForPreview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!--  surface view that contains camera preview , and seats above @+id/linearLayoutToolbar -->
    <SurfaceView
        android:id="@+id/surfaceViewBarcodeScanner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!--  LinearLayout that contains toolbar that is divided into 3 sections horizontally -->

    <LinearLayout
        android:id="@+id/linearLayoutToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/surfaceViewBarcodeScanner"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/scanner_bottom_left" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/scanner_bottom_center_toolbar" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/scanner_bottom_right_landscape_button" />
    </LinearLayout>

</RelativeLayout>

我使用了 Eclipse GUI 调色板和我自己的编辑，但是输出不是我所期望的，SurfaceView 似乎覆盖了所有屏幕，底部的 LinearLayout 没有出现。

我在 Galaxy S3 设备上的当前结果快照：

在此处输入图像描述

任何帮助将不胜感激，谢谢。

4

3 回答 3

0 
// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayoutForPreview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_width="match_parent">
        <SurfaceView
            android:id="@+id/surfaceViewBarcodeScanner"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linearLayoutToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/scanner_bottom_left" />
        </LinearLayout>
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_weight="2">
            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/scanner_bottom_center_toolbar" />
        </LinearLayout>
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/scanner_bottom_right_landscape_button" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>
于 2013-11-09T04:01:55.337 回答
0

您能否尝试修改您的布局，如下所示：

  • 定义您的 SurfaceView 并将其 layout_above 值设置为上一步中创建的线性布局的 ID。将 layout_alignParentTop 设置为 true。
  • 定义底部线性布局并将 layout_alignParentBottom 设置为 true。

仅包含重要部分的智能代码段：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">

    <SurfaceView
        android:id="@+id/surfaceViewBarcodeScanner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/linearLayoutToolbar" />
    <LinearLayout
        android:id="@+id/linearLayoutToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

我希望这能解决你的问题。

于 2013-11-08T23:08:58.543 回答
0

你可以使用 Linearlayout 而不是 Realtive Layout

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

    <SurfaceView
        android:id="@+id/surfaceViewBarcodeScanner"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:id="@+id/linearLayoutToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        >
<!--         inside elements  -->
    </LinearLayout>


</LinearLayout>

否则你应该使用 android:layout_above="@+id/linearLayoutToolbar" 到你的表面视图并删除 android:layout_below 属性并将 android:layout_alignParentBottom="true" 添加到你的工具栏视图。

于 2013-11-09T03:35:27.977 回答