android - 如何让Android的RelativeLayout正常工作？

Question

标题有点挑衅，但我观察到一些对我来说莫名其妙的行为。

我有三组 View ，每组都有一个 TextView tvX 和一个 Spinner spX，X=A,B,C。 textview 是微调器的标题或提示，所以我想要微调器 layout_toRightOf 它是各自的 TextView。由于它们相互引用，因此我还将 Spinner 的 layout_alignBaseline 指向了 TextView。这工作正常。现在我想要堆叠的三个集合，以便 TextViews 对齐右边缘(每个都有一个尾随冒号，它们应该对齐)，并且 Spinners 对齐左边缘。所以在堆栈中

  +----------+----------+
  |      tvA:|spA       |
  +----------+----------+
  |      tvB:|spB       |
  +----------+----------+
  |      tvC:|spC       |
  +----------+----------+

B 和 C View 分别获取引用 A 和 B 的属性；即 layout_below 和 layout_alignLeft/Right。

现在碰巧tvB和tvC的文字比tvA的长。我猜 RelativeLayout 缩进 tvA，这样 tvB 和 tvC 的较长文本就有空间，并且它们右对齐。相反，整个左列获得了 tvA 文本的宽度，而 tvB 和 tvC 分别分成两行。我试探性地尝试重新安排一些事情，让 tvB 成为主播，而 layout_above tvA。这导致 tvA 完全消失。无论如何，这都不是一个合适的解决方案，因为在另一种语言中，文本的相对长度可能是另一种方式!如果我将字符添加到 tvA 以使其最长，tvB 和 tvC 不会再被破坏，但冒号仍然不会对齐!事实上，看起来 tvB 居中位于 tvA 下方，而 tvC 位于 tvC 下方。

如果我左对齐 tvX 并右对齐 spX，它看起来最好。但即使在这种情况下，也会发生一些奇怪的事情:Spinners 不再遵守属性 layout_width="wrap_content"，它们展开以填充 TextView 留下的所有空间。中间参差不齐的对齐看起来仍然很糟糕，这就是为什么我希望对齐发生在中间。

Android Studio 在编辑 XML 时显示生成的布局，如果光标位于 View 的 XML 定义中，它还会显示 View 边缘。在那里我可以很好地观察到属性中的布局提示是如何被忽略的!在实际手机上也会发生同样的事情。

这是 XML 代码:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/indented_margin"
        android:layout_marginBottom="5dp">

        <TextView
            android:id="@+id/device_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:text="@string/settings_sb_device" />

        <Spinner
            android:id="@+id/device"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/device_title"
            android:layout_alignBaseline="@id/device_title" />

        <TextView
            android:id="@+id/can_speed_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_below="@id/device_title"
            android:layout_alignRight="@id/device_title"
            android:text="@string/settings_sb_speed" />

        <Spinner
            android:id="@+id/can_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/can_speed_title"
            android:layout_alignBaseline="@id/can_speed_title"
            android:layout_alignLeft="@id/device"
            android:entries="@array/can_speeds" />

        <TextView
            android:id="@+id/baudrate_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_below="@id/can_speed_title"
            android:layout_alignRight="@id/can_speed_title"
            android:text="@string/settings_sb_baudrate" />

        <Spinner
            android:id="@+id/baudrate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/baudrate_title"
            android:layout_alignBaseline="@id/baudrate_title"
            android:layout_alignLeft="@id/can_speed"
            android:entries="@array/baudrates" />
    </RelativeLayout>

我已经搜索了相关 View 的可用属性集，但找不到任何线索。谁能解释这种行为？我忽略了什么？

Answer 1

为此使用 GridLayout，columnCount 为 2

例如:

<android.support.v7.widget.GridLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:alignmentMode="alignBounds"
                app:columnCount="2"
                app:orientation="vertical"
                >

对于左侧的 Tv + 冒号，使用 RelativeLayout 甚至 LinearLayout 都可以。

              <LinearLayout
                    android:gravity="center"
                    android:orientation="horizontal"
                    app:layout_column="0"
                    app:layout_columnWeight="1"
                    app:layout_gravity="fill_horizontal|fill_vertical"
                    app:layout_row="0">

                    <TextView 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        tools:text="Label"
                        android:maxLines="2"
                        android:ellipsize="end"
                        android:textColor="@color/black"/>

                   <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        tools:text=":"
                        android:textColor="@color/black"/>
           </LinearLayout>