使用 relativelayout 对齐在中心对齐的 2 行控件答案

【问题标题】：Align 2 rows of controls that align at the center using relativelayout使用 relativelayout 对齐在中心对齐的 2 行控件
【发布时间】：2014-04-09 17:27:00
【问题描述】：

Android Studio 0.5.4

你好，

我有一个包含 2 列 EditText 的 relativeLayout。

我希望第二行从屏幕中心开始，第一列中的 EditText 从左侧开始并在中心停止。

我一直在搞乱 centerInParent 和 centerHorizonatal toLeftOf，但看不到它是否正确。我不想使用 LinearLayout 并希望在可能的情况下仅使用 RelativeLayout 来做到这一点。所以 linearLayout 不是我的选择。

非常感谢您的任何建议。截屏：

我正在使用的样式：

<resources>
    <style name="addressBookLand">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">22sp</item>
        <item name="android:layout_marginBottom">4dp</item>
    </style>
</resources>

布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fffc">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:gravity="center"
        android:inputType="text"
        android:text="Address Book App"
        android:textStyle="bold|italic" />

    <EditText
        android:id="@+id/etFirstName"
        style="@style/addressBookLand"
        android:hint="Enter your first name"
        android:inputType="text"
        android:layout_below="@id/tvTitle"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/etLastName"/>

    <EditText
        android:id="@+id/etLastName"
        style="@style/addressBookLand"
        android:hint="Enter your last name"
        android:inputType="text"
        android:layout_below="@id/tvTitle"
        android:layout_centerHorizontal="true"/>

    <EditText
        android:id="@+id/etAddressLine"
        style="@style/addressBookLand"
        android:hint="Enter your address"
        android:inputType="text"
        android:layout_below="@id/etFirstName"/>

    <EditText
        android:id="@+id/etDistrict"
        style="@style/addressBookLand"
        android:hint="Enter your district"
        android:inputType="text"
        android:layout_below="@id/etLastName"
        android:layout_toRightOf="@id/etAddressLine"/>

    <EditText
        android:id="@+id/etCity"
        style="@style/addressBookLand"
        android:hint="Enter your city"
        android:inputType="text"
        android:layout_below="@id/etAddressLine"/>

    <EditText
        android:id="@+id/etPostCode"
        style="@style/addressBookLand"
        android:hint="Enter your postcode"
        android:inputType="number"
        android:layout_below="@id/etDistrict"
        android:layout_toRightOf="@id/etCity"/>

    <EditText
        android:id="@+id/etPhoneNumber"
        style="@style/addressBookLand"
        android:hint="Enter your phone number"
        android:inputType="phone"
        android:layout_below="@id/etCity"/>

    <EditText
        android:id="@+id/etEmailAddress"
        style="@style/addressBookLand"
        android:hint="Enter your email Address"
        android:inputType="textEmailAddress"
        android:layout_below="@id/etPostCode"
        android:layout_toRightOf="@id/etPhoneNumber"/>

    <Button
        android:id="@+id/btnSubmit"
        style="@style/addressBookLand"
        android:text="Submit"
        android:layout_below="@id/etPhoneNumber"
        android:layout_toLeftOf="@id/btnCancel"
        android:layout_alignParentLeft="true"/>

    <Button
        android:id="@+id/btnCancel"
        style="@style/addressBookLand"
        android:onClick="onClickCancel"
        android:text="Cancel"
        android:layout_below="@id/etEmailAddress"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

【问题讨论】：

您的描述不清楚。您可以发布所需布局的图像吗？另外，为什么 LinearLayout 不是一个选项？

标签： android android-relativelayout

【解决方案1】：

如果您绝对不想使用 LinearLayout，那么一个优雅的解决方案可能是创建一个宽度和高度为 0 的 TextView 作为中心点的标记，并使用它来定位您的另一个 View围绕它。例如；

 <TextView
    android:id="@+id/centre_marker"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerHorizontal="true"/>

因为它的宽度为 0（如果你想在你的 EditTexts 之间留一个空格，你可以给这个标记一个宽度，或者在你的另一个 Views 上使用边距），它将或多或少正好在中心。因此，您可以将左侧的所有组件对齐到右侧，并将右侧的所有组件对齐到左侧。例如；

 <EditText
    android:id="@+id/etFirstName"
    style="@style/addressBookLand"
    android:hint="Enter your first name"
    android:inputType="text"
    android:layout_below="@id/tvTitle"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@id/centre_marker"/>
<EditText
    android:id="@+id/etLastName"
    style="@style/addressBookLand"
    android:hint="Enter your last name"
    android:inputType="text"
    android:layout_below="@id/tvTitle"
    android:layout_toRightOf="@id/centre_marker"/>

或者，正如其他人所提到的，只要您不打算使布局变得更加复杂或不那么规范，两个相同大小的垂直 LinearLayouts 位于水平 LinearLayout 内就会为您提供所需的结果。

我希望这会有所帮助。如果您需要澄清，可以给我留言，我会尽力解释。

