将多个嵌套的 LineairLayouts 转换为单个 RelativeLayout

Question

首先，总的来说，我的 UI 很糟糕，这就是我需要帮助的原因。现在我有以下内容：

用画图解释：

我目前拥有的实际截图：

使用可在本文底部找到的代码。这是通过一些嵌套的 LineairLayouts 和权重来完成的。

我现在想要的是以下内容：

1. ImageButton（宽度和高度已知/图像在xml中设置）
2. TextView（高度已知，宽度应填充在 1 到 3 之间）
3. TextView（高度已知，宽度（文本）未知）
4. EditText（高度已知，宽度（文本）未知）
5. AutoCompleteTextView（高度已知，宽度应在 4 到 9 之间填充）
6. TextView（宽度和高度已知/文本在xml中设置）
7. 微调器（高度已知，宽度应填充在 6 到 8 之间）
8. ImageButton（宽度和高度已知/图像在 xml 中设置）这是我现在要添加的。
9. 空格（宽度和高度都在代码中确定以填充空白）

我知道我可能能够弄清楚如何将这个 ImageButton 添加到另一个嵌套的 LineairLayout 和嵌套的权重中，但是由于我的应用程序的性能已经不是那么好，我目前正在尝试解决很多问题性能问题，我认为最好将这个 list_item.xml 转换为单个 RelativeLayout。

那么，我该怎么做呢？我只是在 UI 放置方面很糟糕，所以我会很感激我能得到的所有帮助。如何使用第二个 Paint-image 的结果创建 RelativeLayout？

当前代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <!-- The TextViews -->
    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical" >

            <TextView
                android:id="@+id/tv_product_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:singleLine="true" />

        </LinearLayout>

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_marginTop="@dimen/default_margin" />

    </LinearLayout>

    <!-- The EditTexts -->
    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll1"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible" >

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:orientation="vertical"
            android:padding="0dp">

            <EditText
                android:id="@+id/et_result_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:inputType="number" />

            <TextView
                android:id="@+id/tv_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/tags"
                android:gravity="center" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:padding="0dp"
            android:orientation="vertical">

            <AutoCompleteTextView
                android:id="@+id/actv_result_name"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:ellipsize="end"
                android:inputType="text"
                android:singleLine="true" />

            <Spinner
                android:id="@+id/sp_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <!--<ImageButton
                android:id="@+id/btn_tags"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@android:drawable/ic_menu_manage"
                android:contentDescription="@string/button_tags_content_description"
                android:background="@layout/transparent_background" />-->

        </LinearLayout>

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

---

编辑 1：

在我尝试了@AlexBalo suggestion 之后，它就可以工作了。只是android:layout_leftOf="@id/left_ll" 有问题。

PS：我的项目有两种不同的状态：一个未选中/绿色检查/红十字，仅显示视图 1、2 和 3。还有一个橙黄色检查，就像提供的图片一样。

这是 AlexBalo 迄今为止所做更改的结果：

状态未选中/绿色选中/红十字：

状态橙黄色检查：

使用以下代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xml>
<!-- The DOCTYPE above is added to get rid of the following warning:
     "No grammar constraints (DTD or XML schema) detected for the document." -->

