Android: 多行对齐标签和按钮

Question

我对那个布局发疯了。所以这就是我想要实现的目标。一个简单的布局，左侧有一个标签 (TextView) 或编辑字段 (EditText)，右侧有一个按钮。我想要垂直调整所有标签和所有按钮 - 这意味着所有按钮和所有标签的宽度相同。

但是如何做到这一点？我尝试了一个垂直方向的 LinearLayout，每行作为另一个水平方向的 LinearLayout，并且在其中标签的 layout_weight 为 8，按钮为 1。但这仍然不能保证我想要什么！

这是目前的结果。你可以看到按钮没有很好地对齐。

这是我的布局：

这是XML：

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

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <EditText
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="test_test_blabla"
                android:layout_weight="8"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_scan"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_weight="1"
                android:layout_gravity="right"
                />

    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="17:35"
                android:layout_weight="8"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_pick_time"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_weight="1"
                android:layout_gravity="right"
                />

    </LinearLayout>

</LinearLayout>

Answer 1

按照大家的建议，我使用了TableLayout。但是标签 (EditText) 仍然没有使用整个 space 直到按钮。

那就是 XML:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">

    <TableRow>

        <EditText
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="test_test_blabla"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_scan"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

    <TableRow>

        <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:text="17:35"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_pick_time"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

    <TableRow>

        <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:hint="@string/hint_car_location_address"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="left"
                />

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="@string/action_gps"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:layout_gravity="right"
                />

    </TableRow>

</TableLayout>

Answer 2

编辑：
试试 RelativeLayout
像这样：

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:columnCount="2">
    <EditText
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@android:id/button1"
        android:text="test"/>
    <Button
        android:id="@android:id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingLeft="28dp"
        android:paddingRight="28dp"
        android:text="set"
        />

    <TextView
        android:id="@android:id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@android:id/button1"
        android:layout_alignBottom="@android:id/button2"
        android:layout_below="@android:id/button1"
        android:gravity="center_vertical"
        android:text="some test"/>

    <Button
        android:id="@android:id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@android:id/button1"
        android:layout_alignLeft="@android:id/button1"
        android:layout_alignRight="@android:id/button1"
        android:text="Scan"
        />
</RelativeLayout>

Answer 3

使用 RelativeLayout 您可以获得所需的布局：

<?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"
                android:orientation="vertical">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView"
        android:layout_toLeftOf="@+id/button"
        android:fontFamily="sans-serif-thin"
        android:hint="test_test_blabla"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_toRightOf="@+id/textView"
        android:fontFamily="sans-serif-thin"
        android:hint="Scan"
        android:textSize="24sp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/editText"
        android:layout_toLeftOf="@+id/button2"
        android:fontFamily="sans-serif-thin"
        android:text="17:35"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button"
        android:fontFamily="sans-serif-thin"
        android:hint="Pick Time"
        android:textSize="24sp"/>

</RelativeLayout>

用于匹配大小的关键布局属性是第一个 EditText 上的 android:layout_alignRight="@+id/textView"，引用正下方的 TextView。

结果：

Answer 4

5 年多以后...OP 现在可能是 android xml 方面的专家了。尽管如此，为了帮助解决这个问题，线性布局是可行的。我添加了另一个线性布局以包含所有行，以便可以在此附加布局中调整边距。

使用weight sum时，对应的变量（width / height）必须为0dp，这样才能相应调整。

<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:orientation="vertical"
        android:weightSum="2">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            android:weightSum="9">

            <EditText
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:fontFamily="sans-serif-thin"
                android:hint="test_test_blabla"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="sans-serif-thin"
                android:hint="@string/action_scan"
                android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="left"
            android:orientation="horizontal"
            android:weightSum="9">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="8"
                android:fontFamily="sans-serif-thin"
                android:text="17:35"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:fontFamily="sans-serif-thin"
                android:hint="@string/action_pick_time"
                android:textSize="24sp" />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Android: 多行对齐标签和按钮

Android: align labels and buttons in multiple lines

android

android-layout

android-xml

结果：