如何在 RelativeLayout 中保持视图对齐？

Question

下面发布的xml布局是listView的布局，editText允许用户输入字符串，imageView是按下时可点击的图标，字符串应添加到listView.

视图相互对齐，如下图xml 所示。问题是当用户输入一个很短的字符串或很长的字符串然后单击图标将其添加到listview 时，会发生我失去CheckBox 和imageView 的对齐方式。

例如，最初listview 的对齐方式如下，其中CB 指的是CheckBox，iv 指的是Imageview，圆点表示分隔视图的空格：

topic_1..........CB..........IV

topic_2..........CB..........IV

topic_3..........CB..........IV

topic_4..........CB..........IV

topic_5..........CB..........IV

topic_6..........CB..........IV

topic_10000..........CB..........IV

t..........CB..........IV

如您所见，在“topic_10000”和“t”中，CB 和 IV 的位置都发生了位移。但我希望checkBox 和imageview 始终相互对齐，无论主题有多长。

我怎样才能做到这一点？

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<RelativeLayout 
    android:id="@+id/rl1_List"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_alignParentStart="true"
    android:paddingEnd="10dp"
    android:paddingStart="10dp">
    <TextView 
        android:id="@+id/tvlist_topic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

<RelativeLayout 
    android:id="@+id/rl2_List"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/rl1_List"
    android:layout_centerInParent="true"
    android:layout_marginStart="70dp"
    android:layout_marginEnd="70dp">
    <CheckBox 
        android:id="@+id/cbList_hook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:checked="false"/>
</RelativeLayout>

<RelativeLayout 
    android:id="@+id/rl3_List"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/rl2_List"
    android:layout_alignParentEnd="true"
    android:layout_marginStart="30dp"
    android:layout_marginEnd="30dp">
    <ImageView 
        android:id="@+id/ivList_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:clickable="true"
        android:src="@drawable/delete_icon"
        android:contentDescription="icon to delete item from the Listview"/>
</RelativeLayout>

Answer 1

使用

android:layout_alignLeft="@+id/firstCBId"

在你所有的 CB 上，除了第一个。

另外，你不应该使用所有嵌套的RelativeLayout：一个就足够了。然后，您可以使用android:layout_below 作为垂直间距。

Answer 2

您可以使用 linearlayout 而不是 relativelayout 并应用 weightsum。在下面的示例中，我对所有 3 个视图应用了相同的权重。您可以根据自己的需要进行设置。

<?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="6" >

<TextView
    android:id="@+id/tvlist_topic"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_weight="2" />

<CheckBox
    android:id="@+id/cbList_hook"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:checked="false"
    android:focusable="false"
    android:focusableInTouchMode="false" />

<ImageView
    android:id="@+id/ivList_delete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:clickable="true"
    android:contentDescription="icon to delete item from the Listview"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:src="@drawable/ic_launcher" />

</LinearLayout>

Answer 3

只要text的lenth是可变的，就可以给textView的Relativelayout设置fixed lenght，然后把第二个View“checkBox”的relativeLayout放到textView的relativeLayout的末尾，然后为最后一个relativeLayout 2 Imageview 之一”，您可以指定 marginStart。

这样你就可以控制android:id="@+id/rl1_List"的宽度

以下是对上述文字的解释。

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<RelativeLayout 
    android:id="@+id/rl1_List"
    android:layout_width="170dp"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_alignParentStart="true">
    <TextView 
        android:id="@+id/tvlist_topic"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

<RelativeLayout 
    android:id="@+id/rl2_List"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/rl1_List"
    android:layout_centerInParent="true">
    <CheckBox
        android:id="@+id/cbList_hook"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:checked="false"/>
</RelativeLayout>

<RelativeLayout 
    android:id="@+id/rl3_List"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/rl2_List"
    android:layout_alignParentEnd="true"
    android:layout_marginStart="100dp">
    <ImageView 
        android:id="@+id/ivList_delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:clickable="true"
        android:src="@drawable/delete_icon"
        android:contentDescription="icon to delete item from the Listview"/>
</RelativeLayout>

Answer 4

这可以通过使用 LinearLayout 而不是 RelativeLayout 轻松实现。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Text1"/>
<CheckBox
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:src="@drawable/ic_launcher"/>

</LinearLayout>

如果你只想使用相对布局，那就去吧

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
    android:layout_width="wrap_content"
    android:id="@+id/textview"
    android:padding="20sp"
    android:layout_height="wrap_content"
    android:text="Text1"/>
<CheckBox
android:layout_width="wrap_content"
android:padding="20sp"
android:layout_alignParentRight="true"
android:drawableLeft="@drawable/ic_launcher"
android:layout_height="wrap_content" />


</RelativeLayout>