<!-- The View for a single CheckListItem -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/left_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:background="@layout/transparent_background"
            android:contentDescription="@string/checkbox_content_description"
            android:src="@drawable/checkbox_unchecked"
            android:layout_marginTop="@dimen/default_margin"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_image"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_product_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/left_ll"
        android:layout_toLeftOf="@+id/right_ll"
        android:ellipsize="end"
        android:singleLine="true"
        android:layout_marginTop="@dimen/default_margin"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <EditText
        android:id="@+id/et_result_amount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_product_name"
        android:layout_toRightOf="@id/left_ll"
        android:inputType="number"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <AutoCompleteTextView
        android:id="@+id/actv_result_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_toRightOf="@id/et_result_amount"
        android:layout_below="@+id/tv_product_name"
        android:ellipsize="end"
        android:inputType="text"
        android:singleLine="true" />

    <TextView
        android:id="@+id/tv_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_result_amount"
        android:layout_toRightOf="@id/left_ll"
        android:text="@string/tags"
        android:gravity="center"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <Spinner
        android:id="@+id/sp_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/actv_result_name"
        android:layout_toRightOf="@id/tv_tags"
        android:layout_toLeftOf="@id/right_ll"
        android:layout_marginLeft="@dimen/default_margin"
        android:layout_marginBottom="@dimen/default_margin" />

    <LinearLayout
        android:id="@id/right_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/default_margin" />

        <Space
            android:id="@+id/filler_space_price"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

        <ImageButton
            android:id="@+id/btn_tags"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@android:drawable/ic_menu_manage"
            android:contentDescription="@string/button_tags_content_description"
            android:background="@layout/transparent_background"
            android:layout_marginLeft="@dimen/default_margin"
            android:layout_marginBottom="@dimen/default_margin"
            android:layout_marginRight="@dimen/default_margin" />

    </LinearLayout>

</RelativeLayout>

我也遇到了一些问题，即 getView 在创建时被多次调用而不是只调用一次，但这是 another question 的问题。

Answer 1

我认为这就是你所期望的。尝试布局并调整它以满足您的需求：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Left side -->

    <LinearLayout
        android:id="@+id/leftContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/image1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />

        <View
            android:id="@+id/space9left"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/image1" />
    </LinearLayout>

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview2" />

    <EditText
        android:id="@+id/edittext4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/textview2"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Edittext4" />

    <TextView
        android:id="@+id/autocompleteTextview5"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_toLeftOf="@+id/rightContainer"
        android:layout_toRightOf="@+id/edittext4"
        android:layout_below="@+id/textview2"
        android:text="autocompleteTextview5" />

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/edittext4"
        android:layout_toRightOf="@+id/leftContainer"
        android:text="Textview6" />

    <TextView
        android:id="@+id/spinner7"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_below="@+id/autocompleteTextview5"
        android:layout_toRightOf="@+id/textview6"
        android:layout_toLeftOf="@+id/rightContainer"
        android:text="Spinner7" />

    <!-- Right side -->
    <LinearLayout
        android:id="@+id/rightContainer"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="Textview3" />

        <View
            android:id="@+id/space9right"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_below="@+id/image1" />

        <ImageView
            android:id="@+id/image8"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/white" />
    </LinearLayout>

</RelativeLayout>

希望对你有帮助。

Answer 2

一旦您创建了 RelativeLayout，请避免使用不同的 LinearLayout，因为我认为您不需要它们，而是将您的视图 (textView) 直接插入到此 relativeLayout 中，指定它们的绝对位置。

这是一个简短的例子：

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="752dp"
      android:layout_height="336dp"
      android:background="@drawable/img_example_panel">

<TextView 
    android:id="@+id/textView1"
    android:layout_width="342dp"
    android:layout_height="39dp"
    android:layout_marginLeft="261dp"
    android:layout_marginTop="21dp"
    android:textSize="23sp"/>  

<TextView 
    android:id="@+id/textView2"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginLeft="21dp"
    android:layout_marginTop="21dp"
    android:background="#0000"/>

 <TextView 
    android:id="@+id/textView3"
    android:layout_width="226dp"
    android:layout_height="39dp"
    android:layout_marginLeft="388dp"
    android:layout_marginTop="72dp"
    android:textSize="23sp"/> 

 <TextView
    android:id="@+id/textView5"
    android:layout_width="243dp"
    android:layout_height="37dp"
    android:layout_marginLeft="56dp"
    android:layout_marginTop="150dp"
    android:textSize="22sp"
    android:paddingLeft="8dp"
    android:gravity="center_vertical"
    android:background="#0000"/>

 <TextView
    android:id="@+id/textView7"
    android:layout_width="243dp"
    android:layout_height="37dp"
    android:layout_marginLeft="423dp"
    android:layout_marginTop="150dp"
    android:textSize="22sp"/>

当然位置与你的布局无关，你必须调整它们；）