【讨论】：

我正在考虑做这样的事情。我会试一试。唯一的缺点是每行都需要一个中心视图。谢谢。
您不需要为每一行添加一个标记。他们会排队。如果它们在父级中处于相同高度，则应该没有任何区别。

【解决方案2】：

将 EditText 分组为两个垂直的 LinearLayout。在它们周围包裹一个水平 LinearLayout，并给垂直 LinearLayouts weight="1"

<LinearLayout
  android:orientation="horizontal"
  android:width="match_parent"
  android:height="wrap_content">

  <LinearLayout
    android:orientation="vertical"
    android:weight="1"
    android:width="0dp"
    android:height="wrap_content">

  <!-- put first column here -->

  </LinearLayout>

  <LinearLayout
    android:orientation="vertical"
    android:weight="1"
    android:width="0dp"
    android:height="wrap_content">

  <!-- put second column here -->

  </LinearLayout
</LinearLayout

【讨论】：

我不喜欢嵌套布局解决方案，因为它只是使用更多的处理能力来呈现它们。
在这篇(link) 文章中，建议使用GridLayout 而不是嵌套的LinearLayouts 来提高性能。也许这是要走的路？看来您正在寻找一个网格。

【解决方案3】：

试试下面的代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fffc" >

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:inputType="text"
    android:text="Address Book App"
    android:textSize="22sp"
    android:textStyle="bold|italic" />

<EditText
    android:id="@+id/etFirstName"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/tvTitle"
    android:layout_toLeftOf="@id/etLastName"
    android:hint="Enter your first name"
    android:inputType="text" />

<EditText
    android:id="@+id/etAddressLine"
    style="@style/addressBookLand"
    android:layout_below="@id/etFirstName"
    android:hint="Enter your address"
    android:inputType="text" />

<EditText
    android:id="@+id/etCity"
    style="@style/addressBookLand"
    android:layout_below="@id/etAddressLine"
    android:hint="Enter your city"
    android:inputType="text" />

<Button
    android:id="@+id/btnCancel"
    style="@style/addressBookLand"
    android:layout_below="@id/etEmailAddress"
    android:layout_centerHorizontal="true"
    android:onClick="onClickCancel"
    android:text="Cancel" />

<Button
    android:id="@+id/btnSubmit"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/etPhoneNumber"
    android:layout_toLeftOf="@id/btnCancel"
    android:text="Submit" />

<EditText
    android:id="@+id/etLastName"
    style="@style/addressBookLand"
    android:layout_alignBaseline="@+id/etFirstName"
    android:layout_alignBottom="@+id/etFirstName"
    android:layout_alignParentRight="true"
    android:ems="10"
    android:hint="Enter your last name"
    android:inputType="text" />

<EditText
    android:id="@+id/etDistrict"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/etLastName"
    android:ems="10"
    android:hint="Enter your district"
    android:inputType="text" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/etPostCode"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:ems="10"
    android:hint="Enter your postcode"
    android:inputType="number" />

<EditText
    android:id="@+id/etEmailAddress"
    style="@style/addressBookLand"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/etPostCode"
    android:ems="10"
    android:hint="Enter your email Address"
    android:inputType="textEmailAddress" />

<EditText
    android:id="@+id/etPhoneNumber"
    style="@style/addressBookLand"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/etCity"
    android:ems="10"
    android:hint="Enter your phone number"
    android:inputType="phone" />

希望这能解决您的问题

【讨论】：

【解决方案4】：

尝试使用以下代码。希望这会奏效。

    <?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="match_parent" >

    <View
        android:id="@+id/center"
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_centerHorizontal="true" />

    <EditText
        android:id="@+id/fist_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/center" />


    <EditText 
        android:id="@+id/second_row"
        android:layout_alignLeft="@+id/center"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fist_row"/>

【讨论】：

【解决方案5】：

你也说线性布局不适合你，你应该考虑将它用作相对布局的子布局！

这样，您可以围绕两个按钮设置水平线性布局，并将它们水平居中。

所以不是两个按钮，而是：

<LinearLayout
    android:height="wrap_content"
    android:width="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal"
    android:layout_below="@id/etPhoneNumber" >
    <Button
        android:id="@+id/btnSubmit"
        style="@style/addressBookLand"
        android:text="Submit"/>
    <Button
        android:id="@+id/btnCancel"
        style="@style/addressBookLand"
        android:onClick="onClickCancel"
        android:text="Cancel"/>  
</Linearlayout>

这也可能是一个解决方案： Center two buttons horizontally

【讨论】：

我不喜欢嵌套布局解决方案，因为它只是使用更多的处理能力来呈现它们。

【解决方案6】：

只需使用放置在线性布局中的 2 个相对布局创建列，并在 Width_layout 设置为 match_parent 的列上使用权重。请记住，您可以在其他布局中嵌套布局。

【讨论】：

我不喜欢嵌套布局解决方案，因为它只是使用更多的处理能力来呈现它们。