android - 将多个嵌套的 LineairLayout 转换为单个 RelativeLayout

Question

首先，我在 UI 方面总体上很糟糕，这就是我需要一些帮助的原因。现在我有以下内容:

用Paint图片解释:

我目前拥有的实际截图:

使用可以在本文底部找到的代码。这是通过一些嵌套的 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:我的 Item 有两种不同的状态:一种是未勾选/绿色勾选/红叉，只显示 View 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>

希望对您有所帮助。