使用隐藏元素规划RelativeLayout

Question

我正在尝试将列表项布局转换为使用RelativeLayout（而不是嵌套的LinearLayouts和权重）。下图是两张图片，展示了我希望列表项看起来如何，每个列表项中的4（/ 5）个元素周围都有彩色边框。

每个列表项还有一个隐藏视图，当您按箭头（紫色边框）时，该视图会展开，以显示此全部下方的另一个元素（第二个图像中的黄色边框）。我正在使用SlideExpandableListView，只需要设置触发器的ID和隐藏的视图。

我面临的最初困难是让橙色和紫色元素（ O + P ）保持在绿色和蓝色的右侧（ G + B ），让 G + B 以宽度方式填充剩余空间。

每个元素的高度为48dp， O + P 的宽度也为48dp。

在我到目前为止尝试过的布局中， O + P 会重叠 G + B ，或尝试在 G + B上使用右边距， O + P 关闭屏幕。

-

<?xml version="1.0" encoding="utf-8"?>
<!-- a single row item for a Stacks listview -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/primary_elements"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="@string/lorem_title" />

        <TextView
            android:id="@+id/listitem_notes"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_below="@id/listitem_name"
            android:text="@string/lorem_paragraph" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/secondary_elements"
        android:layout_width="48dp"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/listitem_name" >

        <TextView
            android:id="@+id/listitem_actionable_items"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignBottom="@+id/listitem_notes"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="16dp"
            android:background="@color/Khaki"
            android:gravity="center"
            android:textIsSelectable="false" />

        <!-- Quick action button - specific ID is required (SlideExpandableListView lib) -->
        <RelativeLayout
            android:id="@+id/expandable_toggle_button"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true" >

            <!-- ImageView (arrow) in here, works, taken out for brevity -->
        </RelativeLayout>
    </RelativeLayout>

    <!-- Quick action expanded view - specific ID is required (SlideExpandableListView lib) -->
    <RelativeLayout
        android:id="@+id/expandable"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@id/primary_elements">

        <!-- TODO - options inside the hidden view-->

    </RelativeLayout>

</RelativeLayout>

-

Answer 1

检查一下，这是否有效。我删除了一些字符串/颜色名称。

<?xml version="1.0" encoding="utf-8"?>
<!-- a single row item for a Stacks listview -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/secondary_elements"
        android:layout_width="48dp"
        android:layout_height="96dp"
        android:layout_alignParentRight="true" >

        <TextView
            android:id="@+id/listitem_actionable_items"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignBottom="@+id/listitem_notes"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="16dp"
            android:background="#addada"
            android:gravity="center"
            android:textIsSelectable="false" />

        <!-- Quick action button - specific ID is required (SlideExpandableListView lib) -->

        <RelativeLayout
            android:id="@+id/expandable_toggle_button"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true" >

            <!-- ImageView (arrow) in here, works, taken out for brevity -->
        </RelativeLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/primary_elements"
        android:layout_width="match_parent"
        android:layout_height="96dp"
        android:layout_toLeftOf="@+id/secondary_elements" >

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="lorem_title" />

        <TextView
            android:id="@+id/listitem_notes"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_below="@id/listitem_name"
            android:text="lorem_paragraph" />
    </RelativeLayout>

    <!-- Quick action expanded view - specific ID is required (SlideExpandableListView lib) -->

    <RelativeLayout
        android:id="@+id/expandable"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@id/primary_elements" >

        <!-- TODO - options inside the hidden view -->

    </RelativeLayout>

</RelativeLayout>